1.安装nvm
下载:
Releases · coreybutler/nvm-windows · GitHub
安装完成后,可以打开cmd命令行窗口,执行
//查看版本:
nvm -v
//看安装的所有node.js的版本 :
nvm ls
//查显示可以安装的所有node.js的版本:
nvm list available
//安装node.js:
nvm install 16.15.0
//使用对于的node.js版本:
nvm use 16.15.0
2.创建项目
1.方式一
1.输入命令
npm create vite@latest
2.给项目起名
3.选择 Vue
4.选择Typecript/Javascript
2.方式二
1.安装 vite 构建工具:
npm install -g create-vite-app
2.创建 vue3 项目
create-vite-app vue3-demo
3.配置根路径
1.配置:vite.config.ts
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'),
'*': resolve('')
},
}
})
2. 配置:tsconfig.json
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "preserve",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
},
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
}