一个新项目的开始。（看看，刚入门）

1.创建脚手架

cmd命令： vue create 项目名称

选择自建版本。

2.把项目加入远程仓库

第一步：

在gitee中新建哟个仓库

第二步：

添加远端仓库地址

git remote add origin 你的远程仓库地址

---

推送至远程仓库

git push -u origin master

如果之后项目代码有了变动需要提交：

git add
git commit -m
git push

3.调整项目结构目录（初始化目录）

删除：

1.app.vue中的个别结构——css样式


2.router文件下的index.js

路由配置和引入的home文件

3.views文件加清空

4.删除vue初始的图片和hello world文件。

添加：

1.scr目录下添加文件夹api

api：存储接口的请求模块

2.scr目录下添加文件夹utils

utils存储工具类的

3.scr目录下添加文件夹style

style全局样式文件，字体图标文件

4.导入字体图标文件

1.在iconfont中新建项目，把所有的字体图标上传至项目内。

2.在项目中赋值字体图标代码到style中

3.在项目文件夹的style中创建icon.less粘贴代码

4.在index.less中引入icon.less

@import './icon.less';

5.引入vant组件库

安装

yarn add vant@2.12.47
//因为是vue2，所以使用vant2版本

在 main.js 中加载注册 Vant 组件——在vant中都有提示

//这是全局引入，如需要按需引入自己看文档
import Vant from 'vant'
import 'vant/lib/index.css'
​
Vue.use(Vant)

6.移动REM适配

在vant文档中也有提示

安装

//用于设置 rem 基准值
yarn add amfe-flexible
//是一款 postcss 插件，用于将单位转化为 rem
yarn add postcss-pxtorem -D

创建

在根目录下创建postcss.config.js cv大法

//视口宽度375
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
    },
  },
};

 //根据自己需求进行更改
 //因为vant组件是基于375进行封装的，当设计图是750时，我们可以这样进行更改。
 module.exports = {
    plugins: {
        'postcss-pxtorem': {
            rootValue: function ({ file }) {
                return file.indexOf("vant") !== -1 ? 37.5 : 75
            },
            // rootValue: 75,
            propList: ['*'],
        },
    },
};

封装请求模块

下载

yarn add axios

创建

在src目录下创建的utils文件夹下新建request.js

封装

//封装
import axios from "axios"

const request = axios.create({
  baseURL: "请求的基础路径" // 
})
//暴露出去
export default request