创建一个vue2.x项目

以下以命令为步骤

1.vue init webpack

    你要确定你所需的环境都配置了，例如node，vue-cli（2.x版本），npm，然后配置一些选项，就可以自动创建一个vue项目了

2.此时项目的框架大体上搭建好了，其实已经可以开始做项目了，但是为了更好的做项目，我们需要配置一些自己喜欢的插件

    2.1使用px2rem-loader插件

        npm i lib-flexible -S

        npm i px2rem-loader -D

import 'lib-flexible'

        需要在main.js中引用 ‘lib-flexible’

        此时我们还是不能使用rem布局，我们需要在如下图的文件中替换掉相应的文件

需要替换的代码是：

const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75
    }
  }

替换后的文件

此时，我们已经可以在项目中使用rem布局了。

    2.2安装scss或者less，这里我安装scss

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

        其实这样安装了就可以使用了，不需要其他配置，

        这样虽然可以使用scss，但是全局的变量是无法共享的，意思就是说，你在一个main.scss中定义的scss变量在其他vue组件中是无法直接引用的，当然可以每个文件去引用一下这个main.scss，但是不推荐这么做，太麻烦了，于是，再安装一个依赖

        npm install sass-resources-loader --save-dev

        并且需要修改build/utils.js中的配置

        

把这个改为

代码是

scss: generateLoaders('sass').concat(
      {
        loader: 'sass-resources-loader',
        options: {
          resources: path.resolve(__dirname, '../src/assets/css/scssmain.scss')
        }
      }
    ),

这个大概的意思就是把这个scssmain.scss文件加载到全局，能在每个vue文件中使用。