1. Vue CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。Vue CLI 插件的名字以 @vue/cli-plugin- (内建插件) 或 vue-cli-plugin- (社区插件) 开头，非常容易使用，如@vue/cli-plugin-babel.
安装vue-cli
npm install -g @vue/cli
# OR
yarn global add @vue/cli你还可以用这个命令来检查其版本是否正确：
vue --version
如果要进行快速原型开发（一般用得不多），需安装扩展
npm install -g @vue/cli-service-global
创建项目
vue create 项目名称
选择手动配置（如果喜欢使用eslint可以选择默认）
键盘上下键即可切换。
创建完成后，package.json中的一部分如下：
因此，启动代码为
npm run serve
2. 目前整体的目录结构如图：
const path = require(‘path‘) const resolve = dir => path.join(__dirname, dir) const BASE_URL = process.env.NODE_ENV === ‘production‘ ? ‘/pro/‘ : ‘/‘ module.exports = { lintOnSave: false, baseUrl: BASE_URL, chainWebpack: config => { config.resolve.alias .set(‘@‘, resolve(‘src‘)) .set(‘_c‘, resolve(‘src/components‘)) }, productionSourceMap: false, // 打包时不生成.map文件 devServer: { proxy: ‘http://localhost:8080‘ } }
3.1 配置代理（跨域）
devServer: {
proxy: ‘http://localhost:8080‘ // 这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:8080
}
如果想要配置更多的代理控制行为，也可以使用一个 path: options 成对的对象，详见vue-config-js
vue-cli3.0的代理配置，直接将vue-cli 2.x 中proxyTable的配置copy到devServer.proxy中。
vue-cli 2.x
vue-cli 3.0或vue-cli 4.0
module.exports = { devServer: { proxy: { ‘/hrm/api‘: { // target: ‘http://localhost:3000/‘, // 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/‘: ‘/‘ // 所有以 ‘/hrm/api/‘ 开头的api都替换为‘/‘ } } } } }
webpack dev-Server的选项都支持.注意：
host、port和https可能会被命令行参数覆写publicPath和historyApiFallback不应该被修改，因为它们需要和开发服务器的baseUrl同步以保障正常工作vue.config.js中的configureWebpack选项提供一个对象：module.exports = { // 其他选项... configureWebpack: { plugins: [ new MyAwesomeWebpackPlugin() //...... ] } }
警告 在vue.config.js 中修改 outputDir 选项，而不是修改 output.path； 修改 vue.config.js 中的 baseUrl 选项，而不是修改 output.publicPath。
原文：https://www.cnblogs.com/ceceliahappycoding/p/12163853.html