黑马头条移动端项目准备工作

步骤

1. 创建项目

vue creat hmtt-fir

1.1 创建完毕

cd hmtt-fir     进入项目目录
npm run serve   启动项目

2. gitee代码托管

新建与本地项目同名的仓库

2.1 连接并首次推送

> 添加远端仓库地址到本地仓库
git remote add origin https://gitee.com/你的用户名/项目名.git

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

2.2 后续代码变动

> 正常本地提交
git add .
git commit -m '说明'
> 推到远程仓库
git push

3. 调整项目目录结构

3.1 删除

1. 删除App.vue中的内容
2. 删除src/router/index.js中的路由配置

3.2 新增

在src目录下

1. 新增api文件夹 : 储存请求函数模块
2. 新增style文件夹 : 样式文件
3. 新增utils文件夹 : 工具函数模块

4. 引入Vant组件

4.1 安装vant

npm i vant   // 生产依赖

4.2 完整引入

在 src/main.js 中

import Vant from 'vant' 组件库
import 'vant/lib/index.css' 样式
Vue.use(Vant) 引入

5. 自定义规则

在.eslintrc.js文件的module.exports.rules对象中下加入

'no-multiple-empty-lines': 'off' // 允许有连续多行空行

6. 用REM解决多屏适配

6.1 下载安装包

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

> 作用: 根据设置屏幕的宽度去调整rem的值（html标签上font-size的大小）
> 它的默认计算方式是屏幕宽度的1/10，默认值是37.5
npm i amfe-flexible

6.2 设置postcss

根目录下创建 postcss.config.js 文件:

  plugins: {
    'postcss-pxtorem': {  
      // 例如一个元素宽是75px，则换成rem之后就是2rem。
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

6.3 引入flexible

在 src/main.js 中导入amfe-flexible

import 'amfe-flexible'

7. 封装axios

7.1 安装axios

npm i axios

7.2 二次封装

创建 src/utils/request.js ,并写入:

import axios from 'axios'
// 创建axios实例,配置
1. 基地址(可有多个)
const request = axios.create({
    // 注: baseURL不能写错
    baseURL: 'http://toutiao-app.itheima.net'
})
2. 导出
export default request

8.axios-封装业务请求模块

8.1 目的

1. 语义化
2. 方便代码复用
3. 方便修改url地址

8.2 步骤

创建 api/channel.js 并写入

import request from '@/utils/request.js'
export const getChannels = () => {
    return request({
        url: 'v1_0/user/channels'
    })
}

8.3 使用

在需要的页面中加载调用

1. 导入封装的api
import { getChannels } from '@/api/channel.js'
2. 调用