1. 安装
npm init vite@latest
2. 配置项目名字
? Project name: » vite-project
3.选择vue项目
vanilla
> vue
react
preact
lit
svelte
4. 选择ts
vue
> vue-ts
5. cd进入项目, npm i 安装环境,安装常用的插件
npm install vue-router@4 vuex@next axios vuex-persister
6. 在src目录下添加router/index.ts文件,并配置
import { createRouter, createWebHashHistory } from "vue-router";
import Home from '../views/Home.vue'
const router = createRouter({
history: createWebHashHistory(),
routes: [{
path: '/',
name: 'home',
component: Home,
},
{
path: '/about',
name: 'About',
//路由懒加载
component: () => import('../views/About.vue')
}
]
})
export default router
7. 在src目录下添加store/index.ts文件,并配置
import { createStore } from 'vuex'
//引入数据固化
import VuexPersister from 'vuex-persister'
const persister = new VuexPersister({
//根据需求写入存储位置,我这里用的localStorage
storage: window.localStorage
})
const store = createStore({
state: {
},
getters: {
},
mutations: {
},
actions: {
},
modules: {
},
plugins: [persister.persist]
})
export default store
8. main.ts配置
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'//引入路由
import store from './store/index'//引入vuex
createApp(App).use(store).use(router).mount('#app')
9. 在vite.config.ts中配置@路径
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
//加入以下片段可使用@路径
resolve: {
alias: {
'@': '/src'
}
}
})