项目工程化

创建Vue3项目有两个选择

• 使用@vue/cli
• 使用Vite

vite是尤雨溪团队开发的新一代前端构建工具。速度比webpack快，可以创建vue、react、angluar等项目

1.使用vue-cli

1.查看@vue/cli版本，确保@vue/cli版本在4.5.0以上

vue --version

2.安装或者升级你的@vue/cli

npm install -g @vue/cli

3.创建

vue create Vue3项目名

4.选择vue3 default

5.启动

1. cd vue_test 切换到项目的目录下
2. npm run serve 运行

2.使用Vite

版本兼容性：

• 使用vite2：Vite 需要 Node.js 版本 >= 12.0.0。
• 使用vite3：Vite 需要 Node.js 版本 14.18+，16+

2.1 create-vite

crate-vite是vite官方提供的官方脚手架，可以创建vue、react等框架的项目模板。

1.运行指令选择创建的框架

npm

npm create vite@latest

yarn

yarn create vite

pnpm

pnpm create vite

2.输入项目名之后选择Customize with create-vue，当然也可以选择JavaScript，这样可以创建一个简单的vue3模板，就没有后面的事了

√ Project name: ... test
√ Select a framework: » Vue
√ Select a variant: » Customize with create-vue ↗

3.选择相应的配置

Vue.js - The Progressive JavaScript Framework

√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes
√ Add Prettier for code formatting? ... No / Yes

4.进入项目目录运行

# 进入项目目录
cd test

# 下载依赖
npm i

# 运行
npm run dev

2.2 create-vue

这是vue官方提供的vue项目构建工具，基于vite

前提条件：已安装 16.0 或更高版本的 Node.js

1.运行指令创建项目

npm init vue@latest

npm create 是 npm init 的别名，npm create vue@latest同样生效

2.选择相应的配置

 Project name: ... vue3test
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes
√ Add Prettier for code formatting? ... No / Yes

3.进入工程目录

cd project-name

4.安装依赖

npm install 或 npm i

5.运行

npm run dev

3.常见报错

1.The template root requires exactly one element

意思是当前模板只需要一个根标签

但是vue3支持组件支持所有元素不用一个根标签包裹

解决办法：关闭vetur插件

附言：如果你是用vue3，建议用Volar来替换vetur！！！

volar 和 vetur都是针对 vue 的插件，但是 volar 的功能却要强大得多，也能更好的支持TS

2.No Babel config file detected for....

每个文件的第一行第一列下面都有红色波浪线

解决：

parserOptions中添加requireConfigFile: false,

.eslintrc.js

parserOptions: {
    parser: "@babel/eslint-parser",
    requireConfigFile: false,
},

3.Component name "Setup" should always be multi-word.

原因：vue3的文件名需要"组合的词"

解决

rules中添加"vue/multi-word-component-names": "off"

.eslintrc.js

  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "vue/multi-word-component-names": "off",
  },

4.找不到模块“./App.vue”或其相应的类型声明。

找不到模块“vite”。你的意思是要将 "moduleResolution" 选项设置为 "node"，还是要将别名添加到 "paths" 选项中?

1.找不到vue文件的，是因为ts无法解析我们的vue结尾的文件，所以需要在src目录下，

新建一个d.ts结尾的文件(可以叫env.d.ts)

然后里面这样写就可以

/// <reference types="vite/client" />

declare module '*.vue' {
    import { DefineComponent } from 'vue';
    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
    const component: DefineComponent<{}, {}, any>;
    export default component;
}

// 环境变量 TypeScript的智能提示
interface ImportMetaEnv {
    VITE_APP_TITLE: string;
    VITE_APP_PORT: string;
    VITE_APP_BASE_API: string;
}

interface ImportMeta {
    readonly env: ImportMetaEnv;
}

找不到ts文件就更正常了，我们需要在tsconfig.json里面进行配置（没有的话就新建一个，在根src同级的目录下面）。就直接复制就完事了，

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "useDefineForClassFields": true,
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "baseUrl": "./",
    "paths": {
      "@": ["src"],
      "@/*": ["src/*"]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "*.ts"
  ],
  "references": [{ "path": "./tsconfig.node.json" }]
}

5.仅当 “--module” 选项为 “es2020”、“es2022”、“esnext”、“system”、“node16” 或 “nodenext” 时，才允许使用 “import.meta” 元属性。

需要在tsconfig.json中配置 "module": "esnext",

{
	// ...
    "module": "esnext",
}