1、
我也是VUE菜鸟,想着尝试创建一个新的elmentplus项目,搜索了很多相关的,但是没有一个完整的过程,对于我这种菜鸟,头都大了。。终于在不断的搜索中摸索出怎么搭建,所以记录一下!
搭建环境
下面我们就开始吧:
-
前提 ,我的电脑环境没有安装全局VUE;
-
然后,我在 D盘(你自己选择自己的盘符)任意位置,创建一个项目目录:例如 vue3x;
-
开始,找个命令行工具软件,我用的是git bach
打开之后,通过 cd 进入 vue3x ; -
安装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大神,帮我解决很多问题!