前言：本章文章主要讲了如何自定义创建项目，ESlint代码规范，状态管理工具vuex概述
【从零开始学Vue | 第七章】Vue核心技术
-
- 一：自定义创建项目
- 二：ESlint代码规范
- 三：vuex概述
一：自定义创建项目
基于VueCli自定义创建项目架子:
1.安装脚手架 Vue CLI
2.创建项目
3.选择自定义 Manually select features
选择创建vue2还是vue3项目
切换路由模式：选择 Y（Yes）：启用 history 模式（HTML5 History 模式）；选择 n（No）：使用默认的 hash 模式
选择用哪种工具来写更强大、更方便的 CSS 代码： Sass/SCSS (with dart-sass)：最流行的预处理器，语法和 CSS很像，功能强大，社区生态最好，Vue 官方也推荐。 Less：另一个流行的预处理器，语法也比较直观，在很多老项目中比较常见。 Stylus：语法更简洁，去掉了大括号和分号，但相对小众一些。
代码检查与格式化工具（linter/formatter）的配置方案： 1.ESLint with error prevention only 只启用 ESLint 最基础的错误检查功能，用于发现语法错误和潜在 bug，不强制代码风格。 适合：对代码风格没有严格要求，只想避免低级错误的项目。 2.ESLint + Airbnb config 采用 Airbnb 公司的 ESLint 配置，这是业界最知名、最严格的一套代码规范。 规则非常细致，能保证代码质量和一致性，但学习成本较高，初期可能会有很多报错。 适合：追求极致代码质量、团队协作规范的中大型项目。 3.ESLint + Standard config 采用 StandardJS 规范，它是一套 “零配置” 的代码风格标准，规则相对宽松，强调一致性和可读性。 适合：希望快速统一风格，又不想被过多规则束缚的项目。 4.ESLint + Prettier 结合了 ESLint（代码质量检查）和 Prettier（代码格式化工具）。 ESLint 负责发现并修复代码质量问题，Prettier 负责自动格式化代码（如缩进、引号、换行），两者互补，是目前最推荐的组合。 适合：绝大多数现代前端项目，能兼顾代码质量和美观。
在创建 Vue 项目时，让你选择额外的代码检查（lint）功能选项： Lint on save意思是：在你保存文件时，自动运行代码检查，及时发现并提示代码规范问题。 Lint and fix on commit 意思是：在你执行git commit提交代码时，自动运行代码检查，并尝试自动修复可修复的问题；如果还有无法修复的错误，会阻止本次提交，确保提交到仓库的代码都是符合规范的。
选择Babel、ESLint 等工具的配置文件存放位置： In dedicated config files（推荐） 把Babel、ESLint 等工具的配置，分别存放在独立的专用文件中，例如：.eslintrc.js、.babelrc、.prettierrc等。 优点：配置清晰、易于维护，支持复杂配置，也方便编辑器识别。 适合：绝大多数项目，尤其是中大型项目。 In package.json把所有配置都集中写在项目根目录的 package.json 文件里的 babel、eslintConfig 等字段中。 优点：项目根目录文件少，看起来更整洁。 缺点：配置复杂时可读性差，部分工具不支持或体验不佳。 适合：简单的小型项目或快速原型开发。
选择 y（Yes）： 系统会把你这次的配置（如路由模式、CSS 预处理器、ESLint 规则等）保存为一个命名的预设。下次创建新项目时，可以直接选择这个预设，不用再一步步重新选择，节省时间。 选择 N（No)： 这次的配置只应用于当前项目，不会保存为预设。 下次创建新项目时，需要重新进行所有选择。
二：ESlint代码规范
代码规范：一套写代码的约定规则，例如"赋值符号的左右是否需要空格" “一句结束是否是要加;”… JavaScript Standard Style 规范说明 https://standardjs.com/rules-zhcn.html
如果你的代码不符合standard的要求，ESlint就会提醒你 比如：在main.js中随意做一些改动，添加一些分号，空行
两种解决方案：
1.手动修改：根据错误提示来一项一项手动修改纠正，如果你不认识命令行中的语法报错意思是什么，根据错误代码去ESLint规则表查找其具体含义。
2.自动修正 基于vscode插件ESLint高亮错误，并通过配置 自动帮助我们修复错误。 1.安装ESLint插件 2.在设置文件中配置
//当保存时，eslint会自动修复一些问题
"editor.codeActionsOnSave": {
"source.fixAll": "explicit"
},
//当保存时，prettier会自动格式化代码
"editor.formatOnSave": false,
这样当我们保存我们代码时，vscode会自动帮我们修改代码不规范问题。
三：vuex概述
vuex是一个vue的状态管理工具，状态就是数据，即可以帮助我们管理vue通用的数据（多组件共享的数据）。 场景：某个状态在很多个组件来使用（个人信息）；多个组件共同维护一份数据（购物车）。 优势：1.共同维护一组数据，数据集中化管理 2.响应式变化 3.操作简洁（vuex提供了一些辅助函数）。
可以在自定义创建项目中勾选vuex，也可以手动添加，下面将讲解如何手动添加 1.安装vuex(Vue2对应版本3，Vue3对应版本4)
yarn add vuex@3
2.新建store/index.js，专门存放vuex
3.在store/index.js里创建仓库
// 这里面存放的就是 vuex 相关的核心代码
import Vue from 'vue'
import Vuex from 'vuex'
// 插件安装
Vue.use(Vuex)
// 创建仓库
const store = new Vuex.Store()
// 导出给main.js使用
export default store
4.main.js挂载
new Vue({
render: h => h(App),
store
}).$mount('#app')
如果我的内容对你有帮助，请点赞，评论，收藏，创作不易。大家的支持就是我坚持下去的动力！
