使用 Vite 搭建 Vue3 项目

分类: 编程
日期: 2022-04-07
浏览: 746

最近有个前端新手小伙伴问我如何使用 Vite 搭建项目,说自己跟着官方文档搭建了之后,为什么 VuexVue Router 都不能使用,在交流了之后才知道,原来他以为使用 ViteVue 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 搭建项目,需要自己动手安装各个插件。虽说弊端是麻烦了点,但也是有好处的,一个是选择多了很多,我们可以根据自己的喜好选择插件,方便定制化;还有就是使我们对插件如何安装和使用有了更多的认识。

版权声明
作者:不二
来源:不二博客
文章版权归作者所有,未经允许请勿转载。
共有 0 条评论
赶快发表评论吧~
发表评论