Vuejs引入Element-ui

1. 安装 elementUI

   npm i element-ui -S

2. 引入elementUI
   
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)


Vuejs引入Axios

1. 安装Axios

   cnpm i axios --save-dev

2. 引入axios

 import axios from 'axios'
 Vue.prototype.$ajax = axios12

Vuejs引入Less

1. 安装less
   cnpm install less less-loader --save-dev

2. 在webpack.base.conf.js写上一条rule

       {
           test: /\.less$/,
           loader: "style-loader!css-loader!less-loader"
         }

• 1

• 2

• 3

• 4

• 5

3. 在使用less的style上写上
   lang="less"

Vuejs引入Markdown

1. 安装vue-markdown cnpm i vue-markdown --save

2. 引入vue-markdown

import VueMarkdown from 'vue-markdown' //直接作为一个组件引入export default {
    name: 'demo',
    data() {        return {
            content: '## 这里是要展示的markdown文字，也可以通过props传递'
        }
    },
    components: {
        VueMarkdown // 声明组件
    }
}123456789101112

在html中，直接使用该组件

<vue-markdown :source="content"></vue-markdown>

此时没有样式，下面我们引入highlight.js来实现代码高亮

highlight.js

1. 安装highlight.js

   cnpm i highlight.js --save

在main.js中注册一个新的指令

import hljs from 'highlight.js'import 'highlight.js/styles/googlecode.css'Vue.directive('highlight', (el) => {    let blocks = el.querySelectorAll('pre code')
    blocks.forEach((block) => {
        hljs.highlightBlock(block)
    })
})123456789

使用：
<vue-markdown v-highlight :source="content"></vue-markdown>

Vuejs引入Vant

1. 安装Vant

   cnpm i vant --save

2. 引入axios

全局引入

 import Vant = from 'vant' import 'vant/lib/vant-css/index.css'
 Vue.use(Vant)123

局部引入

安装依赖： npm i babel-plugin-import
 .baberlc文件增加一条plugin： ["import",{"libraryName":"vant","style":true}]

某页面中：

import {Button} from 'vant'Vue.use(Button)12