vue-cli3 + vant + postcss-px2rem-exclude 实现移动端页面

公司让做两个移动端页面，挺简单，但是以前没有做过，一切都是摸索着来。以此纪念并记录第一次完整移动端开发。

选型

首先决定用vue，UI 框架开始的时候用的 mint-ui，后面感觉不好看，又调研了下，用了有赞的 vant。

搭建项目

用 vue-cli3 搭建。

vue-cli3 安装

如果以前安装了 vue-cli2，先把它全局卸载了。（要用 vue-cli3，如果以前安装了 vue-cli x 都需要卸载再安装 vue-cli3）

npm uninstall vue-cli -g

vue-cli3 需要 nodejs≥ 8.9 (官方推荐 8.11.0+
查看 node 版本号：

node -v

如果 nodejs 版本号过低，windows 下需要重新下载 node 安装包安装。
安装 @vue/cli (vue-cli3 的包名由 vue-cli 改为了 @vue/cli):

npm install -g @vue/cli //我在 git bash 下输入安装命令，久久没有反应，后面在 cmd 下输入命令才安装成功。

查看 vue-cli 版本：

vue -V

vue-cli3 创建项目

vue create  //文件名 不支持驼峰（含大写字母）

输入创建命令后，紧接着是各种配置选择：手动配置，根据你需要用方向键选择（按 “空格键”选择/取消选择，A键全选/取消全选）对应功能。

安装完成

npm run serve // 启动项目

至此，项目已搭建完成。

开发依赖配置

选定 UI 框架是 vant，静态文件用 less，移动端 rem 适配用 postcss-px2rem-exclude， 分别安装依赖：

npm i vant -S
npm i less-loader -D
npm i postcss-px2rem-exclude -S

刚开始 rem 适配用的 px2rem ，但是会把 UI 组件里面的 px 也一起转了（UI 组件做了适配处理，不用转）。找到了 postcss-px2rem-exclude。安装了 px2rem 的话，需要卸载再装 postcss-px2rem-exclude。

 npm install postcss-px2rem-exclude -S

配置 postcss-px2rem-exclude

在项目根目录 （src）下，新建 postcss.config.js 文件：

module.exports = {
   "plugins": {
       "autoprefixer": {},
       "postcss-px2rem-exclude":{
           "remUnit": 75, // 根大小 750px  = 750/75 = 10 rem
           "exclude":/node_modules/i //忽略 node_modules 目录下的所有文件
       }
   }
}

动态生成根元素大小， 在 main.js 里面加入

  window.onresize = setHtmlFontSize
  function setHtmlFontSize () {
    const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
    const htmlDom = document.getElementsByTagName('html')[0]
    htmlDom.style.fontSize = htmlWidth / 10 + 'px'
  }
  setHtmlFontSize()

其他配置(跨域配置等)

vue-cli3 创建的项目中，内置了 webpack 相关配置，所以没有了 webpack 配置文件，需要修改 webpack 配置的时候，在根目录下新建 vue.config.js。以下是我的配置：

module.exports = {
    publicPath: 'xxx', // 根路径
    devServer: {
        disableHostCheck: true, // 项目中没有用到 socket，@vue/cli3 报 socket 连接错误，关闭 host 检查。  
        overlay:{ // 禁用 eslint 检查
            warnings: false,
            errors: false
        },
        proxy: { // 代理
            '/api': {
                target: 'http://www.example.com/xx', // 代理的目标地址 也可是 http://www.example.com
                changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
                ws: false, // 是否开启 socket
                pathRewrite: {  //  重定向
                  '^/api': ' ' // 这种接口配置出来 /api/login ==> http://www.example/xx/login
                  // '^/api': '/api' 这种接口配置出来 /api/login ==> http://www.example/xx/api/login
                  // 我的理解是使用时候 api 代表的地址 = target +  '^/api' 对应的 value 
                }
            }
        },
    },
    lintOnSave: false
}

main.js 相关

axios 配置，安装 axios

npm i axios -S

main.js 中引入 axios 并设置拦截器，将其挂载到 vue 实例上。

import axios from 'axios'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
// 拦截器设置
axios.interceptors.request.use((config) => {
    if(store.getters.getToken){ // 统一在 header 中加入 token 参数
        config.headers[tokenKey] = getToken();
    }
    return config
},(error) =>{
    return Promise.reject(error)
})

axios.interceptors.response.use((res) => {
    return res.data // 返回数据
},(error) =>{
    return Promise.reject(error)
})

// 挂载实例
Vue.prototype.$http = axios

main.js 中引入 vant, mixin, router

// vant
import Vant from 'vant'
import 'vant/lib/index.css';

import mixin from '@/mixins/common'
import router from './router'
Vue.use(Vant)
Vue.mixin(mixin)
router.beforeEach((to, from, next) => { // 动态配置每个页面title
    if(to.meta.title){
        document.title = to.meta.title
    }
    next();
})
new Vue({
    router,
    render: h => h(App),
}).$mount('#app')

开始开发

配置好后的目录结构：

3.png

页面放在 views 中，assets 放静态文件， utils 里面是一些工具类。vue-cli3 中只有一个 store.js 文件。
安装 vuex :

npm i vuex -S

store.js :

import Vue from 'vue'
import Vuex from 'vuex'
import { getToken } from './utils/auth'

Vue.use(Vuex)

export default new Vuex.Store({
    state: { // 相当于存储的变量声明， 类似 vue 文件中的 data，外部文件使用 state 中的变量 store.state.xxx
        token: getToken(),
    },
    mutations: { // 修改变量，外部通过 mutations 改变值 commit('setToken', 'xxx')
        setToken(state, token){
            state.token = token
        }
    },
    actions: {

    },
    getters: { // 取值 外部访问 store.getters.getToken
        getToken(state){
            return state.token;
        }
    }
})

然后哼唧哼唧写页面，配路由。
.......当当当当，开发完毕，大功告成。