使用Visual Studio Code引入Element UI（详细小白版）

首先在桌面上新建一个文件夹，使用Visual Studio Code打开该文件夹，然后执行下面的操作

1.安装node.js

网址:nodejs.cn

下载好之后进行安装，安装完成之后在编译器中输入node -v 查看是否安装成功

如果出现node.js的版本号就表示安装成功，也可在cmd上打印node -v 两者是一样的

2.同时通过安装包安装node.js时会自带npm的环境，在控制台输入

npm -v

如果出现npm的版本号就表示安装成功

3.通过镜像安装cnpm来代替的npm 这样我们下载依赖的时候速度就会快很多

 npm install -g cnpm --registry=https://registry.npmmirror.com

等待镜像安装完成后再控制台输入

4.安装yarn 在控制台输入

npm install -g yarn

等待下载完成后在控制台输入

yarn

 如果出现以下格式就代表安装成功

 

5.使用cnpm安装vue-cli 脚手架在控制台输入

cnpm install -g @vue/cli

等待下载完成后在控制台输入

vue -V

注意：是大写的V而不是小写的v,如果是小写v则会出现报错

如果出现以下格式就代表安装成功

 

6.开始创建项目，在控制台输入

vue create 项目名称(将自己的项目名称写好就可以，在这里我的项目名称是vue-manage)

注意：名称中可以有中划线、下划线的符号，但是不能有大写字母，否则控制台会报错

在命令执行完之后，这里脚手架会通过让工程师自己选择的方式去选择适合自己的所对应的环境，在这里我选择的是Vue 2 

 等待下载后可以看到我们项目结构已经出现了vue-manage这个文件夹

 

7.然后运行这个项目，首先将路径切换到这个目录下

cd vue-manage

当路径切换到这个目录下之后我们在控制台上输入

npm run serve

 然后等待项目启动，当出现下面这个格式的时候，代表项目启动成功

 

8.使用ctrl+鼠标左键，点击链接，就会出现以下页面

 

 当出现这个页面的时候，就说明我们的项目已经启动成功了

9.打开浏览器输入网址

element.eleme.cn

打开element ui官网，点击组件   

 来到这个页面  

往下划，找到Hello world，复制这段代码到Visual Studio Code中，创建一个html文件将代码复制到里面

 

10.如果运行成功，页面中会出现一个按钮，注意：如果运行失败（页面上出现的不是按钮，而是英文单词）且浏览器控制台报错，请按一下步骤照做：

(1) 在根目录引入Vue.js

 

  (2) 在head标签下输入以下引用

<script src="./js/vue.js"></script>

 

(3) 将以下复制代码中引入Vue的路径删除

 

(4)将项目logo命名成favicon将图片格式改为.ico

如果没有logo自己随意找一个图片改成如图也是一样的

(5) 输入以下代码关闭浏览器控制台提示（可有可无）

<script>Vue.config.productionTip = false</script>

 

在经历过这些操作后，回到页面，可以看到页面中之前的英文单词已经变成了Button按钮，这样我们就可以使用element ui相关组件了

11.回到element ui官网在组件中找到Button按钮，复制以下代码

将代码Visual Studio Code中的div标签中  

将代码运行，就可以看到以下效果  

 

12.然后制作对话框，随机挑选一个Button按钮绑定事件

 然后在Vue实例中声明即可

 回到页面，查看效果

 注意：如果之前将这段代码删除，浏览器控制台不会报错，软件也不会报错，别问！问就是踩过

( Ĭ ^ Ĭ ) 所以，大家在写代码的时候真的要打起十二分的精神，不要粗心大意

 好的，今天的教程到这里就结束，如果有帮助到你，十分荣幸

欢迎点赞转发！！！