使用 Vite 搭建 Vue3 项目

文章首发于 不二博客

最近有个前端新手小伙伴问我如何使用 Vite 搭建项目，说自己跟着官方文档搭建了之后，为什么 Vuex 和 Vue Router 都不能使用，在交流了之后才知道，原来他以为使用 Vite 和 Vue Cli 搭建的项目一样，什么都帮我们安装好了，可以直接上手使用，其实 Vite 是需要我们自己逐个安装自己需要的插件的。

搭建 Vite 项目

npm create vite@latest

然后根据提示操作即可！

安装 Vuex

npm install vuex@next --save

Vuex 的使用方式，参考 vue-cli 方式搭建的项目，依葫芦画瓢即可。

在 src 目录下创建 store 目录，再在 store 目录下创建 index.js 文件。

index.js 文件内容示例：

import { createStore } from 'vuex'

export default createStore({
    state() {
        return {
            count: 0
        }
    },

    mutations: {
        increment(state) {
            state.count++
        }
    }
})

接着在 main.js 中导入 store 并使用。

import store from './store'

createApp(App).use(store).mount('#app')

安装 Vue Router

npm install vue-router@4

同样参考 vue-cli 方式搭建的项目。

在 src 目录下创建 router 目录，再在 router 目录下创建 index.js 文件。

index.js 文件内容示例：

import { createRouter, createWebHistory } from 'vue-router'
import Homeview from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'

const routes = [
    {
        path: '/',
        component: Homeview
    },
    {
        path: '/about',
        component: AboutView
    }
]

const router = createRouter({
    history: createWebHistory(),
    routes
})

export default router

接着在 main.js 中导入 router 并使用。

import router from './router'

createApp(App).use(store).use(router).mount('#app')

使用 Vite 搭建项目，需要自己动手安装各个插件。虽说弊端是麻烦了点，但也是有好处的，一个是选择多了很多，我们可以根据自己的喜好选择插件，方便定制化；还有就是使我们对插件如何安装和使用有了更多的认识。