@vue/cli使用教程（vue-cli3.0）

第一步创建一个目录（用来放你的项目）

第二步安装node和npm

提示：Vue CLI要求Node.js版本8或者更高（8.10.0+ 推荐）。
这一部分请访问网址：https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143450141843488beddae2a1044cab5acb5125baf0882000

第三步使用cmd命令安装vue,vue/cli环境（也可使用git bash）

全局安装vue以及vue-cli，在cmd命令行输入
npm install --g vue @vue/cli 
或 cnpm install -g vue @vue/cli 
或 yarn global add vue @vue/cli 

（这里我用的 cnpm 安装的，国内的淘宝镜像速度会快许多…）
已经安装过vue的直接安装vue/cli即可
npm install --g @vue/cli
或 cnpm install -g @vue/cli
或 yarn global add @vue/cli

(install代表安装，可简写成i，global代表全局，也可以简写成g，简写后：npm i --g vue @vue/cli)
这个是vue-cli3.0之后的版本，这个版本新增了一些新的功能，其中最最要的就是使用vue ui可以唤起图形界面
这里面可以更直观的查看到你项目中所使用的插件，也可以在这里直接搜索你所需要安装的插件进行安装，这个相比直接
命令行输入更加简洁易懂，下面是换期后的页面：

导入项目

项目依赖

执行任务

第四步创建项目

先定位到第一步创建的目录中

使用cmd命令输入： vue create test（test这个是项目名）

与 2.0 不同的是这里不再是选择模板，而是预设 presets

默认配置

选择 [默认] 将直接开始安装

这是默认配置的项目结构

自定义配置

选择 [自定义]
方向键上下移动，空格选中，Enter确定，自定义配置中，您将会看到这些配置项：

自定义细节配置

Use class-style component syntax? (Y/n)：是否使用babel做转义 yes

Use Babel alongside TypeScript for auto-detected polyfills? (Y/n) ：是否使用class风格的组件语法 yes

Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)：是否使用history模式

Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
选择预处理的模式

Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Stylus

Pick a linter / formatter config: (Use arrow keys)：选择语法检测规范

TSLint
ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier

Pick additional lint features: (Press to select, to toggle all, to invert selection)
选择 保存时检查 / 提交时检查

(*) Lint on save
( ) Lint and fix on commit

Pick a unit testing solution: (Use arrow keys) ：测试方式

Mocha + Chai
Jest

Pick a E2E testing solution: (Use arrow keys) ：e2e测试方式

Cypress (Chrome only)
Nightwatch (Selenium-based)

Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
选择配置信息存放位置，单独存放或者并入package.json

In dedicated config files
In package.json

Save this as a preset for future projects? (y/N) ：是否保存当前预设，下次构建无需再次配置

安装完成后的项目结构：

相比于vue-cli3.0之前的版本，结构简洁了很多
public相当于原来的static，里面的index.html是项目的入口
src同以前一样

cli3.0没有build和config了， 
想要配置的话，需要在项目根目录下创建vue.config.js文件 
详情请访问官网：https://cli.vuejs.org/

配置文件去哪了？

之前的build和config文件夹不见了，那么应该如何配置 如webpack等的配那？
只需要在项目的根目录下新建 vue.config.js 文件（是根目录，不是src目录）

语法

 module.exports = {
	     // 基本路径
	     baseUrl: '/',
	     // 输出文件目录
	     outputDir: 'dist',
	     // eslint-loader 是否在保存的时候检查
	     lintOnSave: true,
	     // use the full build with in-browser compiler?
	     // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
	     compiler: false,
	     // webpack配置
	     // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
	     chainWebpack: () => {},
	     configureWebpack: () => {},
	     // vue-loader 配置项
	     // https://vue-loader.vuejs.org/en/options.html
	     vueLoader: {},
	     // 生产环境是否生成 sourceMap 文件
	     productionSourceMap: true,
	     // css相关配置
	     css: {
	      // 是否使用css分离插件 ExtractTextPlugin
	      extract: true,
	      // 开启 CSS source maps?
	      sourceMap: false,
	      // css预设器配置项
	      loaderOptions: {},
	      // 启用 CSS modules for all css / pre-processor files.
	      modules: false
	     },
	     // use thread-loader for babel & TS in production build
	     // enabled by default if the machine has more than 1 cores
	     parallel: require('os').cpus().length > 1,
	     // 是否启用dll
	     // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
	     dll: false,
	     // PWA 插件相关配置
	     // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
	     pwa: {},
	     // webpack-dev-server 相关配置
	     devServer: {
	      open: process.platform === 'darwin',
	      host: '0.0.0.0',
	      port: 8080,
	      https: false,
	      hotOnly: false,
	      proxy: {
	      	'/BeMoralOfficial': {
		     target: 'http://****.****.****.****:8001',  //目标接口域名
		      secure: false, //false为http访问，true为https访问
		      changeOrigin: true,  //是否跨域
		      pathRewrite: {
		        '^/BeMoralOfficial': '/BeMoralOfficial'   //重写接口
		      }
		    }
	      }, // 设置代理
	      before: app => {}
	     },
	     // 第三方插件配置
	     pluginOptions: {
	      // ...
	     }
    }

至此项目就已经构建完成了。

上一篇使用vue-cli构建项目教程：https://blog.csdn.net/qq_40015826/article/details/89245564