Vue - 创建 Vue3 项目

需搭建项目 Vue3 + ts + sass

1. 创建项目

 npm create vite@latest

2. 安装依赖

tyarn

3. 启动项目

yarn dev

4. 处理其他配置问题

　　1）打开HelloWorld.vue页面，发现一些报红，报错

　　　　解决：找到 tsconfig.json 文件，将 moduleResolution设置成 node，报红就没了

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "node", // "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

　　2）在main.ts中可能也会报如下错

　　　　解决：找到 vite-env.d.ts 文件，在里面追加如下代码，保存即可：

declare module "*.vue" {
  import type { DefineComponent } from "vue";
  const vueComponent: DefineComponent<{}, {}, any>;
  export default vueComponent;
}

　　3）在写ts语法的时候，一些变量名未使用也会报错

　　　　解决：在 tsconfig.json 中将noUnusedLocals改为false，不去校验未使用的变量。

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "node", // "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",

    /* Linting */
    "strict": true,
    "noUnusedLocals": false,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

参考：http://lihuaxi.xjx100.cn/news/1247996.html?action=onClick

JZTXT

Vue - 创建 Vue3 项目

Vue - 创建 Vue3 项目