一、基于VueCli自定义创建项目
1.VueCli是Vue.js官方的脚手架工具，能快速搭建Vue项目基础架构，提升开发效率。
2.自定义创建项目步骤：可能涵盖安装VueCli、运行创建项目命令，以及在创建过程中如何自定义选择项目配置，如选择Vue版本、插件集成、目录结构设置等。
二、ESLint
（一）ESLint手动修正代码规范错误
1.ESLint是用于识别和报告JavaScript代码中模式问题的工具，可确保代码符合统一规范，提升代码质量与可维护性。在Vue项目中，它能检查代码是否遵循特定风格指南。
2.识别代码规范错误：借助编辑器插件或命令行工具运行ESLint检查项目代码，标记出如缩进不统一、分号遗漏、变量命名不规范等错误与警告。
3.手动修正方法：依据ESLint提示，手动调整代码。例如将不规范的驼峰式命名改为符合约定的命名；按指定缩进风格（如2个空格或4个空格）调整代码缩进；补齐遗漏的分号等标点符号。
（二）ESLint自动修正代码规范错误
1.ESLint自动修正优势：手动修正代码规范错误效率低且易遗漏，ESLint自动修正功能可快速处理大量重复性错误，提高开发效率，保证代码风格一致性。
2.自动修正方法：在命令行中，运行 npx eslint --fix ，能自动修复代码中的部分错误，如多余空格、缺失分号等。也可在编辑器（如VS Code）安装ESLint插件并配置，实现保存文件时自动修正。在 .eslintrc.json 文件中可设置 "fix": true ，启用相关规则的自动修复功能。
3.注意事项：并非所有错误都能自动修正，复杂逻辑错误仍需手动处理。自动修正可能与个人代码习惯冲突，使用时需权衡，确保代码在规范
三、vuex的基本认知
1.核心概念：状态（state）是存储在Vuex中的数据，比如用户登录状态、购物车商品列表；变异（mutation）用于修改状态，必须是同步操作，保证状态变化可追踪；动作（action）可以包含异步操作，通过提交mutation间接修改状态；模块（module）能将Vuex的状态管理拆分成多个部分，每个模块有自己的state、mutation、action，方便管理复杂应用的状态。
四、构建多组织共享的数据环境
1.多组件数据共享的需求与困境：在Vue项目里，多个组件常常需要访问和修改同一份数据。例如电商应用中，用户登录状态数据，在导航栏、个人中心、订单页面等多个组件都要用到。传统父子组件通过 props 传值，在多层嵌套或兄弟组件间传递数据时，会面临繁琐的逐层传递，甚至需要中间组件做“数据中转站”，导致代码复杂、不易维护。
2.解决方法
props与自定义事件：父子组件间可以用 props 传递数据，子组件能通过 $emit 触发自定义事件向父组件传数据。但这些方法在复杂组件关系中效率低，不适合大规模数据共享场景。
3.Vuex状态管理库：Vuex为Vue应用构建了集中式数据管理环境。它将共享数据存于单一数据源（store），组件从store读取或修改数据。这样不同组件间数据交互变得更高效、易维护，例如购物车功能，商品添加、删除操作在不同组件，使用Vuex可统一管理购物车数据状态。
五、创建一个空仓库
1.创建步骤：先确保项目安装了Vuex，在Vue2项目中用 npm install vuex --save ，Vue3项目用 npm install vuex@next --save 。在项目 src 目录下新建 store 文件夹，在其中创建 index.js 文件。在 index.js 中引入Vue和Vuex，使用 Vue.use(Vuex) 安装Vuex插件。通过 new Vuex.Store() 创建仓库实例，此时仓库为空，后续可在其中定义状态（state）、变异（mutations）、动作（actions）和模块（modules）。
2.仓库作用：创建的空仓库是搭建数据管理体系的开端，为项目构建统一数据管理中心。后续在开发中，组件可从仓库获取数据，不同组件间共享数据更加便捷，开发者也能集中对数据进行操作和维护。
六、如何提供&访问vuex的数据
1.提供Vuex数据：在创建好Vuex仓库后，要让整个Vue应用能使用仓库数据。在Vue2项目里，通过 new Vue({... store }) 将 store 挂载到根实例上，这样所有子组件都能通过原型链访问到 store 。在Vue3项目中，使用 createApp(App).use(store).mount('#app') ，借助 use 方法将 store 安装到应用实例上，实现数据全局提供。
2.访问Vuex数据：在组件内访问Vuex数据有多种方式。可以使用 this.$store.state.数据名 （Vue2）或 useStore().state.数据名 （Vue3，需先引入 useStore ）来获取状态数据。还能通过计算属性来封装对Vuex数据的访问，使代码更简洁、易维护，比如在组件中定义计算属性 computed: { count() { return this.$store.state.count } } （Vue2），在模板中直接使用 { { count }} 。
七、核心概念--mutations的基本使用
1.mutations定义：在Vuex的 store 实例中， mutations 以对象形式定义。每个mutation是一个函数，第一个参数是 state ，代表当前Vuex的状态对象。例如：
jsconst store = new Vuex.Store({state: {count: 0},mutations: {increment(state) {state.count++;}}
});2.触发mutations：组件中通过 this.$store.commit('mutation名称') （Vue2）或 useStore().commit('mutation名称') （Vue3）来触发mutation。如在组件方法中：
jsmethods: {addCount() {this.$store.commit('increment');}
}3. mutations特性：mutations必须是同步函数，这样Vuex才能准确追踪状态变化，便于调试和记录状态历史。如果需要进行异步操作，应在actions中处理，再通过actions提交mutations间接修改状态。
把、辅助函数--mapMutations
1.引入与使用：在组件中使用 mapMutations 时，首先要从 vuex 中引入它。在Vue2和Vue3中基本用法类似，都需在计算属性或方法前引入。例如：
javascriptimport { mapMutations } from 'vuex';
export default {methods: {// 将组件方法与mutations映射...mapMutations(['mutationName1', 'mutationName2'])}
}; 2.功能实现：使用 mapMutations 后，组件内可直接调用映射的 mutation 函数，无需再使用 this.$store.commit （Vue2）或 useStore().commit （Vue3）这种冗长写法。如定义了 increment 的 mutation ，映射后在组件方法中直接写 this.increment() 即可触发相应的状态变更。
3.对象展开语法： mapMutations 使用对象展开语法 ... 将多个 mutation 函数映射到组件方法中，让代码结构更清晰。若要传递额外参数给 mutation ，直接在调用映射函数时添加参数， mutation 函数中第一个参数仍是 state ，后续参数按顺序接收。
九、核心概念--actions和getters
（一）Actions
1.定义与作用：Actions用于处理异步操作，不能直接修改状态，而是通过提交mutations间接修改。在Vuex的 store 中以函数形式定义，第一个参数是包含 commit 等方法的上下文对象。比如在获取用户信息接口调用时，可先在 actions 里定义异步请求，成功后提交 mutation 修改用户信息状态。
2.触发方式：组件中通过 this.$store.dispatch('action名称') （Vue2）或 useStore().dispatch('action名称') （Vue3）触发， dispatch 会调用对应的 action 函数
（二）Getters
1.定义与作用：Getters类似计算属性，对 state 进行加工处理后返回新数据。在 store 中以函数形式定义，第一个参数是 state ，还可接收其他 getter 作为第二个参数。如在管理商品列表状态时，可通过 getter 根据商品价格筛选出特定价格区间的商品列表。
2.使用方式：组件中通过 this.$store.getters. getter名称 （Vue2）或 useStore().getters.getter名称 （Vue3）获取加工后的数据，方便在模板或方法中使用。
十、vuex--分模块
（一）模块创建
1.核心概念：状态（state）是存储在Vuex中的数据，比如用户登录状态、购物车商品列表；变异（mutation）用于修改状态，必须是同步操作，保证状态变化可追踪；动作（action）可以包含异步操作，通过提交mutation间接修改状态；模块（module）能将Vuex的状态管理拆分成多个部分，每个模块有自己的state、mutation、action，方便管理复杂应用的状态。
2.分模块的必要性：随着项目功能增多，所有状态集中在一个Vuex仓库中会导致代码臃肿，难以维护。分模块能将不同功能模块的状态、mutations、actions等分开管理，每个模块负责特定功能相关的数据处理，让代码结构更清晰。
3.模块创建步骤：在 store 目录下新建模块文件，如 user.js 、 cart.js 。以 user.js 为例，在文件中定义模块对象，包含 state 、 mutations 、 actions 和 getters 等属性。例如：
s// user.js
const state = {userInfo: null
};const mutations = {SET_USER_INFO(state, info) {state.userInfo = info;}
};const actions = {async fetchUserInfo({ commit }) {// 模拟异步请求获取用户信息const response = await fetch('/api/userInfo');const data = await response.json();commit('SET_USER_INFO', data);}
};export default {namespaced: true,state,mutations,actions
};在 store/index.js 中引入并注册模块，如：
jsimport Vue from 'vue';
import Vuex from 'vuex';
import user from './user';Vue.use(Vuex);export default new Vuex.Store({modules: {user}
});namespaced 属性：设置 namespaced: true ，可使模块具有命名空间，避免不同模块间的命名冲突。在组件中访问模块内的状态、mutations、actions时，需带上模块名作为前缀，增强代码的可读性和维护性。
（二）访问模块中的state&mutations等
访问模块中的state：在组件内访问带命名空间模块的 state ，Vue2中使用 this.$store.state.模块名.状态名 ，例如有 user 模块和 userInfo 状态，访问时写 this.$store.state.user.userInfo ；Vue3里先引入 useStore ，再用 useStore().state.模块名.状态名 。也可以借助计算属性简化访问，定义计算属性 userInfo() { return this.$store.state.user.userInfo } （Vue2） ，模板中直接用 { { userInfo }} 。
访问模块中的mutations：调用带命名空间模块的 mutations ，在Vue2组件方法中通过 this.$store.commit('模块名/ mutation名', 参数) 触发，像 this.$store.commit('user/SET_USER_INFO', { name: 'John' }) 。Vue3则用 useStore().commit('模块名/ mutation名', 参数) 。使用 mapMutations 辅助函数时，需传入完整命名空间路径，如 ...mapMutations(['user/SET_USER_INFO']) 。
访问模块中的actions和getters：触发带命名空间模块的 actions ，Vue2用 this.$store.dispatch('模块名/ action名', 参数) ，Vue3用 useStore().dispatch('模块名/ action名', 参数) 。访问 getters ，Vue2是 this.$store.getters['模块名/ getter名'] ，Vue3是 useStore().getters['模块名/ getter名'] ， mapGetters 辅助函数使用类似 mapMutations ，都要带上命名空间。
十一、购物车案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>购物车案例</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><style>[v-cloak] {display: none;}table {border: 1px solid #e9e9e9;border-collapse: collapse;border-spacing: 0;empty-cells: show;}th, td {padding: 8px 16px;border: 1px solid #e9e9e9;text-align: left;}th {background-color: #f7f7f7;color: #5c6b77;font-weight: 600;white-space: nowrap;}</style></head>
<body>
<div id="app" v-cloak><table><tr><th>序列号</th><th>商品名称</th><th>商品单价</th><th>购买数量</th><th>操作</th></tr><tr v-for="(item, index) in list"><td>{{ index + 1 }}</td><td>{{ item.name }}</td><td>{{ item.price }}</td><td><button @click="reduce(index)" :disable="item.count === 1">-</button>{{ item.count }}<button @click="add(index)">+</button></td><td><button @click="del(index)">移除</button></td></tr></table><p>总价：￥{{ total }}</p>
</div>
<script>var app = new Vue({el: '#app',data: {list: [{id: 1,name: 'Iphone xs',price: 10000,count: 1},{id: 2,name: 'Ipad Pro',price: 6666,count: 1},{id: 3,name: 'MacBook Pro',price: 25000,count: 1},]},methods: {reduce: function (index) {if(this.list[index].count === 1) return;this.list[index].count--;},add: function (index) {this.list[index].count++;},del: function (index) {this.list.splice(index, 1);}},computed: {total: function () {var total = 0;for(var i = 0; i < this.list.length; i++) {total += this.list[i].price * this.list[i].count;}return total.toString().replace(/\B(?=(\d{3})+$)/g, ',');}}});
</script>
</body>
</html>十二、创建项目--基于VueCli自定义创建项目
前提条件：确保已安装Node.js和Vue CLI。若未安装Vue CLI，可通过 npm install -g @vue/cli 进行全局安装。
创建项目：在命令行中执行 vue create 项目名称 ，例如 vue create custom - vue - project 。随后进入交互界面，可选择手动选择特性，进行自定义配置。
自定义配置：可勾选Babel、TypeScript、Router、Vuex、CSS相关预处理器等功能。选择Router时，可选择是否使用history模式；对于CSS预处理器，有Sass、Less等多种选项。还能选择配置文件的存放方式，如单独文件或内联到 package.json 。完成选择后，Vue CLI会根据配置生成项目基础结构，包含项目所需的文件和目录，开发者可基于此进行后续开发 。
十三、vant组件库的按需导入导出
1.按需导入导出的意义：Vant组件库包含众多组件，如果全部导入，会增加项目打包后的体积，影响加载性能。按需导入仅引入项目实际使用的组件，能提升项目运行效率。
2.安装Vant：在项目根目录下运行 npm install vant 或 yarn add vant ，完成Vant组件库的安装。
3.Vue2项目中按需导入导出：借助 babel - plugin - component 插件实现，先安装 npm install babel - plugin - component - D 。在 .babelrc 文件（若没有则新建）中添加配置：
json{"plugins": [["component",{"libraryName": "vant","style": true}]]
} 之后在组件中就可按需导入，如 import { Button } from 'vant'; ，再通过 components: { Button } 注册后使用。
4.Vue3项目中按需导入导出：使用 unplugin - vue - components 和 unplugin - vite - style - imports 插件。先安装 npm install unplugin - vue - components unplugin - vite - style - imports - D 。在 vite.config.js 中进行配置，配置完成后，在组件里直接使用 import { Button } from 'vant'; 即可，无需额外注册 。
十四、postcss插件--实现vw适配
1.vw适配原理：vw（Viewport Width）是视口宽度的相对单位，1vw等于视口宽度的1%。利用vw进行布局，元素尺寸能根据视口宽度动态调整，实现响应式设计，适配不同屏幕尺寸的设备。
2.PostCSS插件选择：使用 postcss - px - to - vw 插件将CSS中的px单位转换为vw单位。先通过 npm install postcss - px - to - vw --save - dev 安装插件。
3.配置PostCSS：在项目根目录找到 postcss.config.js 文件（若不存在则新建），进行如下配置：
jsmodule.exports = {plugins: {'postcss - px - to - vw': {unitToConvert: 'px', // 要转换的单位viewportWidth: 375, // 设计稿的视口宽度，根据实际设计稿宽度调整unitPrecision: 5, // 转换后的vw单位的小数精度propList: ['*'], // 允许转换的CSS属性列表，'*'表示全部属性viewportUnit: 'vw', // 转换后的目标单位fontViewportUnit: 'vw', // 字体使用的视口单位selectorBlackList: [], // 不进行转换的选择器黑名单minPixelValue: 1, // 小于该值的px不进行转换mediaQuery: false, // 是否在媒体查询中转换pxreplace: true, // 是否直接替换原px值，而不是添加转换后的vw值exclude: undefined, // 忽略转换的文件或目录landscape: false // 是否支持横屏}}
};配置完成后，在CSS文件中书写px单位，打包时PostCSS会自动将其转换为vw单位，实现网页的vw适配效果。
