Vue学习杂记（七）—— vue-cli的使用以及eslint风格

引言：前端的发展速度还是比较迅猛的，vue-cli使用前端框架，其设计目的thinkPHP框架一样，为了方便我们进行项目开发，更加专注于代码逻辑，而不用去过多考虑兼容性问题。

一、什么是vue-cli框架

    简单来说，是一个基于Vue.js和webpack的前端快速开发框架，对于前端开发者来说，了解vue-cli还是有必要的。一般别人习惯把这个vue-cli叫做脚手架，这里我直接成为框架，感觉贴切一些。

二、如何使用vue-cli

2.1vue-cli配置新项目

    对于一个框架，要想快速了解它，当然是动手使用了。框架的目的也是如此，就是为了方便我们使用的。也就是说，我们没必要反其道而行之，反过来深究其原理，只需要掌握其关键设计思路并熟练使用就行。
    使用方法如下：
（1）首先利用npm安装vue-cli框架（这里推荐使用全局安装，省得每次换个位置建立新项目都需要重新安装）：

npm i -g @vue-cli
//-g参数表示的是全局安转

（2）创建一个初始化好的vue-cli项目：

vue create vue-cli-demo

注意：这里的项目名称不要使用中文，同时项目名称不支持大写字母；
（3）下面对于vue-cli创建项目过程中遇到的安装配置参数进行一一说明：

说明：第一行说明当前使用的vue-cli框架的版本，第二行英文提示选择vue版本，这里default说明会默认安装的内容（babel之前提到过，是一个webpack插件，用来兼容像修饰器等比较新的前端语法）。第三行是自定义安装
选择：为了更加充分的说明安装的配置参数，选择自定义方式

说明：这里先说明一下操作，空格选中，再次空格取消选择，方向键可以调当前指示的配置项。默认选中的分别对应刚说的babel和eslint风格。eslint 语法比较严格，这里先不装，之后再介绍。emm…其他的PWA支持和router、vuex没了解，先不装了，CSS预编译器可能在之后的less或者sass中被用到。后两个是软件测试工具（单元测试和E2E测试，也不转）。
选择：Babel和CSS Pre-processors

说明：vue版本选择
选择：2.x(vue3还不是很了解)

说明：预编译器选择
选择：这里选择less吧

说明：配置项说明，第一行表示存放到各自独立的文件中，第二行表示配置到package.json中（更加常用）
选择：package.json

说明：保存初始化配置，保存时会提示你创建保存时的名称，如果添加名称则下次创建项目时会展示配置选择“套餐”，如果不设置名称直接回车即为只使用一次；如果选择N,如果选择y否则你的项目中将只有一个package.json和依赖文件。
选择：y+enter(不设置为新的快捷配置“套餐”)

2.2vue-cli目录结构说明

安装之后的目录，和之前手动配置webpack的结构目录非常相似，只是多了一个assets用于防止静态资源文件，components用来放置自定义组件（如今的前端已经是组件化时代了）。
对文件目录做以下说明：

import Vue from 'vue'//引入vue模块
import App from './App.vue'//引入根组件app.vue
Vue.config.productionTip = true//是否展示生产模式下的提示信息
new Vue({
  render: h => h(App),
}).$mount('#app')
//等价为如下代码,表示的是将根组件app.vue的代码渲染，到public/idnex.html 的
里面
new Vue({
    el:'#app',
    render:h => h(App)
})

说明：这里的productionTip指的是是否展示下面这个tip：

这里英文提示意思是：你当前使用的是开发模式，如果要转为生产模式请求该webpack中的mode参数为production。（其实没有什么用处）

2.3 vue-cli 运行项目

（1）生产模式下运行，安装完成效果如下（提示项目运行方式）：

（2）生产模式下运行，嘿嘿，尴尬：

这里并没有设置网络路径，使用的是相对路径。这里报错是由于生产模式下生成的dist文件夹默认是要部署到服务器上跑的，只支持使用http模式，如果想要使用文件相对路径的file模式，可以使用如下方法（不推荐）：
（1）创建vue.config.js文件，用于修改生产模式下的配置；
（2）在其中写入如下代码：

module.exports={
	publicPath:'./'
	//或者publicPath:''
}

说明：至于其他的生产模式配置，可以通过vue-cli官网或者查阅实际需求查阅。

三、eslint代码风格

3.1 eslint安装

    这是一种比较严格的代码风格，能够方便团队成员查看同事的代码，更方便团队成员呢的协调开发，使用方法如下：
刚才我们并没有引入eslint配置项，这里重新构建一个项目，如下图所示，添加 Linter/formatter配置项

添加配置项之后，会遇到一个eslint风格的选择项：

市面上存在四种不同的给予eslint的代码风格，一般常用的是standard config。
之后还会遇到一个lint执行时机选择，第一中表示的是保存时进行eslint规范检测和格式化（推荐），第二种是在代码提交时进行。

注意！！！这里要使用分开存放配置文件（因为之后我们需要对eslint风格进行测试，只有到了对了eslint 表熟悉才使用package.json模式，否则，你将看不到对应的配置eslint的配置文件，其配置信息将会出现在package.json里面，不便于自定义）。

3.2 eslint相关环境优化

    在VScode中添加prettier和prettier-Code formatter插件方便我们快速优化代码风格为eslint风格（eslint代码风格要求比较严格）。然后在setting.json文件中增加如下配置，表示在代码保存时启用代码风格维护：

 "editor.codeActionOnSave": {
    "source.fixAll": true
  },

安装完成时候你会发现：

直接给出了报错提示，还是挺方便的，简单说一下，这里eslint标准版语句后面不加分号，并且字符串使用单引号。对于学习阶段，这种环境配置还是挺好的，方便我们快速学会eslint常见的注意项。

3.2eslint规范举例

（1）对于控制台的态度:eslint在生产环境下要求不能使用console，执行时遇到了console便会报错。这其实可以理解，因为console本质是开发时输出调试信息。
process.env.NODE.ENV 获取当前的打包模式，warn提示警告，off表示不生效

'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off'

（2）生产环境禁止使用断点：

'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'

（3）禁止出现没必要的空行；
（4）禁止出现没必要的空格；
（5）template中不能没有填充内容；
（6）对象中最后一个元素结尾不能添加“,”；
（7）定义变量时需要有必要的空格，如果定义的变量没有别使用过则会直接报错。
整体上来说，相对于我们写的代码随意空格或者省去必要空格，随意打印数据等来说确实严格了不少。对于非常见报错可以放到eslint官网里面搜索一下。