webpack5快速搭建Vue3项目

基础环境搭建

参考 webpack5快速搭建HTML项目

安装依赖

1. vue：yarn add vue -S

2. vue-loader：yarn add vue-loader -D，解析和转换.vue文件，提取出其中的逻辑代码 script、样式代码 style、以及 HTML 模版 template，再分别把它们交给对应的 Loader 去处理。

3. ts-loader：yarn add typescript ts-loader -D，解析ts语法，需要新增ts配置文件tsconfig.json，可以使用命令tsc --init可以快速生成，但是需要全局安装TypeScript yarn global add typescript。

   # tsconfig.json配置文件
   {
        
     "compilerOptions": {
        
         "outDir": "./dist/",
         "sourceMap": true,
         "strict": true,
         "noImplicitReturns": true,
         "noImplicitAny": true,
         "module": "es6",
         "moduleResolution": "node",
         "target": "es5",
         "allowJs": true,
     },
     "include": [
         "./src/**/*"
     ]
   }
   

   由于typescript只能理解.ts文件，无法理解.vue文件，会报错：找不到模块对应的类型声明。需要在src目录下新增文件shims-vue.d.ts：

   // shims-vue.d.ts
   declare module "*.vue" {
        
     import type {
         DefineComponent } from "vue";
     const component: DefineComponent<{
        }, {
        }, any>;
     export default component;
   }
   

4. sass-loader：yarn add css-loader n