Vue-CLI使用说明

CLI（Command Line Interface）

• 开发的时候需要构建本地服务器环境，从文件打开模式切换到服务器打开模式
• 需要实现模块化的开发与封装；
• 需要实现文件的处理（sass转css等）、代码的解析（ES6转ES5等）、模块的打包（webpack操作）、服务的启动（webpack-dev-server等）；
• 需要安装npm install -g vue-cli

搭建一个vue 2.x项目流程：

1. 选择不同的Vue模板进行项目的搭建，比如simple、webpack-simple、webpack、browserify/browserify-simple等；
2. 通过命令vue init webpack-simple vue-cli来实现webpack-simple模板的Vue项目的创建；
3. 进入vue-cli目录以后需要进行npm install模块内容的初始化操作；
4. 然后运行命令npm run dev就可以直接运行Vue初始化项目了，默认地址是http://localhost:8080；
5. 可以先查看vue-cli的项目目录结构以及文件结构内容，需要注意的是.babelrc、.gitignore、package.json以及webpack.config.js等配置文件内容。当然，主要的Vue的组件是App.vue以及主要的入口文件是main.js；
6. App.vue组件文件中主要包含三大部分template、script以及style来进行显示、逻辑与样式的处理；
7. 运行命令npm run build将会生成最终压缩优化后的build.js文件，这是生产环境下的文件内容，而项目目录下也会多出一个dist目录以及build.js文件；

搭建一个vue3.0项目流程：

首先声明：

是vue-cli 3.0 是没有webpack配置文件的，vue自己封装了webpack的配置；

我们只需要在根目录创建vue.config.js文件，即可对webpack进行配置，

该文件的配置参数相见官网 vue-cli 3.0 中文官网webpack的配置 ；

以下步骤：

1. 首先要下载vue-cli3  ，然后运行指令

    vue create vue3.0-test(项目名)

2. 选择 Manually select features

3. 选择项目需要的一些特性（此处我们选择需要Babel编译、使用Vue路由、Vue状态管理器、CSS预处理器、代码检测和格式化、以及单元测试，暂时不考虑端到端测试(E2E Testing)）

4. 选择CSS预处理器语言，此处选择LESS

5. 选择ESLint的代码规范，此处使用 Standard代码规范

6. 选择何时进行代码检测，此处选择在保存时进行检测

7. 选择单元测试解决方案，此处选择 Jest

8. 选择 Babel、PostCSS、ESLint等配置文件存放位置，此处选择单独保存在各自的配置文件中

9. 配置完成后等待Vue-cli完成初始化

vue.config.js配置文件介绍

此部分内容参考 Vue-cli配置参考

vue.config.js 是一个可选的配置文件，如果项目的（和package.json同级的）根目录中存在这个文件，那么它会被 @vue/cli 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照JSON的格式来写。

这个文件应该导出了一个包含了选项的对象：

// vue.config.js
module.exports = {
  // 选项...
}

配置代理

如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置

devServer

• Type: Object
  所有 webpack-dev-server 的选项 都支持.注意：
  • 有些值像 host 、 port 和 https 可能会被命令行参数覆写
  • 有些像 publicPath 和 historyApiFallback 不应该被修改，因为它们需要和开发服务器的baseUrl同步以保障正常工作

devServer.proxy

• Type: string | object
devServer.proxy 可以是一个指向开发环境API服务器的字符串：

  module.exports = { devServer: { proxy: http://localhost:4000 } }

这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到 http://localhost:4000 。

如果你想要更多的代理控制行为，也可以使用一个 path: options 成对的对象。完整的选项可以查阅 http-proxy-middleware 。

vue-cli2.0 创建的项目的代理配置方式是修改 config/index.js 文件中的proxyTable:

vue-cli3.0 的代理配置，直接将proxyTable中配置copy到devServer.proxy中即可：

module.exports = {
  devServer: {
    proxy: {
     /hrm/api: {
        //target: http://192.168.1.209:10751/, // Dev环境
        //  target: http://192.168.1.238:10751/, // Test环境
        // target: http://192.168.1.215:10751/, // Rls环境
        target: http://192.168.1.218:10751/, // 正式环境
        changeOrigin: true,
        autoRewrite: true,
        cookieDomainRewrite: true,
        pathRewrite: {
          ^/hrm/api/: /
        }
      }
    }
  }
}

配置Webpack其他选项

参考： webpack简单的配置方式

调整webpack配置最简单的方式就是在 vue.config.js 中的 configureWebpack 选项提供一个对象：

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

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

升级已有项目到vue-cli 3.0版本

https://www.jianshu.com/p/6307c568832d