Vue CLI 3 安装、创建、配置、安装插件
一、安装
1、全局安装过旧版本的 vue-cli(1.x 或 2.x)要先卸载它：
npm uninstall vue-cli -g //或者 yarn global remove vue-cli
注意：如果卸载不了(我卸载2.9.6，还剩下一个2.9.3版本一直卸载不了),就直接安装vue cli3，包直接安装就能覆盖掉
2.安装 vue cli3
npm install -g @vue/cli
官方建议，node.js的版本，需要是8.9或者以上（推荐是8.11.0+）
二、创建项目
1.找到安装项目的地址：cd E:\ylz_project\my_vuedemo
2.安装
vue create demo-vue3（demo-vue3 自定义项目名）
3.配置
①我选了第二个，手动选择需要的manually select features
②选择配置，看个人项目需求
注意，空格键是选中与取消，A键是全选
TypeScript 支持使用 TypeScript 书写源码
Progressive Web App (PWA) Support PWA 支持。
Router 支持 vue-router 。
Vuex 支持 vuex 。
CSS Pre-processors 支持 CSS 预处理器。
Linter / Formatter 支持代码风格检查和格式化。
Unit Testing 支持单元测试。
E2E Testing 支持 E2E 测试。
选中 babel 、router、vuex、CSS Pre-processors 这些就好
③是否使用history路由:n
④选择css处理器：sass/scss
⑥何时检测 ： Lint on save
⑦选择lint的配置文件如何存放（第一个是独立文件夹位置，第二个是在package.json文件里）：In dedicated config files
⑧是否保存本次创建项目的配置项，用于下次快速创建项目 ：y
⑨回车确定等待下载
4.运行项目
cd demo-vue3 // 进入到项目根目录
npm run serve // 启动项目
或是执行 vue ui 利用项目仪器表进行创建项目
使用方式
三.配置
在根目录 创建vue.config.js（与src同级）
官网配置vue.config.js
如：
module.exports = {
baseUrl: process.env.NODE_ENV === 'production'
? './'
: '/',
devServer: {
port: 8080,//端口号
open: true, //配置自动启动浏览器
proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
}
}1.baseUrl配置
在vue-cli3的项目中，
npm run serve时会把process.env.NODE_ENV设置为‘development’；//本地的
npm run build 时会把process.env.NODE_ENV设置为‘production’；//线上/生产环境
此时只要根据process.env.NODE_ENV设置不同请求url就可以很简单的区分出本地和线上环境。
//1.这样的配置是为了生产环境下 可以找到css或是js
module.exports = {
baseUrl: process.env.NODE_ENV === 'production'
? './'
: '/'
}
./ 是表示： test.com/index.html
/ 代表是域名根目录下面： test.com/dist/index.html
四.安装插件
vue create 来创建一个新项目的时候,则用vue add vuex(vuex插件名)当然也可以用npm install xx
注意下：npm i --save-dev XX 和 npm install --save xx 这2个安装的命令
npm i --save-dev XX：工程构建（开发时、“打包”时）依赖 ；例：xxx-cli , less-loader , babel-loader...
npm install --save xx：项目（运行时、发布到生产环境时）依赖；例：antd , element,react...
（1）.安装iview UI
执行命令vue add vue-cli-plugin-iview
选按需加载：Import on demand 选zh-CN
vue-cli-plugin-iview会自动帮我们做好以下的文件的配置：
1.babel.config.js
module.exports = {
presets: [
'@vue/app'
],
"plugins": [
[
"import",
{
"libraryName": "iview",
"libraryDirectory": "src/components"
}
],
[
"import",
{
"libraryName": "iview",
"libraryDirectory": "src/components"
}
]
]
}
2.package.json
"babel-plugin-import": "^1.8.0",
3.在目录下新增了plugin文件下有个iview.js
import Vue from 'vue'
import { Button } from 'iview'
Vue.component('Button', Button)
import 'iview/dist/styles/iview.css'
4.main.ts
import './plugins/iview.js'（2）.安装vux
注意：安装这个的项目css 应该是less 否则会报错 Error: Cannot find module 'vue-loader/lib/plugin'
1、在项目里面安装vux
npm install vux --save
2、安装vux-loader（必须安装）
npm install vux-loader --save-dev
3、安装yaml-loader (以正确进行语言文件读取)
npm install yaml-loader --save-dev
注意：这个必须在vue-loader安装前安装 否则会报错
4、配置vux环境
这里注意由于vue-cli3使用的是webpack4而且更新过vue-loader，所以vux使用起来会存在一些兼容的问题，这里需要额外配置一下。
官方更新过vue/cli3.x 的vue-loader，正常配置会导致加载错误。所以需要手动指定vue-loader的版本来解决加载问题。
yarn add [email protected] -D
or
npm install [email protected] -D 在packageage同级目录下新建一个文件vue.config.js
vue-cli3.x的一些服务配置整个的结构都迁移到CLI Service里面了，对于一些基础配置和一些扩展配置提供了vue.config.js。那么问题来了，对于这么一个入口，肯定不能直接按照vux-loader的方法直接在配置文件置空webpackConfig了。而单独组件引用的话又被告知 使用错误（事实上都直接报错了，因为没有正确对于组件的load）。
参照vux-loader文档的配置说明，那么就是merge以下vux-loader的配置到webpackConfig里面呗，接下来就简单了。我们只需要在vue.config.js文件中的webpackConfig的配置中mergevux-loader就行了
根据官方文档，在文件里加入以下内容：
module.exports = {
configureWebpack: config => {
require('vux-loader').merge(config, {
options: {},
plugins: ['vux-ui']
})
}
}目前就可以使用了， 不过到目前为止 还是有些小问题 提的issue 还没有回应 如果采用解构的方式在main.js 引用 并不能成功引用 可以采用这种方式（示例）
import Popup from 'vux/src/components/popup'
import Alert from 'vux/src/components/alert'
import Confirm from 'vux/src/components/confirm'
import Cell from 'vux/src/components/cell'注意：运行报错 Error: Cannot find module 'vue-loader/lib/plugin'
这个原因是yaml-loader 没有安装，同时 yaml-loader 必须安装在vue-loader之前否则还是报错。