一. element-ui
1.导入
vue ui:在插件里面下载vue-cli-plugin-element
- 选择按需导入
- 选择中文
- main.js导入
import './plugins/element' #这里面按需要导入组件内容
2.form表单的使用
- 在
<el-form>
标签上写入:model=“ruleFormA”,其对应着data return里面的
ruleFormA: {
data_email: '',
data_forlogin: ''
}
- 在
<el-form>
上设置rules:‘rulesA’(冒号前这几个字是固定的)匹配data return里面,这里面的内容用来匹配data里面的判断用户输入的函数
rulesA: {
data_email: [{ validator: checkA1, trigger: 'blur' }],
data_forlogin: [{ validator: checkB1, trigger: 'blur' }]
}
- 在
<el-form>
上设置ref="ruleFormA"这个ref主要用于最后的表单提交操作, - 每一个input都要放在
<el-form-item>
里面,这里面填写:model对应的命名
<el-form-item prop="data_email">
-
<el-button @click="click_submitA('ruleFormA')" >登录</el-button >
这里的ruleFormA也要跟前面一样避免麻烦
3.消息弹窗
- 配置 element.js引入
import { Message } from 'element-ui'
Vue.component(Message.name, Message)#为了必须Vue.use刷新页面会弹窗的错误
Vue.prototype.$message = Message //这样就可以在随意组件用this.$message来调用
- 调用,在函数里面
return this.$message.error('无效的请求')
就ok
4.导航栏
- 图标修改
<i class="el-icon-location"></i>
改变里面的class - 启用router模式,让标签里面的index就成为路径
- 小bug多个el-submenu存在不为其单独设置index会一同展开,设置上不同值就ok
5.分页
- 获取页码通过自带绑定函数
@current-change='' currentPage 改变时会触发
6.表格
- 获取每行具体数据
<template slot-scope="slot">
<el-button type="primary" icon="el-icon-edit" circle></el-button>
<el-button type="danger" icon="el-icon-delete" circle @click="del(slot.row.id)"></el-button>
</template>
# 此通过插槽作用域方法,来获取其值
二.初始化导入
1. 模板引入
解释:统一引入到App.vue使其为主入口,import login from './components/login.vue'
配置App.vue:
<template>
<div>
<login></login>
</div>
</template>
import login from './components/login.vue'
export default {
components: {
login
}
}
2.vue-router
解释:配置在router/router.js
import Vue from 'vue'
import Router from 'vue-router'
import admin from './components/admin/admin.vue'
Vue.use(Router)
export default new Router({
routes: [
{ path: '/f', component: admin }
]
})
配置main.js
import router from './router.js'
new Vue({
router,
render: h => h(App)
}).$mount('#app')
配置app.vue
<template>
<div>
<router-view></router-view>
</div>
</template>
3.引入axios
解释:先下载该插件,然后在main.js中引入配置
import axios from 'axios'
axios.defaults.baseURL=''设置一下默认路径
Vue.prototype.$http=axios 之后通过this.$http调用
const json = await this.$http.post('login', {
email: this.ruleFormA.data_email,
pwd: this.ruleFormA.data_login,
remember: this.data_switch
})
4.element ui
解释:按需要在里面导入
配置element.js
import Vue from 'vue'
import { Button } from 'element-ui'
Vue.use(Button)
配置main.js
import './plugins/element'
三.烦人的注意
解释:vue为了让代码保持相同的风格所携带的eslint很是麻烦,风格一不同就报错,所以有必要让其自动修复,在vue.config.js
配置
格式:
chainWebpack: config => {
config.module
.rule('eslint')
.use('eslint-loader')
.loader('eslint-loader')
.tap(options => {
options.fix = true
return options
})
}
四.mavonEditor的使用
1.基础
- 使用github文档提供的props进行修改配置,都要满足这个格式才能配置
<mavon-editor :fontSize='size'/>
export default {
props: {
size: {
type: String,
default: '60px'
}
}}
或者<mavon-editor codeStyle="vs2015" />
2.前端显示(highlight.js)
A:
在main.js引入(先安装该插件):
import hljs from 'highlight.js' // 导入代码高亮文件
import 'highlight.js/styles/agate.css'
// use v-highlight
// 自定义一个代码高亮指令
Vue.directive('highlight', function (el) {
const highlight = el.querySelectorAll('pre code')
highlight.forEach((block) => {
hljs.highlightBlock(block)
})
})
在App.vue
<div v-html="content" class="markdown-body" v-highlight>
B:安装github-markdown-css
在App.vue
import 'github-markdown-css/github-markdown-light.css' #这个文件配合文件类名必须为class="markdown-body