Vuejs常用插件引入方式总结

<>Vuejs引入Element-ui

* 安装 elementUI
npm i element-ui -S
* 引入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

* 安装Axios
cnpm i axios --save-dev
* 引入axios import axios from 'axios' Vue.prototype.$ajax = axios
<>Vuejs引入Less

*
安装less
cnpm install less less-loader --save-dev

*
在webpack.base.conf.js写上一条rule
{ test: /\.less$/, loader: "style-loader!css-loader!less-loader" }
*
在使用less的style上写上
lang="less"

<>Vuejs引入Scss

* 安装scss
npm install node-sass sass-loader --save-dev
* 配置scss { test: /\.scss$/, loaders: ["style", "css", "sass"] }
* 在使用scss的style上写上
lang="scss"
<>Vuejs引入Markdown

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

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

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

<>highlight.js

* 安装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) }) })
使用：
<vue-markdown v-highlight :source="content"></vue-markdown>

<>Vuejs引入Vant

* 安装Vant
cnpm i vant --save
* 引入axios
全局引入
import Vant = from 'vant' import 'vant/lib/vant-css/index.css' Vue.use(Vant)
局部引入

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

某页面中：
import {Button} from 'vant' Vue.use(Button)

• « 上一篇：iOS 如何利用Application Loader 将ipa包上传到AppStore
• » 下一篇：javascript基础修炼(3)—What's this(下)