1 创建项目

• 开发公司先在命令行下面创建一个基于Vue+Vite的目录
• 开发公司输入项目名称，开发公司这里我输入study-vue
• 选择framework为vue
• 选择variant为vue-ts

npm init vite@latest
1

结果如下：

2 安装依赖

安装依赖包npm install启动项目，测试是否可运行npm run dev
1
2
3
4
5

如果上面的npm run dev可以将项目运行，那么说项目创建没有问题，可以继续安装一些我们常用的依赖包了

安装vue-routernpm install vue-router@4安装axiosnpm install axios安装element-plusnpm install element-plus --save安装图标npm install @element-plus/icons-vue安装@types/nodenpm install @types/node --save-dev安装pinianpm install pinia
1
2
3
4
5
6
7
8
9
10
11
12

package.json文件会如下：

{  "name": "study-vue",  "private": true,  "version": "0.0.0",  "type": "module",  "scripts": {    "dev": "vite",    "build": "vue-tsc --noEmit && vite build",    "preview": "vite preview"  },  "dependencies": {    "@element-plus/icons-vue": "^2.0.6",    "axios": "^0.27.2",    "element-plus": "^2.2.12",    "pinia": "^2.0.17",    "vue": "^3.2.37",    "vue-router": "^4.1.3"  },  "devDependencies": {    "@types/node": "^18.6.5",    "@vitejs/plugin-vue": "^3.0.0",    "typescript": "^4.6.4",    "vite": "^3.0.0",    "vue-tsc": "^0.38.4"  }}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

3 配置路径别名@

修改vite.config.ts

import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import path from "path";//这个path用到了上面安装的@types/node// https://vitejs.dev/config/export default defineConfig({  plugins: [vue()],  resolve: {    alias: {      '@': path.resolve('./src') // @代替src    }  }})
1
2
3
4
5
6
7
8
9
10
11
12
13

修改tsconfig.json

在compilerOptions中添加下面的最后2项：“baseUrl"和"paths”

{  "compilerOptions": {    "target": "ESNext",    "useDefineForClassFields": true,    "module": "ESNext",    "moduleResolution": "Node",    "strict": true,    "jsx": "preserve",    "sourceMap": true,    "resolveJsonModule": true,    "isolatedModules": true,    "esModuleInterop": true,    "lib": ["ESNext", "DOM"],    "skipLibCheck": true,    "baseUrl": "./",    "paths": {      "@/*": ["src/*"]    }  },  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],  "references": [{ "path": "./tsconfig.node.json" }]}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

验证路径别名@是否生效

在main.ts中引用一个组件，验证下是否会报错，并最后运行项目看能否正常启动