使用vite搭建vue3.0+ts项目
第一部分(vite环境搭建)
- 安装vite环境
npm init @vitejs/app 或者 yarn create @vitejs/app
- 使用vite初始化vue+ts项目
npm init @vitejs/app my-vue-app 或者 yarn create @vitejs/app my-vue-app
- 执行上面命令后选择vue - ts
- 回车后继续执行
vue3.0 + ts简单项目便搭建好了, 后续是vue-router配置, vueX的配置, 以及vite.confit.ts文件的配置
第二部分(vue-router搭建)
- 安装vue-router
npm install vue-router@4 或者 yarn add vue-router@4
- 在
src
目录下建立router
文件夹,然后在router文件夹中创建index.ts
文件,文件内容如下
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
const history = createWebHistory()
const routes: Array<RouteRecordRaw> = [{
path: '/',
name: 'home',
component: () => import('../views/home/index.vue')
}]
const router = createRouter({
history,
routes
})
export default router
- 在
main.ts
文件引入
import { createApp } from 'vue'
import App from './App.vue'
import router from "./router"
const app = createApp(App)
app.use(router)
.mount('#app')
第三部分(vueX的搭建)
- 安装vueX
npm install vuex@next --save 或者 yarn add vuex@next --save
-
在
src
目录下创建一个store
文件夹, 里面放index.ts
state.ts
mutations.ts
actions.ts
-
在
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
- 在
main.ts
中引入
import { createApp } from 'vue'
import App from './App.vue'
import router from "./router"
import store from './store'
const app = createApp(App)
app.use(router)
.use(store)
.mount('#app')
第四部分(vite.config.ts)设置别名
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"@": '/src'
}
}
})