element
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
第八步，我们运行项目（操纵号令行东西指心猿意马到项目标根地址，然后运行【npm run dev】），然后就可以在网页上查看结果了，发现和element官网上的一样，大功乐成，具体如下图
注重事项
- 有什么不懂的可以留言，我有空会帮你解决下。
- 但愿对你有帮忙
- 发表于 2019-06-24 17:02
- 阅读 ( 862 )
- 分类：其他类型
0 篇文章
作家榜 »
-
xiaonan123
189 文章
-
汤依妹儿
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
华志健
23 文章