Vue CLI 3 安装、创建、配置、安装插件

旧城等待， 2021-09-17 11:50 747阅读 0赞

一、安装  
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

![2019010410534057.png][]

②选择配置，看个人项目需求

注意，空格键是选中与取消，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

⑨回车确定等待下载

![20190104105221959.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70][]

4.运行项目

cd demo-vue3 // 进入到项目根目录  
npm run serve // 启动项目

或是执行 vue ui  利用项目仪器表进行创建项目

[使用方式][Link 1]

三.配置

在根目录 创建vue.config.js（与src同级）

[官网配置vue.config.js][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...

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 1][]

（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之前否则还是报错。

[2019010410534057.png]: /images/20210812/3bbe22a9b686406faf38d0dc136ca88c.png
[20190104105221959.png]: /images/20210812/ab308af911dc44418f7320468a15c811.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70]: /images/20210812/8a6b8daa5844415da105c9d7efadac27.png
[Link 1]: http://www.cainiaoxueyuan.com/gcs/7868.html
[vue.config.js]: https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 1]: /images/20210812/bc181765448d4b829f5509a650ee2e1d.png