创建 Vue3 工程

使用@vue/cli

npm install @vue/cli -g
vue create vue3-webpack-project
cd vue3-webpack-project
npm run serve

使用 vite

npm init vite-app vue3-vite-project
cd vue3-vite-project
npm install
npm run dev

文件介绍

入口文件

// src/main.js
import { createApp } from "vue"; // 引入createApp工厂函数
import App from "App.vue";
const app = createApp(App)
app.mount("#app");

Vue3 版本不会导出一个默认对象，每一个 API 都需要使用解构赋值来导入，这也是为了 Tree-Shaking

配置文件

vue.config.js

module.exports = {
  lintOnSave: false
};

配置 TS

const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  lintOnSave: false,
  chainWebpack: (config) => {
    // 处理ts文件 (新增loader)
    config.module
      .rule("ts")
      .test(/\.tsx?$/)
      .exclude.add(resolve("node_modules"))
      .end()
      .use("cache-loader")
      .loader("cache-loader")
      .options({
        cacheDirectory: resolve("node_modules/.cache/ts-loader")
      })
      .end()
      .use("babel-loader")
      .loader("babel-loader")
      .end()
      .use("ts-loader")
      .loader("ts-loader")
      .options({
        transpileOnly: true,
        appendTsSuffixTo: ["\\.vue$"],
        happyPackMode: false
      })
      .end();
  }
};