Vue2项目 - 项目起步的一些操作

1.技术介绍

• vuejs： 核心vue

• vuex： 状态管理插件

• vue-router： 路由插件

• axios： ajax请求

• json-bigint： 最大安全数值处理

• socket.io-client： 即时通讯库

• vant： 移动组件库

• amfe-flexible： rem适配

• vue-lazyload： 图片懒加载

• 打包App：DCLOUD 打包

2.用vue-cli创建项目

①  创建项目

PS D:\天津黑马\新建文件夹\作业\10-vuex> vue create hmtt-02

②  选择自定义方式创建项目

③  手动选择特性

④  版本

⑤  路由是否使用history

⑥  css预处理器

⑦  代码风格

⑧  检查节点：保存时检查，提交时检查

⑨  存储插件配置位置

⑩  是否要保存前面的设置作为预设方案 - y  N  皆可

创建完毕后

进入项目：cd hmtt-02

启动项目：npm run serve

3.gitee代码托管 - 将本地代码推送到远程仓库

3.1 创建远程仓库 - 建立与本地项目同名的空仓库

3.2 首次连接并推送

// 添加远端仓库地址到本地仓库
git remote add origin https://gitee.com/ddd153/hmtt-02.git

// 推送到远程仓库
git push -u origin master

3.3代码变动提交

// 本地提交
git add .
git commit -m ""

//推送到远程仓库
git push

4.引vant组件库

4.1 安装

npm i vant

4.2 引入

①  完整引入

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

Vue.use(Vant) // 引入

②  按需引入

import { Tabbar, TabbarItem, NavBar } from 'vant'

const cps = [Tabbar, TabbarItem, NavBar]  //声明一个数据，存储使用的vant组件对象
cps.forEach(cp => Vue.use(cp))   //循环注册组件

4.3 使用

在 XXX.vue 测试使用

<van-button type="danger">危险按钮</van-button>

5.ESlint

5.1 概念

ESlint是一个代码检查工具，用来检查你的代码是否符合指定的规范。

规范

1.行业推荐的规范：例如   JavaScript Standard Style  

https://github.com/standard/standard/blob/master/docs/RULES-zhcn.md

http://www.verydoc.net/eslint/00003312.html

2.自定义的规范

5.2 ESlint 错误修正

5.2.1 手动修正

5.2.2 命令修正 - npm run lint

5.2.3 自定义规则

在项目根目录中，有一个 eslintrc.js 文件，是对 eslint 进行配置的，其中 rules 属性是专门用来设置自定义代码规则的。

rules是一个对象，以键值对的格式来约定规则：

• 键名是规则名（可在报错信息和eslint官网查看）

• 值是这条规则的具体说明， 最常见的有off,warn,error。

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    // 这里可以进行自定义规则配置
    // key：规则代号
    // value：具体的限定方式
    //   "off" or 0 - 关闭规则
    //   "warn" or 1 - 将规则视为一个警告（不会影响退出码）,只警告，不会退出程序
    //   "error" or 2 - 将规则视为一个错误 (退出码为1)，报错并退出程序
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'

    // 举例 - 关闭多行空格
     'no-multiple-empty-lines': 'off' // 不允许有连续多行空行(关闭规则)
  }
}

5.2.4 插件修正

①  安装eslint插件

②  eslint自动格式化修正代码

6.REM适配

6.1 安装包

npm i postcss-pxtorem@5.1.1 -D
// -D 开发依赖
// 作用：把px单位自动转你换成rem单位

npm i amfe-flexble
// 修改rem基准值的js插件  打包后需要使用
// 作用：根据屏幕的宽度调整rem的基准值（html上的font-size的大小）

6.2 设置postcss

根目录下创建postcss.config.js文件并设置

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      // 能够把所有元素的px单位转成Rem
      // rootValue: 转换px的基准值。
      // 例如一个元素宽是75px，则换成rem之后就是2rem。
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

配置完后重启项目（npm run serve），检查是否把px单位自动换成rem单位 

6.3 引入flexble （入口文件引入）

import 'amfe-flexible'

7.axios

7.1 封装axios请求

1 安装

npm i axios

2 封装

创建src/utils/request.js

import axios from 'axios'

// 创建axios实例，配置
// 1.基地址
const request = axios.create({
// 注意 baseURL是关键字，不能写错
baseURL: 'http://toutiao-app.itheima.net'
})

// 导出
export default request

7.2 复习 async-await

如果try中的代码发生错误，就回到catch中

async hTestAxios2 () {
  try {
    const res = await request({
      method: 'GET',
      url: 'v1_0/user/channels'
    })
    console.log('请求回来的数据', res)
  } catch (err) {
    console.log('本次请求的错误是', err)
  }
}

7.3 封装业务请求模块

try {
  await ajax({
  	method: 'GET',
  	url: '/v1_0/user/channels'
	})
}

// 原因：现有代码不友好
// 1. 不够语义化
// 2. 不方便复用
// 3. 不方便统一修改url地址

 步骤

①  建立api/channel.js

import request from '../untils/request'

export const getChannels = () => {
  // 如果 函数没有写 return，则他有一个默认的return值，就是undefiend
  return request({
    url: 'v1_0/user/channels'
  })
}

②  使用

// 1.导入封装的api
import { getChannels } from './api/channel'

//2.调用
async testAJAX () {
      try {
        const res = await getChannels()
        console.log('请求回来的数据', res)
      } catch (err) {
        console.log('本次请求的错误是', err)
      }
    }

之后所有涉及请求的接口：

1.先在 src/api/channel 模块中定义

2.再从模块中导出，并调用