一、vite搭建项目
- 安装vite环境
npm init @vitejs/app
- 使用vite初始化vue+ts项目
npm init @vitejs/app policy
-
执行上面命令后选择vue - ts
-
项目创建完成,运行项目
二、vue-router
- 安装vue-router
npm install vue-router@4 --save
- 配置路由
// src/router/index.ts
import {createRouter, createWebHistory, RouteRecordRaw } from "vue-router"
const history = createWebHistory();
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'home',
component: () => import('../views/home.vue') // 路由懒加载
}
]
const router = createRouter({
history,
routes
})
export default router
// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
三、vuex
- 安装vuex
npm install vuex@next --save
- 配置
// src/store/index.ts
import { createStore, } from "vuex";
import state from './state'
import mutations from './mutations'
import actions from './actions'
const store = createStore({
state,
mutations,
actions,
modules: {
}
})
export default store
// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
createApp(App).use(router).use(store).mount('#app')
四、配置vite.config.ts