TypeScript基础篇 - Vue-TS-Webpack 环境实战

[Webpack+Vue+TS 环境配置](#Webpack+Vue+TS 环境配置)

scripts/webpack.config.js

src/Hello.tsx

src/SfcDemo.vue

src/main.tsx

src/shims-vue.d.ts

package.json

Webpack+Vue+TS 环境配置

scripts/webpack.config.js

javascript 复制代码

const path = require('path')
// 安装插件 npm install webpack webpack-cli @babel/core @babel/preset-env @babel/preset-typescript
// 安装vue3 npm install vue@next 
// 安装vue3对应的vue-loader // npm install vue-loader@next 
// 安装 npm install babel-loader -D
// npm install @vue/compiler-sfc -D // 用于编译文件组件用的
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
  entry: path.resolve(__dirname, "../src/main.tsx"),  // 入口文件
  mode: "development", // 开发模式
  module: {
    rules: [// 转义规则
      {
        test: /\.tsx?$/,
        loader: 'babel-loader',
        options: {
          presets: [
            "@babel/preset-env", // 转义es
            "@babel/preset-typescript"// 转义ts
          ],
          plugins: [
            "@vue/babel-plugin-jsx" // 用于转义vue jsx
          ],
        },
        // 排除
        exclude: /node_modules/
      },
      {
        // .vue的文件
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  resolve: { // import支持的扩展名
    extensions: [".tsx", ".ts", ".js", '.vue']
  },
  output: {// 打包后信息配置
    filename: 'bundle.js',
    path: path.resolve(__dirname, "../build")
  },
  devServer: {
    static: {// 打包静态文件配置
      directory: path.resolve(__dirname, "../build"),
    },
    port: 3020// 端口
  },
  plugins: [
    new HtmlWebpackPlugin({// 生成html文件模板
      template: path.resolve(__dirname, '../template.html')
    }),
    new VueLoaderPlugin()
  ]
}

src/Hello.tsx

javascript 复制代码

export default () => {
  return <div>Hello JSX</div>
}

src/SfcDemo.vue

html 复制代码

<template>
<div>Hello SFC</div>
</template>
<script>
export default {
  setup(){
    return {
    }
  }
}
</script>
<style>
</style>

src/main.tsx

javascript 复制代码

import { createApp } from 'vue'
// 让ts认.vue;需要一个垫片文件shims-vue.d.ts
import SfcDemo from './SfcDemo.vue'
import Hello from './Hello'
const App = () => {
  return <div>
    <SfcDemo />
    <Hello />
  </div>
}
createApp(App).mount("#root")

src/shims-vue.d.ts

javascript 复制代码

declare module '*.vue' { // 告诉ts 按【vue-component】 按下面的类型执行
  import { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

package.json

javascript 复制代码

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config scripts/webpack.config.js",
    "serve": "webpack serve --config scripts/webpack.config.js"
  },