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

简介: 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

兼容性注意
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的搭建
相关文章
|
11月前
|
前端开发 开发者
CSS预处理器Less、Scss
【10月更文挑战第3天】
201 59
|
12月前
|
前端开发 开发者
在 Vite 中使用 CSS 预处理器的劣势是什么?
在 Vite 中使用 CSS 预处理器的劣势是什么?
|
10月前
|
前端开发
create-react-app 如何使用 less/sass 和 react-css-modules?
本文详细介绍了在 create-react-app 项目中如何使用 less/sass 和 react-css-modules 来管理和应用样式。首先,通过安装相应依赖并配置 webpack 支持 less/sass;接着,介绍如何使用这些预处理器编写样式;最后,讲解了如何配置和使用 react-css-modules 实现样式的模块化管理,以及如何结合使用 less/sass 和 react-css-modules 提高开发效率和代码质量。
188 3
|
11月前
|
前端开发 开发者
CSS的预处理器是什么?
CSS的预处理器是什么?
142 4
|
12月前
|
前端开发
在 Vite 中使用 CSS 预处理器的优势是什么?
在 Vite 中使用 CSS 预处理器的优势是什么?
|
11月前
|
存储 前端开发 开发者
深入了解 Sass 和 SCSS:CSS 预处理器的强大功能
Sass(Syntactically Awesome Stylesheets)是一个强大的 CSS 预处理器,为开发者提供了诸多高级特性,如变量、嵌套、混合、继承等,简化了 CSS 的编写和管理。SCSS 是 Sass 3 引入的新语法,完全兼容 CSS3,并增强了 Sass 的动态功能。本文详细介绍了 Sass 和 SCSS 的核心特性及其在实际开发中的应用,如变量定义、嵌套规则、混合、继承、以及常用的操作符与扩展功能。
396 0
|
11月前
|
前端开发 开发者 容器
Vue3中Sass的安装与使用指南:轻松上手CSS预处理器
Vue3中Sass的安装与使用指南:轻松上手CSS预处理器
850 0
|
3月前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。
|
3月前
|
存储 前端开发 安全
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。
|
3月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中