Vue移动端项目--黑马头条

初始化项目

1、使用 Vue CLI 创建项目。

npm install --global @vue/cli  // 全局安装脚手架

2、创建vue项目，并配置项目。

vue create toutiao-m   // 创建项目

3、加入 Git 版本管理。

1. 远程创建仓库。
2. 本地创建仓库，git init 放在暂存区 git add . 提交到本地仓库git commit -m '描述'
3. 与远程关联 git remote add origin [email protected]:mao-mao-sun/heima-zuoye.git
4. 本地创建分支，提交到远程。 git push -u origin "master"
5. 以后每次提交。git add .       git commit -m ""     git push
    

4、删除初始化的默认文件、新增调整我们需要的目录结构。

5、创建目录：

• src/api 目录

  • 存储接口封装

• src/utils 目录

  • 存储一些工具模块

• src/styles 目录

  • 创建index.less 文件，存储全局样式

  • 在 main.js 中加载全局样式

6、导入图标

把线上的图标生成在线链接，配置到src/styles/icon.less中。引入后，测试是否可以使用。

7、引入vant组件库。

1. 安装vant：npm i [email protected]
2. 在 main.js 中加载注册 Vant 组件：

   import Vant from 'vant'
   import 'vant/lib/index.css'
   
   Vue.use(Vant)

3. 查阅文档使用组件

8、移动端 REM 适配

• lib-flexible用于设置 rem 基准值

• 安装

# yarn add amfe-flexible
npm i amfe-flexible

• postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem

• 安装

# yarn add [email protected] -D
npm install [email protected]  -D

• 在项目根目录中创建 .postcssrc.js 或 postcss.config.js 文件

module.exports = {
  plugins: {
    // postcss-pxtorem 插件的版本需要 >= 5.0.0
    'postcss-pxtorem': {
      rootValue({ file }) {  // 如果是vant的就按照375 尺寸， 如果是其他的就是按照750
        return file.indexOf('vant') !== -1 ? 37.5 : 75;   // rootValue 的值一般是 设计稿  1/10
      },
      propList: ['*'],
    },
  },
};

• 配置完成，记得重启服务器

9、封装axios请求模块

安装 axios：npm i axios

创建 src/utils/request.js：

import axios from "axios"

// 创建一个axios实例对象
const request = axios.create({
   baseURL: "http://toutiao-app.itheima.net", // 基础路径
})

// 暴露出去
export default request