VITE+VUE3.0項目(一)——創建

第一步

准備

node版本在12.0.0以上(官方說法)
推薦使用最新的穩定版 (￣(工)￣)

創建

創建命令：yarn create @vitejs/app my-vue-app --template vue

注：如果是VScod 記得把vue2.0的Vetur替換為3.0的Volar語法提示
推薦使用yarn

自帶支持TS

直接將min.js后綴改為ts
vue中的script標簽中加入lang="ts"
將/index.html中的
<script type="module" src="/src/main.js"></script>
改為
<script type="module" src="/src/main.ts"></script>

配置注入

創建 shims-vue.d.ts文件
/src/shims-vue.d.ts

declare module '*.css'{
    const classes:{[key:string]:string}
    export default classes;
}
declare module '*.vue'{
    import { defineComponent,FunctionalComponent } from "vue";
    const component:ReturnType<typeof defineComponent> | FunctionalComponent;
    export default component;
}

創建tsconfig.json文件
/tsconfig.json

{
    "compilerOptions": {
      "target": "esnext",
      "module": "esnext",
      // 這樣就可以對 `this` 上的數據屬性進行更嚴格的推斷
      "strict": true,
      "noImplicitAny": true,
      "noImplicitThis": true,
      "strictNullChecks": true,
      "jsx": "preserve",

      "moduleResolution": "node",
      "baseUrl": ".",
      "paths": {
        "@/*":["src/*"]
      }

    },
    "include": ["src/**/*.ts","src/**/*.d.ts","src/**/*.vue"]
  }

配置vite.config.js
/vite.config.js

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from  'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve:{
    alias:{
        '@':resolve(__dirname,'./src'),
    },
  },
});