一. element-ui

1.导入

vue ui:在插件里面下载vue-cli-plugin-element

  1. 选择按需导入
  2. 选择中文
  3. main.js导入import './plugins/element' #这里面按需要导入组件内容

2.form表单的使用

  1. <el-form>标签上写入:model=“ruleFormA”,其对应着data return里面的
ruleFormA: {
        data_email: '',
        data_forlogin: ''
      }
  1. <el-form>上设置rules:‘rulesA’(冒号前这几个字是固定的)匹配data return里面,这里面的内容用来匹配data里面的判断用户输入的函数
rulesA: {
        data_email: [{ validator: checkA1, trigger: 'blur' }],
        data_forlogin: [{ validator: checkB1, trigger: 'blur' }]
      }
  1. <el-form>上设置ref="ruleFormA"这个ref主要用于最后的表单提交操作,
  2. 每一个input都要放在<el-form-item>里面,这里面填写:model对应的命名
<el-form-item prop="data_email">
  1. <el-button @click="click_submitA('ruleFormA')" >登录</el-button >这里的ruleFormA也要跟前面一样避免麻烦

3.消息弹窗

  1. 配置 element.js引入
import {  Message } from 'element-ui'
Vue.component(Message.name, Message)#为了必须Vue.use刷新页面会弹窗的错误
Vue.prototype.$message = Message //这样就可以在随意组件用this.$message来调用
  1. 调用,在函数里面return this.$message.error('无效的请求')就ok

4.导航栏

  1. 图标修改<i class="el-icon-location"></i>改变里面的class
  2. 启用router模式,让标签里面的index就成为路径
  3. 小bug多个el-submenu存在不为其单独设置index会一同展开,设置上不同值就ok

5.分页

  1. 获取页码通过自带绑定函数@current-change='' currentPage 改变时会触发

6.表格

  1. 获取每行具体数据
<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.基础

  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