在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合理食用。