Vuejs常用插件引入方式总结

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)

局部引入

import { Button } from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Button)

Vuejs引入Axios

1. 安装Axios
   cnpm i axios --save-dev
2. 引入axios

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

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"
         }
   

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

Vuejs引入Scss

1. 安装scss
   npm install node-sass sass-loader --save-dev
2. 配置scss

   {
      test: /\.scss$/,
      loaders: ["style", "css", "sass"]
    }

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

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 // 声明组件
    }
}

在html中，直接使用该组件

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

highlight.js

1. 安装highlight.js
   cnpm i highlight.js --save
2. 在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)
    })
})

使用：

Vuejs引入Vant

1. 安装Vant
   cnpm i vant --save
2. 引入axios

全局引入

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

局部引入

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

某页面中：

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

Vuejs 引入 vue-i18n

1. 安装vue-i18n
   npm i vue-i18n
2. 注入 vue 实例中，项目中实现调用 api 和 模板语法

import VueI18n from 'vue-i18n'
 
Vue.use(VueI18n) // 通过插件的形式挂载
 
const i18n = new VueI18n({
    locale: 'zh-CN',    // 语言标识
    //this.$i18n.locale // 通过切换locale的值来实现语言切换
    messages: {
      'zh-CN': require('./common/lang/zh'),   // 中文语言包
      'en-US': require('./common/lang/en')    // 英文语言包
    }
})
 
/* eslint-disable no-new */
new Vue({
  el: '#app',
  i18n,  // 不要忘记
  store,
  router,
  template: '',
  components: { App }
})

Vuejs 引入 Vux

官方文档
vue-cli3可以参考这篇博客
vue-cli 3.0脚手架与vux的配合使用