安装vite
使用npm
npm create vite@latest
使用yarn
yarn create vite
使用pnpm
pnpm create vite
配置@路径
1、安装path插件
npm install path --save
2、在vite.config.ts中导入
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname,'./src')
}
}
})
3、在tsconfig.json中添加
"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,
"paths": {
"@": ["./src"],
"@/*":["./src/*"]
}
},
安装router
npm i vue-router -D
在src目录下新建router目录,并新建index.js文件
//1.从VueRouter中导入需要的函数模块
import {createRouter, createWebHashHistory } from 'vue-router'
// 2.导入 HelloWorld.vue 组件
const routes = [
{ path: '/', component: () => import('../components/HelloWorld.vue')}
]
// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置,但我们在这里
// 暂时保持简单
const router = createRouter({
// 4. 内部提供了 history 模式的实现。为了简单起见,我们在这里使用 hash 模式。
history: createWebHashHistory(),
routes, // `routes: routes` 的缩写
})
//导出router
export default router
在main.ts文件中把router挂载上去
import { createApp } from 'vue';
import App from './App.vue';
import router from './router/index.js'; //导入router配置文件
const app = createApp(App);
app.use(router); //挂载router
app.mount('#app');
ps:如果在ts文件中导入js报错需配置tsconfig.json
“noImplicitAny”: false
最后在app.vue中使用
<template>
<router-view /> //使用的router-view
</template>
安装less
npm install less less-loader --save-dev