Vue2（四）：自定义创建项目、ESlink语法规范、vuex（state、mutations、actions、getters）、模块module、组件库vant

原创已于 2025-12-16 16:46:44 修改 · 965 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue #ESlink

于 2025-12-08 16:04:56 首次发布

Vue2+Vue3 专栏收录该内容

5 篇文章

订阅专栏

模块中访问action（类比mutation）

1、基于VueCli自定义创建项目

空格选中

无分号规范：

将配置文件放在单独的文件中

ESlink 代码规范

JavaScript Standard Style 规范说明：https://standardjs.com/rules-zhcn.html

自动修正错误：ESLint 高亮错误，并通过配置自动帮助我们修复错误。

在vs code中打开设置，右上角的打开设置中配置。

2、vuex基本认知

vuex：vue的状态管理工具，状态就是数据，管理vue通用的数据（多组件共享的数据）

应用场景：某个状态在很多个组件中使用（eg：个人信息）、多个组件共同维护一份数据（eg：购物车）

优势：共同维护一份数据，数据集中化管理；响应式变化；操作简洁（vuex提供了一些辅助函数）

vuex插件安装&创建仓库

访问仓库（所有组件都可以访问）：this.$store

核心概念 - state状态

提供数据：

通过store使用数据：

store访问，需要在仓库中提供state属性。

通过辅助函数使用数据：

使用时，使用{{ count }}.

核心概念 - 修改数据mutations

vuex同样遵循单向数据流，组件中不能直接修改仓库的数据

通过 strict:true 可以开启严格模式（最终呈现，不需要开启，因为会消耗性能）

mutations修改数据

mutations传参语法

提交载荷只能提供一个参数

辅助函数：mapMutations

---将mutations中的方法提取出来，映射到组件methods中。

核心概念 - 处理异步actions

mutations必须是同步的（便于监测数据变化，记录调试）

在仓库中，提供action方法。其中，context上下文，默认提交的就是自己模块的action和mutation。-

辅助函数 - mapActions

把位于actions中的方法提取出来，映射到组件methods中

核心概念 - getters

--- 当我们需要从state中派生出一些状态时，需要使用getters

getters和state并列写，使用mapGetters时，先导入，import { mapGetters } from 'vuex'。

核心概念 - 模块 module

模块中访问state

mapState的两种映射可以同时写，但是子模块的映射必须开启命名空间。

模块中访问getters

模块中访问mutation

模块中访问action（类比mutation）

json-serve工具

3、智慧商城项目知识点

Babel（语法降级）、Router（Vue Router配置）、Vuex（状态管理的配置）、CSS（预处理器的配置）、Linter（代码规范的配置）

组件库vant

vue组件库：vant-ui（Vue的组件库不是唯一的）

官网：https://vant-contrib.gitee.io/vant/#/zh-CN/

vant2（支持vue2）：https://vant-ui.github.io/vant/v2/#/zh-CN/

一般不同的平台使用不同的组件库：

PC端：element-ui（Vue2）、element-plus（Vue3）、ant-design-vue（v2&v3）

移动端：vant-ui、Mint UI（饿了么）、Cube UI（滴滴）

安装步骤在官网 --> 快速上手中。

项目中的vw适配

--- 基于postcss插件实现项目vw适配

vant2进阶用法 --> 浏览器适配

安装插件：npm install postcss-px-to-viewport@1.1.1 -D --force

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      // 标准屏宽度
      viewportWidth: 375
    }
  }
}

路由配置

只要是单个页面独立展示的，都是一级路由。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/views/login'
import Layout from '@/views/layout'
import Search from '@/views/search/index.vue'
import SearchList from '@/views/search/list.vue'
import ProDetail from '@/views/prodetail'
import Pay from '@/views/pay'
import MyOrder from '@/views/myorder'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/login', component: Login },
    { path: '/', component: Layout },
    { path: '/search', component: Search },
    { path: '/searchlist', component: SearchList },
    { path: '/prodetail/:id', component: ProDetail },
    { path: '/pay', component: Pay },
    { path: '/myorder', component: MyOrder }
  ]
})

export default router