1、通过vite安装vue3+ts项目
npm create vite@latest
然后按步骤选择相应选项
2、安装依赖
npm install
然后启动
npm run dev
3、配置@作为src路径引入
(1).安装path模块,通过该模块配置路径。
npm i path
(2).在vite.config.ts中加入配置
resolve: {
alias: {
'@': resolve(__dirname, 'src'),
},
extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
}
全部代码:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from "path";
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': resolve(__dirname, 'src'),
},
extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
}
})
(3).以上代码会出现ts提示找不到__dirname,需要安装node的类型提示
npm install --save-dev @types/node
(4).将src目录配置为@,在tsconfig.json配置加入
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
全部代码
{
"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/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
}
4、配置路由
(1)安装路由
npm i vue-router
(2)在src下创建router文件夹,创建index.ts文件作为路由根文件
import { createRouter,createWebHashHistory } from 'vue-router'
const routes = [
{
path:'/',
component: ()=> import('@/views/home/index.vue')
},
]
// 创建路由对象
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router;
3.在main.ts中use路由app.use(router);
import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router'
const app = createApp(App);
app.use(router);
app.mount('#app');
5、sass使用
npm i sass --save
安装npm i sass --save,然后在页面使用即可