Vite 官方中文文档Vue3 官方中文文档Vue Router 4.x 官方中文文档Vuex 4.x 官方中文文档
本文只介绍利用 Vite 构建 Vue3 项目并安装 Vuex，Vue Router，CSS 预处理器的详细步骤，各内容的具体使用请查阅官方文档。
一、构建 Vite+Vue3
兼容性注意 Vite 需要 Node.js 版本 >= 12.0.0。
使用 NPM 构建
然后按照提示操作即可！
你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue 项目，运行:
# npm 6.xnpm init vite@latest my-vue-app --template vue
# npm 7+, 需要额外的双横线：npm init vite@latest my-vue-app -- --template vue
复制代码
项目结构
运行项目
在控制台输入：
cd my-project(你的项目名，如上图我的就是要输入 cd vite-vue3-demo)npm installnpm run dev
复制代码
出现：
点击链接打开：
运行成功！
二、安装 Vue Router
Vue Router 4.x官方中文文档
安装 Vue Router 4.x 版本
新建 router/index.js 文件
在项目src目录下创建router文件夹，在router文件夹内创建index.js文件：
import { createRouter,createWebHistory } from "vue-router";
const router = createRouter({ history: createWebHistory(), routes: [ // { // path: '/HelloWorld', // name: 'HelloWorld', // component: () => import('@/components/HelloWorld.vue') // }, { path: '/HelloWorld', name: 'HelloWorld', component: () => import('../components/HelloWorld.vue') }, ]})
export default router;
复制代码
如果要使用上面那个路由的@/components/HelloWorld.vue写法，需要去 vite.config.js 文件配置如下，才能使用@写法
import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import { resolve } from 'path'// https://vitejs.dev/config/export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': resolve(__dirname, 'src') } },})
复制代码
增加了：
import { resolve } from 'path'
复制代码
resolve: { alias: { '@': resolve(__dirname, 'src') } },
复制代码
main.js 引入
import { createApp } from 'vue'import App from './App.vue'import router from './router/index'
const app = createApp(App)app.use(router)app.mount('#app')
复制代码
测试路由
修改 App.vue 中的<template>为：
<template> <img alt="Vue logo" src="./assets/logo.png" /> <router-link to="/HelloWorld">To HelloWorld</router-link> <router-view></router-view></template>
复制代码
重启项目，点击 To HelloWorld 即可跳转路由：
三、安装 Vuex
Vuex 4.x官方中文文档
安装 Vuex 4.x 版本
npm install vuex@next --save
复制代码
新建 store/index.js
在项目src目录下创建store文件夹，在store文件夹内创建index.js文件：
import {createStore} from "vuex";
export const store = createStore({ state: { finish: 9999999999666666666, }, getters: {}, mutations: {}, actions: {}, modules: {}
});
复制代码
main.js 引入
import {createApp} from 'vue'import App from './App.vue'import router from './router/index'import {store} from './store';
const app = createApp(App)app.use(router)app.use(store)app.mount('#app')
复制代码
增加了：
import {store} from './store';
复制代码
测试 Vuex
在 App.vue 中的<template>添加：
<template> <h1>{{$store.state.finish}}</h1> <img alt="Vue logo" src="./assets/logo.png" /> <router-link to="/HelloWorld">To HelloWorld</router-link> <router-view></router-view></template>
复制代码
效果：
注意：这里是$store.state.finish不是this.$store.state.finish，在本地运行时这两种写法都行，但是在打包部署时后者就不行了，推荐不要使用 this
推荐个 vuex 持久化插件：vuex-persistedstate使用方法：
import {createStore} from "vuex";// vuex持久化插件import createPersistedState from "vuex-persistedstate"export const store = createStore({ plugins: [createPersistedState()], state: { finish: 9999999999666666666, }, getters: {}, mutations: {}, actions: {}, modules: {}
});
复制代码
这个插件就是让你的 vuex 的数据能保存到浏览器，解决刷新页面 vuex 数据丢失的问题，具体介绍这里就不多说了
四、安装 less
Vite 提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持。没有必要为它们安装特定的 Vite 插件，但必须安装相应的预处理器依赖：
# .scss and .sassnpm install -D sass
# .lessnpm install -D less
# .styl and .stylusnpm install -D stylus
复制代码
通过 <style lang="less" scoped>（或其他预处理器）自动开启。
参考博客：vue3.0+vite+vuex+vue-router的搭建
评论