@[TOC](Vite+Vue3+Vue Router+Vuex+CSS预处理器(less/sass)配置指南 —— 全网最详细系列)

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

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

一、构建Vite+Vue3

使用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>

效果：

import {createStore} from "vuex";
// vuex持久化插件
import createPersistedState from "vuex-persistedstate"
export const store = createStore({
    plugins: [createPersistedState()],
    state: {
        finish: 9999999999666666666,
    },
    getters: {},
    mutations: {},
    actions: {},
    modules: {}

});

四、安装less

# .scss and .sass
npm install -D sass

# .less
npm install -D less

# .styl and .stylus
npm install -D stylus

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