vue-cli框架搭建,vant官方推荐rem适配方案

一、vue框架搭建（2.0+）

1、npm install --global vue-cli // 安装vue-cli
2、vue init webpack myapp // 创建我的项目myapp项目名称
3、选择自己需要的配置，一路回车即可，选择Y安装，n不安装
? Project name myapp 
? Project description A Vue.js project 
? Author sunluyi <934353403@qq.com> 
? Vue build (Use arrow keys) 
? Vue build standalone 
? Install vue-router? Yes //是否安装路由 ：Y
? Use ESLint to lint your code? No //是否需要ESLint ：n
? Set up unit tests No //是否需要单元测试 ：n
? Setup e2e tests with Nightwatch? No //e2e测试 ：n
? Should we run `npm install` for you after the project has been created? (recommended) npm //npm安装

4、安装过程大概需要三分钟，成功后提示：Project initialization finished!
5、cd myapp //进入项目目录
6、npm run dev //启动项目

二、插件安装

1、如果需要vant-ui ： npm i vant -S
//main.js添加配置引入全部组件
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);

2、自动按需引入组件 (推荐) ： npm i babel-plugin-import -D
修改.babelrc文件（修改后需要重新npm run dev）
{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": [
      "transform-vue-jsx", 
      "transform-runtime",
      ["import", {
        "libraryName": "vant",
        "libraryDirectory": "es",
        "style": true
      }]
    ]
}
//main.js按需引入
import {
    Button,//按钮组件
} from 'vant';
Vue.use(Button);
3、如果需要axios : npm install axios(如何引入配置axios请参考我的另一篇文章axios封装)
4、如果需要vuex :  npm install vuex --save
src目录下 新建store/store.js
//store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({
    state: {
    },

    mutations: {
    },

    getters: {
    },
})
//main.js引入
import {store} from './store/store'
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})
5、如果需要使用less ： npm i less less-loader -S
6、移动端rem适配 ： 
使用vant官方推荐适配方案 ：
npm i lib-flexible
npm i postcss-pxtorem
//main.js引入
import  'lib-flexible';
//修改.postcssrc.js（修改后需要重新npm run dev）
// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
    plugins: {
        'autoprefixer': {
            browsers: ['Android >= 4.0', 'iOS >= 7']
        },
        'postcss-pxtorem': {
            rootValue: 37.5,
            propList: ['*']
        }
    }
}
//配置不生效需要重新npm run dev
vant官方rem适配方案，如果你的设计稿是750px，那么宽度100% == 375px
样式中可直接定义
div{
	width:375px; // 等同于width:100%
}

如果你需要在less文件中定义全局变量，请参考我的另一篇文章sass-resources-loader 全局注册 Sass/Less 变量