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 vue-loader@14.2.2 -D
or
npm install vue-loader@14.2.2 -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之前否则还是报错。