1.初始化项目

1.1 创建并梳理项目的结构

1.1.1.运行如下的命令，基于 vue-cli 创建 Vue2 的工程化项目：

vue create toutiao

1.1.2.进入终端之后进行如下操作:

 Manually select features 手动选择要安装的功能

 1.1.3.项目初始化完毕通过yarn serve启动项目,然后对项目进行删除整理

        需要删除以下文件:

        1. 清空 App.vue 组件中的代码 

// App.vue

<template>
  <div>
    <h1>App 根组件</h1>
  </div>
</template>

<script>
export default {
  // 一定要为创建的组件,通过name属性,起一个名字
  // 名字的首字母要大写
  name: 'App',
}
</script>
// 因为我们已经安装了less,所以我们想启用less就应该在<style>标签里即可调用
<style lang='less' scoped>
</style>

        2.删除 components 目录下的 HelloWorld.vue 组件

        3. 删除assets里面的图片

        4.删除 views 目录下的 About.vue 和 Home.vue 组件

        5.清空 /src/router/index.js 路由模块    

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

// 清空默认的路由规则
const routes = []

const router = new VueRouter({
  routes
})

export default router

        6.执行 yarn serve 命令，把项目运行起来看效果

1.2 配置vant组件库

       官方网址: Vant 3 - Mobile UI Components built on Vue

 1.2.1.打开Vant组件库,在快速上手那里找到命令进行安装配置

        现在vant版本升级了,所以要注意版本,我们需要引入2.12.9版本

yarn add vant@^2.12.9 -S

1.2.2.然后继续往下翻,找到方式三. 导入所有组件,在main.js里面进行配置

import Vue from 'vue'

// 导入Vant 组件库
import Vant from 'vant'
// 导入Vant 组件库的样式
import 'vant/lib/index.css'

// 把Vant安装为 vue的插件
Vue.use(Vant)

 当然在全局注册之后,也就是把vant所有不管用没用到的组件全在本地引入了,这样降低了效率,再后期我们会进行优化

1.2.3.这个时候我们就完全配置好了,然后在Vant里面找到Button按钮,引入到App.vue里面,在界面进行尝试,成功之后,我们再需要vant里面的任何东西就直接复制过来用就行了

<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

1.3Vant组件库的rem布局适配

参考文档: Vant 3 - Mobile UI Components built on Vue

知识点: rem的原理是什么?

在html的那个根节点设置一个字体大小(font-size值),在不同的设备上对字体大小进行缩放即可.

1.3.1.首先要配置postcss-pxtorem

postcss-pxtorem的意思是将px转成rem值

yarn add postcss-pxtorem@5.1.1 -D

1.3.2.在vue 项目根目录下，创建 postcss 的配置文件 postcss.config.js，并初始化如下的配置

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      // postcss-pxtorem这个插件要用这个配置
      rootValue: 37.5, // 根节点的 font-size 值
      propList: ['*']  // 要处理的属性列表，* 代表所有属性 (所有css只要是是px单位都给它换成rem,不论是width,height,padding还是margin...)
    }
  }
}

知识点:关于px -> rem 的换算:

iphone6

375px = 10rem
37.5px = 1rem
1px = 1/37.5rem
12px = 12/37.5rem = 0.32rem

1.3.3.配置amfe-flexible

amfe-flexible的意思就是监听屏幕的缩放,根据屏幕的缩放自动去修改font-size值

yarn add amfe-flexible -S

1.3.4.在 main.js 入口文件中导入 amfe-flexible：

// 配置 amfe-flexible
import 'amfe-flexible'

注意点:配置完成之后,一定要记得重启服务,还有就是如果重启之后发现还是适配不了,那么就要注意移动设备是否改成了Responsive

1.4 配置axios

1.4.1. 安装

yarn add axios -S

 1.4.2.创建/src/utils/request.js 模块：

import axios from 'axios'

const instance = axios.create({
  // 配置请求的根路径
  baseURL: 'http://toutiao-app.itheima.net'
})
 // 共享
export default instance

1.5格式化代码工具

1.5.1安装插件

1.5.2 添加 .prettierrc 的配置文件：(是在根目录下添加),然后进行配置

// 配置文件代码:
{
  // 代码后面的那个分号,加不加的问题,如果不想加就直接是false
  "semi": false,   
  // 格式化代码的时候把双引号替换成单引号
  "singleQuote": true,  
  // 就在在声明对象的时候,最后一个属性和值后面自动帮我们去掉逗号
  "trailingComma": "none" 
}

补充: prettierrc 是一个插件,是一个代码格式化的一个工具,在VSCode里面搜索即可,就可以实现代码格式化

1.5.3.格式化代码快捷键

• On Windows 　　Shift + Alt + F
• On Mac 　　Shift + Option + F
• On Ubuntu　　 Ctrl + Shift + I

1.5.4.如果发现格式化代码工具安装配置之后不起作用

可以鼠标右键->格式化文档的方式->选择 Prettier-Code formatter

1.5.5.需要重新安装 Prettier - Code formatter 的情况

在按下格式化代码快捷键的时候,如果出现了下面的弹框警告，则需要卸载，并重新安装 Prettier - Code formatter 插件：

 重新安装完毕之后，会有下面的弹框，选择 Allow Everywhere 按钮即可：

1.6  EsLint语法规范

1.6.1 常见的eslint报错信息

1. 每个文件的末尾，必须有一个空行，如果没有，会报 Newline required at end of file but not found eol-last

2. 在对象中，属性: 值 的冒号后面，有且只能有一个空格，如果没有，会报 Missing space before value for key 'xxx' key-spacing

3. JS 中的字符串，必须使用单引号表示，不能使用双引号，会报 Strings must use singlequote quotes

4. 如果在对象中，最后多了一个逗号，会报 Unexpected trailing comma comma-dangle

5. 在文件中，不允许出现连续多个空行，会报 More than 1 blank line not allowed no-multiple-empty-lines

6. 在每一行代码的末尾，不要有多余的空格，会报 Trailing spaces not allowed no-trailing-spaces

7. 代码缩进的时候，只允许使用两个空格，否则，会报 Expected indentation of 2 spaces but found 4 indent

8. 注释的 // 和具体注释内容之间，必须、也只能有一个空格，否则，会报 Expected space or tab after '//' in comment spaced-comment

9. 每个文件中，所有的 import 必须放到顶部统一进行导入，不要在普通代码区域穿插 import 导入，否则，会报 Import in body of module; reorder to top import/first

1.6.2.需要禁用或卸载的插件  (和eslint有冲突)

插件名是 JS-CSS-HTML Formatter，在每次摁下 Ctrl + S 的时候，把代码格式变得不标准了。

1.6.3.缩进几个空格的问题

文件 -> 首选项 -> 设置 页面中，搜索 tab，找到 Tab Size，把它的值改为 2

1.6.4. 解决格式化代码工具和eslint冲突

在prettierrc格式化代码工具和eslint起冲突的时候,我们可以尽情的让eslint报错,在下图中红色框中就是eslint的一条规范

只需要配置eslint规范就可以了,然后配置完重启服务,这时候eslint就会对这个规范禁用

在 .eslintrc.js 配置文件中，添加如下的规则：

rules: {
  // ESLint 对代码进行格式校验的时候,忽略这一条规则,这条校验规则不生效 (0 表示禁用这个规则)  在修改完这条配置之后一定要记得重新启动一下服务 yarn serve
  'space-before-function-paren': 0
}