Vite 下一代前端开发与构建工具

官方中文文档

怎么样快速构建一个包含 vuex vue-router scss 的 vue 项目呢

First

# npm 6.x
npm init vite@latest my-vue-app --template vue

# npm 7+, 需要额外的双横线：
npm init vite@latest my-vue-app -- --template vue

Second

npm i
npm i vue@3.2.26 vue-router@4.0.12 vuex@4.0.2 

Third

在 src 目录下新建一个 router文件夹， 并在 router文件夹下 新建一个 index.js

// router/index.js

import { createRouter, createWebHashHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'HelloWorld',
    component: () => import('../components/HelloWorld.vue')
  }
]

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

export default router

在 src 目录下新建一个 store文件夹， 并在 store文件夹下 新建一个 index.js

// store/index.js

import { createStore } from 'vuex'

export default createStore({
  state: {},
  mutations: {},
  actions: {},
  modules: {}
})

fourth

相应地，main.js 应该修改为以下代码

// main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

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

fifth

启动项目

npm run dev

此时，你就拥有了一个 基于 vite 的 vue 项目