[前端开发][常规配置]使用vue-cli创建项目

一、安装脚手架（已有则跳过）

npm install -g @vue/cli

如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，需要先通过npm uninstall vue-cli -g卸载旧版

二、基于vue的模板创建项目（询问配置后自动运行npm install安装相关依赖包）

vue init webpack Vue-Project

1、其中 webpack 是模板名称，可以到 vue.js 的 GitHub 上查看更多的模板https://github.com/vuejs-templates
2、Vue-Project 是自定义的项目名称，命令执行之后，会在当前目录生成一个以该名称命名的项目文件夹
3、询问完项目配置后回自动执行npm install

初始化过程
安装完毕

三、测试运行

cd Vue-project   
npm run dev     //在开发环境运行

运行
效果

四、配置ESLint(可选)
1、添加ESLint规则：项目根目录打开.eslintrc.js修改，更多配置见https://cn.eslint.org/docs/user-guide/configuring

rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'semi': ['error', 'always'],
    'indent': 'off',
    'vue/script-indent': ['error', 2, {
      'baseIndent': 1
    }],
    'space-before-function-paren': ['error', {
      'anonymous': 'always',
      'named': 'never',
      'asyncArrow': 'always'
    }]
  }

2、ESLint修复代码：
a、传参，运行npm run lint -- --fix
b、修改配置，打开根目录的package.json，在stript中的lint添加 --fix选项

"lint": "eslint --fix --ext .js,.vue src",

运行npm run lint即可触发

五、项目配置优化
打开config/index.js
1、修改dev环境的启动地址（dev属性）：

host: 'localhost',   //可修改为局域网地址，让其他局域网设备打开
port: 8080,          // 端口
autoOpenBrowser: true,   //默认false，修改成true自动在浏览器打开

2、修改build环境的打包输出路径（build属性）：

index: path.resolve(__dirname, '../dist/index.html'),    //入口html文件的输出路径
assetsRoot: path.resolve(__dirname, '../dist'),               // 资源文件的输出路径
assetsSubDirectory: 'static',
assetsPublicPath: '/',     //默认是'/',修改为'./'，否则打包后的资源在本地浏览器打开不显示

开发完成后，可运行npm run build打包，会根据build中配置的路径输出相关文件（此配置为dist文件夹，可自行修改），项目上线时，只需要将 dist 文件夹的内容放到服务器即可。

3、修复生产打包后的资源，在本地打开空白及无法显示静态资源：
a、在config/index.js的build属性中,添加assetsPublicPath: './'

index: path.resolve(__dirname, '../dist/index.html'),   
assetsRoot: path.resolve(__dirname, '../dist'),  
assetsSubDirectory: 'static',
assetsPublicPath: './',     //默认是'/',修改为'./'，否则打包后的资源在本地浏览器打开不显示

b、在build/utils.js文件中添加publicPath:'../../'

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