进阶——Vue集成第三方组件库ElementUI
前言
首先，我们现在已经了解什么是组件了，并且可以根据自己的需要写一些带有功能的组件。但是在开发过程中，如果每一个组件都由自己编写，那么开发的效率可能会较为低效。
幸运的是，当前市场上关于Vue的组件库已经较为丰富，我们可以在第三方的组件库中寻找和使用由其他团队开发好的组件，比较知名的组件库有：ElementUI、iView UI、Bootstrap-Vue等。
下面，让我们开始来试着使用ElementUI吧！
官网地址:https://element.faas.ele.me/#/zh-CN
一、环境准备
1. 创建一个空文件夹，执行以下命令进行初始化
vue init webpack hello-vue
# 进入工程目录
cd hello-vue
# 安装 vue-router
npm install vue-router --save-dev
# 安装 element-ui
npm i element-ui -S
# 安装依赖
npm install
# 安装 SASS 加载器
cnpm install sass-loader node-sass --save-dev
# 启动测试
npm run dev
几个需要注意的点：
- 在国内使用npm下载node-sass包可能会报错或者难以下载，因此这里选择使用cnpm下载
需要本地有预先装好cnpm，这个在之前的 “创建第一个Vue-Cli项目” 笔记中有讲过 - 安装过程中如果有报错提示的话，根据提示信息执行对应语句即可，一般来说是npm audit fix
2. 选择ElementUI组件
我们这里选择在我们的登录页使用elementUI的表单组件
3. 打开我们的工程，配置一下相关参数
3.1 写一个Login组件
这里的话，基本复用ElementUI的代码，只是稍作修改：template不变，script和我们的script做一下兼容即可
<template>
<div>
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPass">
<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model.number="ruleForm.age"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "Login",
data() {
var checkAge = (rule, value, callback) => {
if (!value) {
return callback(new Error('年龄不能为空'));
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('请输入数字值'));
} else {
if (value < 18) {
callback(new Error('必须年满18岁'));
} else {
callback();
}
}
}, 1000);
};
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm.validateField('checkPass');
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.ruleForm.pass) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
ruleForm: {
pass: '',
checkPass: '',
age: ''
},
rules: {
pass: [
{ validator: validatePass, trigger: 'blur' }
],
checkPass: [
{ validator: validatePass2, trigger: 'blur' }
],
age: [
{ validator: checkAge, trigger: 'blur' }
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
<style scoped>
</style>
3.2 写一下路由
在src目录下，创建/router/index.js。目的是为了给我们自定义的组件制定路由规则
import Vue from "vue";
import VueRouter from "vue-router";
import Login from "../components/Login";
Vue.use(VueRouter);
export default new VueRouter({
routes: [
{
path: '/Login',
name: 'LoginTest',
component: Login
}
]
})
3.3 修改App.vue
这里的话，是写一下主页的内容，用router-link标签指定调整的路由
<template>
<div id="app">
<h1>首页</h1>
<router-link to="/Login">点击跳转到登录页面</router-link>
</div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
3.4 修改main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router/index'
// 导入ElementUI和element css
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(router);
Vue.use(ElementUI);
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<div><App/><router-view></router-view></div>'
})
这里要注意三点：
- 我们需要在main.js中声明我们使用的路由规则和使用ElementUI组件
- 需要导入ElementUI的css
- 导入Router时要注意命名规则，要写为router(也就是要小写)。否则，会报下面的错误：
Error in render: "TypeError: Cannot read property 'matched' of undefined"
3.5 完成上述步骤后，启动项目浏览器访问即可
