elementplus 教程有没有 javascript版

Element UI学习记录

目录

Element UI学习记录

一、安装Vue脚手架并使用脚手架快速创建项目

二、Element UI 入门及安装

三、总结

---

一、安装Vue脚手架并使用脚手架快速创建项目

假设已经安装好node.js和npm包管理器，如果没有安装可自行查阅node.js安装详细步骤教程

2. 我们可以使用cnpm install -g @vue/cli或yarn global add @vue/cli来安装新版本的脚手架。安装完成之后，我们可以vue --version或vue -V命令来查看我们安装的版本。



3.  
5. 新版脚手架安装完成之后，我们要检查一下webpack是否已经安装，如果没有安装，我们要使用cnpm install webpack -g命令来安装webpack。



7. 在电脑合适的位置创建文件夹用来存放你的vue工程，比如我在D盘创建了一个vueProjects的文件夹。然后在该路径下打开命令行窗口:



8. 
   
10. 输入vue create 项目名称命令来创建我们的项目，比如这里我要创建一个名为vue-test的项目。输入vue create vue-test命令之后，窗口会提示我们是否要安装一些默认组件，我们这里不需要默认安装，选择第三个【Manually select features】，可以进行自定义选择要安装的组件，通过空格键选择或者取消要安装的组件，然后回车继续下面的选项，比如这里我只安装了Router组件：



11.  



12.  点击回车，后面还有几项选择，可以参考我的选择一步步来：



13. 出现下面的黄框提示，说明所有的项目文件下载完毕：



14. 然后输入npm run serve命令启动我们的项目，在浏览器中输入本地地址http://localhost:8080/，就可以看到我们用vue-cli创建的项目了。  



15.  



16. 
    

---

二、Element UI 入门及安装

1. Element UI:一套为传统桌面准备的基于Vue.js的前端组件库，这里附上element ui官网地址；
2. 安装环境，需要安装Node.js环境，可自行查阅资料，这里不做赘述，安装Vue.js脚手架等工具（参照一安装Vue脚手架并使用脚手架创建项目）即可；
3. 在上面依靠vue-cli脚手架创建好的vue-test项目（或者用idea、webstorm等工具创建,在项目终端输入：vue create 项目名称命令即可）目录下，或者在任何vue项目的目录下，推荐使用npm安装Element UI，它能更好地和webpack打包工具配合使用，命令如下：

npm i element-ui -S

安装完成后，在package.json文件中就可以看到以下依赖： 

1. 在项目中测试（使用），在main.js加入以下内容来引入Element UI：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';


Vue.use(ElementUI)

项目中的展示如下：

 修改HomeView.vue中<div></div>的内容为:

<el-row>
      <el-button type="success" plain>成功按钮</el-button>
    </el-row>

可以参照官网给出的组件一一尝试

最后，运行看看效果，即可看到测试的button按钮。

---

三、总结

实践出真知，本人初学，记录于此，若有错误之处，恳请批评指正，谢谢！