vue-cli

个人简介

👨‍💻‍个人主页： 魔术师
📖学习方向： 主攻前端方向，正逐渐往全栈发展
🚴个人状态： 研发工程师，现效力于政务服务网事业
🇨🇳人生格言： “心有多大，舞台就有多大。”
📚推荐学习： 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js实战 🍒Three.js 🍇鸿蒙开发
🪧使用备注：仅供学习交流 严禁用于商业用途 ，若发现侵权内容请及时联系作者
📤更新进度：持续更新内容
🤙个人名片：每篇文章最下方都有加入方式，旨在交流学习&资源分享，快加入进来吧

vue-cli目录

8. vue-cli

8.1 单页面应用程序

• 单页面应用程序（英文名：Single Page Application）简称 SPA，顾名思义，指的是一个 Web 网站中只有唯一的一个 HTML 页面，所有的功能与交互都在这唯一的一个页面内完成。

8.2 什么是 vue-cli

vue-cli 是 Vue.js 开发的标准工具。它简化了程序员基于 webpack 创建工程化的 Vue 项目的过程。引用自 vue-cli 官网上的一句话：程序员可以专注在撰写应用上，而不必花好几天去纠结 webpack 配置的问题。中文官网

8.3 安装和使用

• vue-cli 是 npm 上的一个全局包，使用 npm install 命令，即可方便的把它安装到自己的电脑上：npm install -g @vue/cli

• 基于 vue-cli 快速生成工程化的 Vue 项目：vue create 项目的名称

8.4 vue 项目的运行流程

• 在工程化的项目中，vue 要做的事情很单纯：通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。
• 其中：
  • App.vue 用来编写待渲染的模板结构
  • index.html 中需要预留一个 el 区域
  • main.js 把 App.vue 渲染到了 index.html 所预留的区域中

8.5 Vue 组件库

1. vue-cli 手动选择要安装的功能

• 目标：在使用 vue-cli 创建项目的时候，能够手动选择要安装的功能
• 回顾之前使用 vue-cli 创建项目的步骤：
  1. 运行 vue create 项目名称
  2. 选择 Default（[vue 2] babel, eslint）

• 存在的问题：

  1. 只包含特定的 3 个功能（vue2 + babel + eslint）
  2. 不包含 vue-router、vuex 等其它功能

• 推荐的方式：选择 Manually select features

• 好处：在项目创建期间，能够选择并安装更多的功能

  

• 手动选择要安装的功能（1/10）

  1. 运行 vue create 项目名称
  2. 选择 Manually select features

• 手动选择要安装的功能（2/10）

  • 推荐选择并安装以下的 6 个功能：

  

  1. ↑↓箭头切换选中项
  2. 空格切换选中状态
  3. *号表示安装选中的功能

• 手动选择要安装的功能（3/10）

  • 选择要安装的 vue 版本（建议选择 2.x）：

  

• 手动选择要安装的功能（4/10）

  • 是否使用 history 模式的路由（建议输入 n）：

  

• 手动选择要安装的功能（5/10）

  • 选择要使用的 CSS 预处理器（建议选择 Less）：

  

• 手动选择要安装的功能（6/10）

  • 选择要使用的 ESLint 语法规则（建议选择 ESLint + Standard config）：

  

• 手动选择要安装的功能（7/10）

  • 选择额外的 lint 功能（建议选择 Lint on save，在 Ctrl + S 的时候检测代码是否符合规范）：

  

• 手动选择要安装的功能（8/10）

  • 把第三方插件的配置选项放到哪个配置文件中（建议选择 In dedicated config files，表示：独立的配置文件）：

  

• 手动选择要安装的功能（9/10）

  • 是否把刚才所有的操作保存为预设，方便下次直接基于预设，一键生成项目（建议输入 y）：

  

• 手动选择要安装的功能（10/10）

  • 为预设提供一个好记的名字（建议输入英文的预设名称）：

  

2. ESLint 基本语法

目标：能够知道 ESLint 常见的语法规则，并在实际开发中遵守这些规则

2.1 什么是 ESLint？

• 官方概念：ESLint 是可组装的 JavaScript 和 JSX 检查工具。
• 通俗理解：一个工具，用来约束团队成员的代码风格。
• 好处：保证团队协作开发时，编写出来的代码风格保持一致。
• 例如：
  1. JS 中的字符串，统一使用单引号表示
  2. 代码缩进，统一使用两个空格
  3. 不允许出现 ≥2 个的连续空行

2.2 常见的 ESLint 规则

• 更多的 ESLint 规则，请查阅官方文档 https://eslint.bootcss.com/docs/rules/

2.3 修改 vue-cli 项目的语法规则

1. 找到项目根目录下的 .eslintrc.js 配置文件
2. 在 rules 配置选项中，修改默认的语法规则