初始化项目
1、使用 Vue CLI 创建项目。
npm install --global @vue/cli // 全局安装脚手架
2、创建vue项目，并配置项目。
vue create toutiao-m // 创建项目
3、加入 Git 版本管理。
远程创建仓库。
本地创建仓库，git init 放在暂存区 git add . 提交到本地仓库git commit -m '描述'
与远程关联 git remote add origin git@gitee.com:mao-mao-sun/heima-zuoye.git
本地创建分支，提交到远程。 git push -u origin "master"
以后每次提交。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组件库。
安装vant：npm i vant@2.12.15
在 main.js 中加载注册Vant 组件：
import Vant from 'vant'
import 'vant/lib/index.css'
Vue.use(Vant)
查阅文档使用组件8、移动端 REM 适配
lib-flexible用于设置 rem 基准值
安装
# yarn add amfe-flexible
npm i amfe-flexible
postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
安装
# yarn add postcss-pxtorem@5.1.1 -D
npm install postcss-pxtorem@5.1.1 -D
在项目根目录中创建 .postcssrc.js 或 postcss.config.js 文件module.exports= {
plugins: {
// postcss-pxtorem 插件的版本需要 >= 5.0.0'postcss-pxtorem': {
rootValue({ file }) { // 如果是vant的就按照375 尺寸， 如果是其他的就是按照750returnfile.indexOf('vant') !== -1? 37.5: 75; // rootValue 的值一般是 设计稿 1/10},
propList: ['*'],
},
},
};
配置完成，记得重启服务器
9、封装axios请求模块
安装 axios：npm i axios
创建 src/utils/request.js：
