Vite 官方中文文档
Vue3 官方中文文档
Vue Router 4.x 官方中文文档
Vuex 4.x 官方中文文档

本文只介绍利用Vite构建Vue3项目并安装Vuex，Vue Router，CSS预处理器的详细步骤，各内容的具体使用请查阅官方文档。

一、构建Vite+Vue3

兼容性注意
Vite 需要 Node.js 版本 >= 12.0.0。

使用NPM构建

$ npm init vite@latest

然后按照提示操作即可！

你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue 项目，运行:

# npm 6.x
npm 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 install
npm run dev

出现：

点击链接打开：

运行成功！

二、安装Vue Router

Vue Router 4.x官方中文文档

安装Vue Router 4.x版本

npm install vue-router@4

新建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';

app.use(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 .sass
npm install -D sass

# .less
npm install -D less

# .styl and .stylus
npm install -D stylus

通过 <style lang="less" scoped>（或其他预处理器）自动开启。

参考博客：
vue3.0+vite+vuex+vue-router的搭建