vue-cli使用笔记

1. 安装nodejs
2. 安装vue-cli
   npm install -g vue-cli
3. 使用vue-cli初始化项目
   vue init webpack my-project
   
4. 进到目录
   cd my-project
5. 安装依赖
   npm install
6. 添加sass
   npm install node-sass --save-dev
   npm install sass-loader --save-dev
   打开build文件夹下webpack.base.config.js在rules里面加上
   {
       test: /\.scss$/,
       loaders: ["style", "css", "sass"]
   },
   在用scss的地方写上

   <style lang="scss" scoped="" type="text/css"></style>

   

7. 全局引入sass配置文件，不必单个组件引入，安装依赖模块
   npm install sass-resources-loader --save-dev

   
   在项目build目录的utils.js添加如下代码：

     // =========
     // SASS 配置
     // =========
      function resolveResouce(name) {
         return path.resolve(__dirname, '../src/common/scss/' + name);
     }
     function generateSassResourceLoader() {
         var loaders = [
           cssLoader,
           // 'postcss-loader',
           'sass-loader',
           {
               loader: 'sass-resources-loader',
               options: {
                 // it need a absolute path，全局sass文件名称，目录位置存放在resolveResouce函数中
                 resources: [resolveResouce('var.scss'), resolveResouce('mixins.scss')]
               }
           }
         ];
         if (options.extract) {
           return ExtractTextPlugin.extract({
             use: loaders,
             fallback: 'vue-style-loader'
           })
         } else {
           return ['vue-style-loader'].concat(loaders)
         }
     }
     // =========
     // SASS 配置 end
     // =========

   修改utils.js配置
   

8. 开始运行
   npm run dev
9. 设置代理
   找到config文件夹中的index.js,在proxyTable字段中添加如下内容，详细配置参考https://github.com/chimurai/http-proxy-middleware
   
10. eslint相关配置
    添加static文件夹下js文件检查，build文件夹中webpack.base.conf.js文件修改如下：
    , resolve('static')
    
    默认eslint会强制不要分号，而js书写规范更好的是强制分号，根目录.eslintrc.js修改如下：
    , 'semi': ['error', 'always']
    
11. 打包相关
    运行命令：npm run build

    打包时处理文件为相对路径
    　　方法1：找到config文件夹中的index.js,打开修改assetsPublicPath为“./”
    　　方法2：build文件夹中webpack.prod.conf.js 中output添加参数publicPath:'./'

    设置config文件夹index.js中productionSourceMap的值为false，也就是设置webpack配置中devtool为false，打包后文件体积可以减少百分之八十！！！！！！！

    如何实现打包文件中js、css等的版本控制？
    设置build文件夹下的webpack.prod.conf.js中HtmlWebpackPlugin插件配置参数添加hash: true，即会使打包生成的index.html中的js和css路径带有？+随机字符串