vue 环境的配置

vue的项目的环境的配置，对我们有用到的依赖以及配置的总结，方便以后使用：

如果配置了cnpm,把下面的npm换成cnpm会节约你好多时间。如果没有配置，那就这样配置一下：

npm install -g cnpm --registry=https://registry.npm.taobao.org

具体的可以看这个 http://npm.taobao.org/

1、安装sass的依赖包

npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass

在vue文件中引用

<style lang="scss" scoped>

      @import './home.scss';

</style> 

2、安装less的依赖包

npm install less less-loader --save

在vue文件中引用

<style lang="less" scoped>

    @import './home.less';

</style>

 

3.如果是移动端我们可以安装lib-flexible  弹性盒布局

具体的可以参考  https://www.npmjs.com/package/flexibility

 

  1. 安装lib-flexible

    npm i lib-flexible --save

2. 在项目入口文件main.js中引入lib-flexible

    import 'lib-flexible/flexible.js'

3.在项目根目录的index.html 头部加入手机端适配的meta的代码，
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这个可以不加，flexible.js中有判断如果没有自己会自动添加，如果你加了可能会报一个这样的警告



4.安装px2rem-loader 

npm install px2rem-loader
在实际的开发中，使用flexible插件时 会自动把px转换成rem单位，这样我们在开发的时候直接就用px,px2rem-loader 直接帮我们转成rem

5.配置px2rem-loader

在vue-cli生成的webpack 配置中，vue-loader 的options和其他样式文件loader 最终都是由build/untils.js里的一个方法生成的。

我们只需要在cssLoader后面加上一个px2remLoader即可，px2rem-loader的remUnit 选项意思是1rem=多少像素，结合lib-flexible，我们将px2remLoader的option.remUnit 设置成设计稿宽度的1/10，

这里我们假设设计稿的宽度为750px ,并将px2remLoader 放进loaders数组中

 var px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75 
    }
  }
  // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    var loaders = [cssLoader,px2remLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }