基于vue-cli基础上，完善搭建项目

1 vue-cli 脚手架生成vue项目

npm install -g vue-cli

-g 是全局安装，如果当前用户不是管理员，会报没有权限的错。

可以不加-g，或者su root切换成管理员身份。

vue init webpack [projectName]

2 安装pug

官网推荐使用预处理器来构建简洁和功能更丰富的组件，比如pug。

npm install pug 

webpack.base.conf.js写入：

{
    test: /\.pug$/,
    loader: 'pug-html-loader',
    options: vueLoaderConfig
}, 

页面：

//代码缩进表示dom的层级关系，减少一半的dom代码量，pug还有很多其他用法，看官网吧。
<template lang="pug">
    .chairOnline-page //不写标签为div
        span 哇哦
</template>

3 sass 安装

npm install --save-dev node-sass sass-loader

webpack.base.config.js 写入：

{
    test: /\.scss$/,
    loaders: ["style", "css", "sass"]
  },

4 axios使用

npm install axios --save

见过很多api的写法，感觉好麻烦！写一个接口要加好几个地方，不如写成插件调用比较方便？！

axios-plugin 文件：

import axios from 'axios';

const AxiosInstance = axios.create({
    baseURL: 'http://127.0.0.1:3000/'
});

AxiosInstance.interceptors.request.use(
    (config) => {
        return config;
    },
    error => Promise.reject(error),
);

AxiosInstance.interceptors.response.use((response) => {
    // 简单示例 不做过多的处理 
    const { data } = response;
    return data;
}, error => Promise.reject(error));


const AxiosPlugin = {
    install(_Vue) {
        _Vue.mixin({
            created() {
                const self = this;
                self.request = AxiosInstance;
            }
        });
    },
}
export default AxiosPlugin;

main.js:

import AxiosPlugin from './axios-plugin';
Vue.use(AxiosPlugin);

调用：

this.request.get(`api/sendCode/${phone}`)
        .then(
            res=>{
                console.log(res.message);
            },err=>{
                alert('网络错误 ');
            })
        .then(_=>{
            this.pending = false;
        });
        <!--可以换成async await-->

5 移动端rem适配

设置根元素大小，移动端按键延迟300ms。

 //指定根元素与当前设备宽度一致。哦不对，是除以10。
 <script type="text/javascript">
  !function () { 
    function e() { clearTimeout(i), i = setTimeout(t, 300) } 
    function t() { 
      n.rem = o.getBoundingClientRect().width / 10,
      o.style.fontSize = n.rem + "px" 
    }
    var i, n = window, o = document.documentElement, d = "addEventListener"; t(), o.setAttribute("data-dpr", n.devicePixelRatio), n[d]("resize", e), n[d]("pageshow", function (t) { t.persisted && e() }) }();
</script>

_function.scss:

// 这里的尺寸是iphone6的，375px宽，根据不同设计稿设置不同值。
$n : 37.5;

@function rem($px){
    @return ($px/$n) * 1rem;
}

页面调用：

line-height: rem(44);

6 全局引入_function.scss

每个页面想要使用rem，都要引入是不是很烦？！

npm install sass-resources-loader -D

build文件夹上的untils修改：

// const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
const loaders = [
  cssLoader,
  'sass-loader',
  {
      loader: 'sass-resources-loader',
      options: {
          resources: [
              path.resolve(__dirname, '../src/assets/sass/_function.scss')
          ]
      }
  }
];

嗯，这样就好了，放心在页面使用rem函数吧。 此时要重启！

7 路由懒加载

npm install --save-dev @babel/plugin-syntax-dynamic-import

webpack.base.conf.js 写入:
{
    test: /\.js$/,
    loader: 'babel-loader',
    include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')],
    //加入这个
    options: {
      presets: ['babel-preset-env', 'babel-preset-stage-2']
    }
},

这样路由文件里面才可以使用import懒加载的！

8 全局引入reset.css

app.vue：

    @import "~@/assets/reset"; //~@是webpack设置的路径别名

9 全局引入toast等ui组件

也可以像axios一样，写成插件！

mint-plugin.js: import { Indicator, Toast } from 'mint-ui'

const mintPlugin = {
install(_Vue) {
    _Vue.mixin({
        created() {
            const self = this;
            self.toast = Toast;
            self.indicator = Indicator;
        }
    });
},
}
export default mintPlugin;

main.js:

import mintPlugin from './untils/mint-plugin';
Vue.use(mintPlugin);

页面使用：

this.toast(err.message || '网络错误')

10 解决跨域问题

npm install webpack-dev-server --save-dev

config 里 index.js：

proxyTable: {
  '/api': {
    target: 'http://121.196.195.117:6010/',
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''
    }
  }
},

axios:

const AxiosInstance = axios.create({
    baseURL: '/api',
});

请求路径里面的'/api' 就会被 'http://121.196.195.117:6010/'代替！