vue-cli小知识

 1.用npm装包时

        -D表示是开发环境所依赖的东西，配置在package.json中的devDependencies下，生产环境不需要这些东西，比如一些编译打包工具。

        -S表示生产环境仍然需要这些东西，配置在package.json中的dependencies下，比如项目所依赖的框架，JQ，VUE，vue-router等。

2. 在vue-cli中使用sass

          1.安装对应的模块

                npm install node-sass --D

                npm install sass-loader --D

            2.打开webpack.base.config.js在loaders里面加上

            {

           test: /\.scss$/,

           loaders: ["style", "css", "sass","scss"]

         }，

                3.在用到sass的style标签内写上 lang=scss。

3.引入公共的sass变量基础

            1.添加依赖

            npm install sass-loader node-sass --save

            npm install sass-resources-loader --save

            2.修改build/utils.js下的return中的scss

            scss: generateLoaders('sass').concat(

      {

        loader: 'sass-resources-loader',

        options: {

          resources: path.resolve(__dirname, '你要引入的公共sass路径')

        }

      }

    )

4.px转换rem

1、安装postcss-px2rem

　　　　npm install postcss-px2rem --save

2、配置px2rem

　　在配置文件build目录下vue-loader.conf.js中增加

module.exports = {

loaders: utils.cssLoaders({

sourceMap: isProduction

? config.build.productionSourceMap

: config.dev.cssSourceMap,

extract: isProduction

}),

postcss: [

        require('postcss-px2rem')({'remUnit':75})  //75转换比值

    ]

}，

3.引入淘宝自适应JS

npm i lib-flexible --save

在main.js中import。

5.Vue调试工具安装

vue调试工具vue-devtools的安装