1. 环境

cmd.png

2. 开始创建项目

2.1 在终端输入

vue create vuecli3

提示：以下用↑ ↓键切换，enter键表示确定，空格键表示选择

2.2 选择构建项目的方式，自动构建还是手动选择

image.png

选择 Manually select features

2.3 选择项目需要的一些特性

image.png

这里选择Babel、 Router、 Vuex、 CSS、 Linter、 Unit、 Testing

2.4 提示是否使用router旧版本

image.png

选择否

2.5 选择CSS预处理器语言

image.png

选择less

2.6 选择ESLint的代码规范

image.png

选择使用Standard代码规范

2.7 选择何时进行代码检测

image.png

选择保存时进行检测

2.8 选择单元测试解决方案

image.png

选择Jest

2.9 选择 Babel、PostCSS、ESLint等配置文件存放位置

image.png

选择单独保存在各自的配置文件中

2.10 是否保存刚才的配置

image.png

选择确定后你下次再创建新项目就有你以前选择的配置了，不用重新再配置一遍了

2.11 vue-cli初始化完成后，根据提示进入到项目中，启动项目

// 启动项目
npm serve
// 打包编译
npm build
// 执行lint
npm lint
// 执行单元测试
npm test:unit

3. vue.config.js配置介绍

参考链接https://cli.vuejs.org/zh/config/

3.1 配置代理

devServer

• Type: Object
• 注意：
  • 有点像host、port和https 可能会被命令行参数覆写
  • 有的像publicPath和historyApiFallback不应该被修改，因为它们需要和开发服务器的baseUrl同步以保障正常工作

devServer.proxy

• Type: string | object

// 配置一个代理
module.exports = {
  devServer: {
    proxy: 'http://localhost:8200'
  }
}

//配置多个代理
module.exports = {
  lintOnSave: true， // 是否使用eslint
  devServer: {
    port: 8080, // 端口号
    host: 'localhost',
    https: false, // https:{type:Boolean}
    open: true, //配置自动启动浏览器
    proxy: {
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  }
}

3.2 配置Webpack其他选项

参考链接：webpack简单的配置方式

在vue.config.js中的configureWebpack选项提供一个对象：

module.exports = {
  // 其他选项...
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
      //......
    ]
  }
}

3.3 配置jquery

npm install jquery --save

1.查看package.json中dependencies项会有"jquery": "^3.4.1"，如果没有可以手动添加。
2.打开.eslintrc.js文件

env配置jquery.png

3.打开vue.config.js文件，即可

vue.config.js配置png

警告
有些 webpack 选项是基于 vue.config.js 中的值设置的，所以不能直接修改。例如你应该修改 vue.config.js 中的 outputDir 选项而不是修改 output.path；你应该修改 vue.config.js 中的 publicPath 选项而不是修改 output.publicPath。这样做是因为 vue.config.js 中的值会被用在配置里的多个地方，以确保所有的部分都能正常工作在一起。

4.相关了解

1.src中的目录不变
2.原有的index.html及favicon.ico拷贝到新项目的public中
3.原有的static文件夹也拷贝到puclic中
4.package.json、babelrc等文件不变
5.build之后静态目录2.0在dist/static下，3.0在dist/assets下

--后续更新，学已用之，共勉。--