第一步

准备

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>
改为

配置注入

创建 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‘),
    },
  },
});

VITE+VUE3.0项目(一)--创建