CLI4搭建项目

Vue CLI4

1-安装脚手架vue-cli4

• @vue/cli

2-新建Vue项目

• vue create project_name

• 默认选择使用了Vuex和Vue-Router，对于业务项目来说，这两个插件是必备的。

3.1-抽出单独routes代码

• src/router/index.js
  
  
• src/router/routes.js
  

3.2-store

项目刚开始时，Vuex配置保持不变，等到项目状态管理复杂之后，在考虑进行模块的分割。

• src/store/index.js
  

3.3-eslint

• rc: run-command

• .eslintrc.js
  
  

• 增
  

3.4-封装axios

• src/http(api/services)/service.js

import axios from 'axios';

const baseURL = process.env.API_URL;
const service = axios.create({
   
    baseURL: baseURL || 'https://www.baidu.com',
    // 请求超时时间(ms)
    timeout: 5000
});
/* 请求拦截器 */
service.interceptors.request.use(
    config => {
   
        // 在发送请求之前做些什么
        return config;
    },
    error => {
   
        // 对请求错误做些什么
        return Promise.reject(error);
    }
);
/* 响应拦截器 */
service.interceptors.response.use(
    response => {
   
        // 对响应数据做些什么
        return response;
    },
    error => {
   
        // 对响应错误做些什么
        return Promise.reject(error);
    }
);

export default {
   
    /* 封装POST方法 */
    post(url, data = {
   }) {
   
        // 请求发出前可以进行一些处理
        return service.post(url, data).then(res => {
   
            // 对请求返回值进行一些处理
            return res;
        }, err => {
   
            return Promise.reject(err);
        });
    },
    /* 封装GET方法 */
    get(url, params) {
   
        // 请求发出前做一些处理
        return service({
   
            method: 'get',
            url: url,
            params
        }).then(
            res => {
   
                return res;
            },
            err => {
   
                return Promise.reject(err);
            }
        );
    }
};

• main.js添加api
  1引入
  
  2加到vue原型
  

3.5-设置路由全局导航守卫

• src/router/index.js
  
• scrollBehavior

3.6-引入reset.css文件

• src/styles/reset.css

html,
body,
div,
span,
button,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
em,
img,
strong,
b,
u,
i,
dl,
dt,
dd,
ol,
ul,
li,
form,
label,
table,
tbody,
thead,
tr,
th,
td {
   
    margin: 0;
    padding: 0;
    border: 0;
}

html,
body {
   
    height: 100%;
}

ol,
ul {
   
    list-style: none;
}

img {
   
    border: 0;
    vertical-align: middle;
}

.clearfix:after {
   
    clear: both;
    content: '';
    display: block;
}

.clearfix .left {
   
    float: left;
}

.clearfix .right {
   
    float: right;
}

.clearfix .over {
   
    overflow: hidden;
    display: block;
    height: 100%;
}

.flex {