Element -ui是一套为开辟者、设计师和产物司理筹办的基于 Vue 2.0 的桌面端组件库， 利用它能让你快速搭建页面， 下面是利用vue-cli脚手架搭建前端项目， 然后利用element-ui组件的教程 。 具体的
如下 。
需要这些哦
电脑一台， vue,element-ui
方式/
1第一步， 我们利用vue-cli脚手架东西搭建一个前端项目（若是没有安装我们可以先安装node【上官网下载安装就可以】-然后安装vue-cli【号令是npm install vue-cli -g】）， 然后我们操纵号令【vue init webpack newtest】（newtest是项目标名称， 可以本身取名字）， 然后搭建好vue项目， 具体如下图
文章插图
文章插图
2第二步， 搭建好vue前端项目今后， 我们安装element到项目中， 我们操纵号令行东西指定到项目根目次中， 然后输入号令【npm i element-ui -S】， 具体如下图
文章插图
3第三步， 安装element到项目中今后， 我们将完整引入整个element， 下面是官网供给的方式， 具体如下图
文章插图
4第四步， 按照官网的教程， 我们起头引入element-ui， 我们在建立好的项目中打开【src文件夹】-【main.js】下引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
具体如下图
文章插图
5第五步， 仍是在【main.js】上插手
Vue.use(ElementUI);
这样就引用element完当作了， 具体如下图
文章插图
6第六步， 我们引用element今后， 我们可以利用组件吧， 我们上官网随便找一个组件， 例如单选框， 下面是组件具体的样式和利用方式， 具体如下图
文章插图
7第七步， 我们在vue项目中复制代码， 我们找到【src】-【components】-【HelloWorld.vue】， 中插手方才第五步， 复制的代码进入， 具体的代码如下图
文章插图
8【element】第八步， 我们运行项目（操纵号令行东西指定到项目标根地址， 然后运行【npm run dev】）， 然后就可以在网页上查看结果了， 发现和element官网上的一样， 大功乐成， 具体如下图
文章插图
注重事项有什么不懂的可以留言， 我有空会帮你解决下 。
但愿对你有帮忙
