教你如何从0开始搭建vue3.X版本的elementplus项目？

1、

我也是VUE菜鸟，想着尝试创建一个新的elmentplus项目，搜索了很多相关的，但是没有一个完整的过程，对于我这种菜鸟，头都大了。。终于在不断的搜索中摸索出怎么搭建，所以记录一下！

搭建环境

下面我们就开始吧：

1. 前提 ，我的电脑环境没有安装全局VUE；

2. 然后，我在 D盘（你自己选择自己的盘符）任意位置，创建一个项目目录：例如 vue3x;

3. 开始，找个命令行工具软件，我用的是git bach
   
   打开之后，通过 cd 进入 vue3x ;

4. 安装vue-cli版本，

安装vue-cli3的最新版本
注意不要加 -g 加了就是全局安装了
vue-cli3我是安装在了vue3文件夹下的
执行： npm install @vue/cli

然后等待安装！

安装好了，就是上面的结果；
然后回到你的电脑，打开vue3x 文件夹，你会发现多了这些文件：

5. 检验安装是否成功
安装vue-cli后，会在当前目录下有一个 node_modules 的文件夹。这也就是局部安装vue所需要的模块的文件，那么怎么检验呢? vue-cli3检验:
1、在vue3的目录下执行：

./node_modules/.bin/vue -V

看到执行结果OK。vue-cli3.x 局部安装成功了.
6.修改vue3的名称
接下来，找到安装vue的目录，然后找到 vue 和 vue.cmd 的位置.

然后修改掉他的名称：

然后把它的.bin 路径复制好（因为要配置环境变量）：
D:\vue3x\node_modules.bin

7.配置环境变量
1、打开环境变量所在位置：右键我的电脑-属性-高级系统设置-环境变量

8.新建系统变量
对应的输入变量名和文件目录
这里的目录就是我们安装vue的目录，而且找到.bin文件夹就可以了。
9.最后修改Path变量
这一步才是最重要的
先找到Path的位置（这个不能新建，每台电脑都有的）、然后编辑

win10电脑下就直接在空白栏双击，然后填入刚才我们设置的变量名、注意有 %%包着的

如果不是win10的电脑
编辑Path的时候。可以移到路径的输入框的最后面
然后输入 ;%VUE_CLI2%;%VUE_CLI3%
【重点】 win10以下的电脑环境变量是以 ; 分开的，所以不要漏了

最后。重启电脑就行了
修改环境变量后，要重启电脑才能生效。

## 前面 第2-9点知识来自：https://blog.csdn.net/Jioho_chen/article/details/90455778 我也是得到这位大佬的启发，才能完成的！感谢这位大佬。

10.开始创建项目文件
重启完电脑后，通过命令 cd 方式进入到 vue3x目录，然后执行

vue3 create projectname（projectname 项目名称，你可以随便写）

直接按回车键，就可以了。稍等一会就可以看到：

然后再cd 进入到 projectname，跟着就可以安装 elmemtplus了

npm install element-plus --save

最后，安装好后，修改main.js 文件改为：

import { createApp } from ‘vue’
import ElementPlus from ‘element-plus’
import ‘element-plus/dist/index.css’
import zhCn from ‘element-plus/es/locale/lang/zh-cn’
import App from ‘./App.vue’
const app = createApp(App)
app.use(ElementPlus, { size: ‘small’, zIndex: 3000,locale: zhCn })
app.mount(‘#app’)

就可以了，然后就按照你自己的需要安装各种支持组件或者插件了。

PS: 如果出现这个问题，可以暴力解决：

打开 vue.config.js 添加：

lintOnSave:false,//关闭语法检查

最后，再重新

npm run serve

就可以了

写在最后，第一次写这样的记录，如有问题，可以留言。我懂的也会告诉大家，感谢csdn和各位csdn大神，帮我解决很多问题！