在vue项目中使用Element-ui框架

1.搭建vue项目

计算机环境:Nodejs+npm+vue

本人目前使用的版本：

 使用vue脚手架（即vue/cli）创建项目，只需一行代码：

vue create projectName

网上有其他的创建方式，如:

vue init webpack projectName

两种方法创建出来的项目目录结构不相同，前者项目版本>3，后者项目版本是2.x，大家可根据自身需求选择对应的安装方式。目前第一种安装方式也是官网最新的安装方式。

实例演示：

如上图所示，第一个红圈即为创建项目的代码，项目名为vue-test，第二个红圈是选择项目配置，其中第一个是默认选项，第二个是进入手动选择。我选了第一个，然后项目就生成了。

当终端最后出现下图的提示形式时，表示项目已成功创建：

根据提示，运行上面两行代码，用浏览器访问8080端口，出现此画面，表示项目成功运行：

 

2.安装Element-ui框架

进入到vue项目根目录，同样，输入一行代码安装:

npm install element-ui -S

 

3.在项目中引入element-ui

找到文件main.js，输入以下3行代码：

import ElementUI from 'element-ui'; // 导入element-ui包
import 'element-ui/lib/theme-chalk/index.css'; // 导入相关样式
Vue.use(ElementUI); // 引用

最终main.js的全部代码: 

 

4.使用element-ui 

以引用element-ui提供的图标按钮组件作为例子，走一遍自己在使用element-ui的流程。

1）在官网上找相应组件的代码，假设现在需要如下的按钮，如图：

 

2）放到项目的相应位置，在components中新建Swap.vue文件，文件内容：

红框为直接复制粘贴的内容

 

3）在App.vue中引入，主要注意下图标出的3个地方：

这里删除了App.vue原本对HelloWorld.vue的引用。上面3个地方的名称需要一致，这些形式是框架规定的，无需去考究为什么这么写。但是，有些集成vue项目的框架会略有不同，如nuxtjs框架，就要求上图第3处引用时必须全小写（本人用的时候是nuxt2版本）。

 

4）测试效果

最后想说下Element-ui，真的很方便。记得当时刚接触前端时，用html+css写轮播图，要麻烦得多，用这个框架直接复制粘贴相应代码即可用，只需把图片数据传进去即可，而且很美观，流畅。用这个框架首先要会找提供好的组件，其次是要懂得根据自身需求去修改和完善代码。要结合vue和js合理食用。