- node版本>=12.0.0
zhaoman@gytlvdeMacBook-Pro vscode % node -v
v16.2.0
- 使用vite创建项目
zhaoman@gytlvdeMacBook-Pro vscode % npm init vite@latest
Need to install the following packages:
create-vite@latest
Ok to proceed? (y) y
✔ Project name: … cloud-admin
✔ Select a framework: › Vue
✔ Select a variant: › TypeScript
Scaffolding project in /Users/zhaoman/apps/vscode/cloud-admin...
Done. Now run:
cd cloud-admin
npm install
npm run dev
运行项目
cd cloud-admin
npm install
npm run dev
- vite.config.ts-配置服务
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
server:{
host:'0.0.0.0',
port:8080,
open:true
}
})
- vite.config.ts-配置别名
zhaoman@gytlvdeMacBook-Pro cloud-admin % npm install @types/node --save-dev
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
server:{
host:'0.0.0.0',
port:8080,
open:true
},
resolve:{
alias:[
{
find:'@',
replacement:resolve(__dirname,'src')
}
]
}
})
- tsconfig.json-配置别名路径
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"module": "ESNext",
"moduleResolution": "Node",
"strict": true,
"jsx": "preserve",
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
"lib": ["ESNext", "DOM"],
"skipLibCheck": true,
"noEmit": true,
"paths": {
"@/*": ["./src/*"] //格式一定要写对符号*不能少不然找不到@或者没有代码提示
}
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
}
- 使用别名
import HelloWorld from '@/components/HelloWorld.vue'