1、环境准备

1.1 安装node

从官网直接下载安装即可，自带npm包管理工具。官网网址：Node.jsNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.https://nodejs.org/en

先找一个盘符创建一个空的文件

安装 cnpm 这样以后使用 cnpm 下载快点（下载到你创建的文件里）

npm install -g cnpm -registry=https://registry.npm.taobao.org

安装完成通过如下命令查看node版本

node -V

1.2 安装webpack

# 安装 webpack 全局安装在开发环境中

npm install webpack -D -g

1.3 安装vue-cli3.x以上（仅供参考）

安装 vue-cli

npm install @vue/cli@3.12.1 -g ( 版本号 仅供参考)

创建工程

vue create 工程名

2、初始化工程vue-cli3

2.1 创建工程

vue create jingdong

我这里是创建了连个文件夹(要选第一个文件)：

2.2 配置vue.confifig.js

工程中此文件是没有，需要在工程的根路径下自行创建。

官方参考配置： https://cli.vuejs.org/zh/confifig/#vue-confifig-js

初始化的内容如下：

module.exports = {
configureWebpack:{
devServer:{
port:8090, // 端口
open:true, // 自动打开浏览器
// Mock数据
before(app){
}
}
}
}

3、vue-cli3x的目录介绍

vue.confifig.js 里大概包括了配置常用的输出路径名、跟目录、预处理、 devServer 配置、 pwa 、 dll 、第三方插件等等。

因为绝大部分的配置和扩展尤大大已经做好了封装的了，我们常用的开发基本可以满足，不满足的

我们自己可以自行去扩展

webpack的配置在这个属性里修改confifigureWebpack（Mock也是在这里面的）

3.1、在Visual Studio Code 终端然后新建终端

cd E:\Vue\vue-cli3-demo01\jingdong （切换盘符）仅供参考

下面图片是我遇到的问题：

解决方法：先退出Visual Studio Conde，右键Visual Studio Conde以管理员身份运行

然后在按照之前输入（出现下面图片就没有问题了）：

这是我又遇见的问题怎么解决（仅供参考）：

解决方法在package.json（添加以下代码）：

set NODE_OPTIONS=--openssl-legacy-provider

结束语：

首先，恭喜大家已经阅读完整个Vue-cli3集成ElementUl (最详细的环境配置)，一般而言，不管书籍也好，能够完整跟下来的就已经很不容易了。所以尽量帮助初学者减少初级的困难，其实一旦掌握了之后，会发现它其实是非常容易。但大道至简，知易行难，需要大家之后不断练习，在此基础上加强知识的认知深度。虽然我尽量以通俗易通的形式，将内容体现出来，但水平毕竟有限，望大家海涵。