基于Vue-cli和webpack搭建开发环境

1.安装vue开发环境

node,vue-cli

2.项目初始化

vue init webpack ProjectName

根据提示设置你的项目信息

cd ProjectName

代码	说明	是否必须（建议）
npm install vue-router --save	路由管理,详情参考vue router	是
npm install vuex --save	全局状态管理，详情参考vue store	否
npm install axios --save	基于Promise的HTTP客户端，用于浏览器和node.js	否
npm install qs --save	结合axios使用，序列化字符串	否
npm install sass-loader node-sass --save-dev	引入scss/less	否
npm install js-base64 --save	文本转换成base64	否
npm install MD5 --save	加密	否
npm install vue-svg-icon --dev-save	加载svg图标	否
npm install wdxx-ui --save	自定义UI	否

3.自定义配置

更改端口

src: ProjectName/config/index.js

更改内容

port:8080

host:'localhost'   ->     host:'0.0.0.0'    解决IP地址问失败的问题

更改包名

src: ProjectName/config/index.js

更改内容

index: path.resolve(__dirname, '../dist/index.html')     更改打包文件路径，方便确认文件位置

assetsRoot: path.resolve(__dirname, '../dist')       同上

assetsPublicPath: '/'    ->     assetsPublicPath: './'     变绝对路径为相对路径，解决项目未放在主页时资源加载出错

src:ProjectName/build/util.js

更改内容：

   if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

4.自定义eslint规则

ProjectName/.eslintrc.js

函数检验规则

命令：space-before-function-paren

说明：此规则旨在在函数括号之前强制执行一致的间距，因此，只要空格不符合指定的偏好，就会发出警告。

用法：

"space-before-function-paren": ["error", {
    "anonymous": "always",
    "named": "always",
    "asyncArrow": "never"
}]

always（默认）需要一个空格，然后(是参数。

never在(参数后面不允许任何空格。

anonymous是用于匿名函数表达式（例如function () {}）。

named是用于命名函数表达式（例如function foo () {}）。

asyncArrow是用于异步箭头函数表达式（例如async () => {}）