vue搭建项目记录总结

1.全局安装脚手架工具
  npm install -g vue-cli
2.初始化项目
  vue init webpack my-project
  1.Project Name: 项目名称
  2.Project Description: 项目描述
  3.Author: 作者
  4.Vue build: 打包方式，回车即可 runtime ,standalone
  5.Install vue-router: 是否安装vue-router; 推介安装y，一般项目基本都会用得到
  6.Use ESLint to lint your code: 是否使用ESLint来进行代码检测; 如果自己项目要求不是那么的苛刻，就不用装了，直接n
  7.Pick an ESLink preset : standard
  8.Set up unit tests ==> 是否安装 单元测试工具 目前不需要 所以 n 回车；
  9.Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前不需要 所以 n 回车；
3.切换到项目根目录中
 cd my-project
4.安装依赖包
 npm install
5. 一键运行项目
 npm run dev
6.项目初始化后安装常用的包
   1. 安装axios请求接口用    npm install axios --save-dev

   2.  安装npm install style-loader --save-dev  
           npm install css-loader --save-dev
     安装less npm install less less-loader --save
     注意： 之前安装完less一直不能用报错，是因为less-loader版本太高了，换成5.0.0版本再安装一次就可   
      用法： 1. 在main.js中 引入 import less from 'less'  Vue.use(less)
            2. 在build的 webpack.base.conf.js中添加  （可忽略）
              {
                  test: /\.less$/,
                  loader: "style-loader!css-loader!less-loader",
              }
            3. 配置全局less  
                安装 npm install sass-resources-loader --save-dev
                在build文件夹下utils.js中  cssLoaders的return 中less替换如下
                less: generateLoaders('less').concat({
                  loader: 'sass-resources-loader',
                  options: {
                    resources: path.resolve(__dirname, '../src/assets/css/global.less') //less全局目录
                  }
                }),
   3.安装babel-polyfill 把ES6语法转换成IE浏览器能读取的ES5语法，通常用来兼容IE浏览器，防止出现白屏现象（pc端）
   npm install --save-dev babel-polyfill
   安装好后可以直接在main.js文件中引入    import 'babel-polyfill'
   最好呢在webpack.base.config.js文件中修改
   entry: {app: ['babel-polyfill', './src/main.js']}
   如果还不可以得话，安装babel-preset-es2015 npm install --save-dev babel-preset-es2015
   在.babelrc  presets下添加["es2015", {
      "modules": false,
      "useBuiltIns": "entry"
    }]
   如果有报错，查看报错得插件，在webpack.base.conf.js 加入报错得插件{
        loader: 'babel-loader',
        include: [resolve('src'),resolve('node_modules/_ly-tab@2.1.2@ly-tab')]
      },
7. 打包后页面空白和图片加载不出来

     1. 修改config 下的index.js   assetsPublicPath: './'
     2. 修改 build 中utils.js  
          return ExtractTextPlugin.extract({
            publicPath: '../../',
            use: loaders,
            fallback: 'vue-style-loader'
          })