Vue 引入[element ui][初始化导入][烦人的注意][mavonEditor]

一. 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: ''
      }

2. 在<el-form>上设置rules:‘rulesA’（冒号前这几个字是固定的）匹配data return里面，这里面的内容用来匹配data里面的判断用户输入的函数

rulesA: {
        data_email: [{ validator: checkA1, trigger: 'blur' }],
        data_forlogin: [{ validator: checkB1, trigger: 'blur' }]
      }

3. 在<el-form>上设置ref="ruleFormA"这个ref主要用于最后的表单提交操作，
4. 每一个input都要放在<el-form-item>里面，这里面填写:model对应的命名

<el-form-item prop="data_email">

5. <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来调用

2. 调用，在函数里面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