TS+vue3.0.0-alpha.1基础配置

vue3.0终于发布了，所以尝试一把TS编写体验。

搭建配置。

webpack

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require("vue-loader");

module.exports = {
  entry: './src/index.ts',
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.vue?$/,
        use: 'vue-loader',
        exclude: /node_modules/,
      },
      {
        test: /\ts?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.scss$/,
        use: [{
            loader: "style-loader" // 将 JS 字符串生成为 style 节点
        }, {
            loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
        }, {
            loader: "sass-loader" // 将 Sass 编译成 CSS
        }]
      }
    ],
  },
  resolve:{
    extensions: [".ts", ".js",".vue"],
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      title: 'Output Management'
    })
  ],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    port: 1234,
    hot: true,
  }
};

此处比较坑的是devServer.hot:true如果不设置的话，会报错。

image.png
后来定位源码发现vue-loader在处理是会去判断module.hot是否存在。从而判断是否createRecord。
image.png

感觉这块应该是缺少了判断目前已提issues。

TS配置

{
  "compilerOptions": {
    "module": "es6",
    "target": "es5",
    "jsx": "preserve",
    "esModuleInterop": true,
    "moduleResolution": "node",
    "allowJs": true
  },
  "exclude": ["node_modules"],
  "include": ["./src/**/*"]
}

接下来比较重要的是对.vue文件进行声明

declare module "*.vue" {
  import {Component} from "vue";
  let component:Component;
  export default component;
}

不然的话在createApp().mount(App,root)的时候ts判断App不是component会报错。

页面

剩下的就是

import App from "./App.vue";
createApp().mount(App, "#app")

再贴一个App.vue

<template>
  <div class="example">The <test :text="test"></test> is vue3.0 with TS </div>
</template>
<script lang="ts">
import { reactive } from 'vue';
import Test from "./Test.vue";

export default {
  components:{
    Test
  },
  data:reactive({test:"TEST"})
}
</script>
<style lang="scss" scoped>
.example{
  font-size: 1.6rem;
}
</style>

具体请参考vue3-test-demo