Vue 2 项目和插件使用
目录
Less
ElementUI
CDN
NPM
完整引入
按需引入
全局配置
Vant
CDN
NPM
自动按需引入 (推荐)
手动按需引入
导入所有组件
vuex(store)
iconfont
font-class 引用
Symbol 引用
vue-clipboard2
vue-scroller
vue-quill-editor
sass-resources-loader
qrcodejs2
vue-cropper
Less
Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
安装依赖（less 和 less-loader）：
cnpm install less less-loader --save-dev安装好之后，如果报如下错误：“TypeError: this.getOptions is not a function”。 出现这个错误的原因是 less-loader 安装版本过高，最快的解决办法是重新安装较低的 less-loader 版本。
// 卸载当前安装的 less-loader
cnpm uninstall less-loader
// 安装低版本的 less-loader, 例如5.0.0版本
cnpm install [email protected] --save-dev具体在 Vue 项目中使用：
ElementUI
CDN
目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。
NPM
推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
npm i element-ui -S使用 Element ：可以引入整个 Element，或是根据需要仅引入部分组件。
完整引入
在 main.js 中写入以下内容，需要注意的是，样式文件需要单独引入。
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});按需引入
借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。首先，安装 babel-plugin-component：
npm install babel-plugin-component -D然后，将 .babelrc 修改为：
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}接下来，如果你只希望引入部分组件，比如 Button，那么需要在 main.js 中写入以下内容：
import Vue from 'vue';
import { Button } from 'element-ui';
import App from './App.vue';
Vue.component(Button.name, Button);
/* 或写为
* Vue.use(Button)
*/
new Vue({
el: '#app',
render: h => h(App)
});全局配置
引入 Element 时可以传入一个全局配置对象。该对象目前支持 size 与 zIndex 字段。size 用于改变组件的默认尺寸，zIndex 设置弹框的初始 z-index（默认值：2000）。按照引入 Element 的方式，具体操作如下：
完整引入 Element：
import Vue from 'vue';
import Element from 'element-ui';
Vue.use(Element, { size: 'small', zIndex: 3000 });按需引入 Element：
import Vue from 'vue';
import { Button } from 'element-ui';
Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
Vue.use(Button);Vant
Vant 是一个轻量、可靠的移动端组件库，于 2017 年开源。
目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。
CDN
使用 Vant 最简单的方法是直接在 html 文件中引入 CDN 链接，之后你可以通过全局变量 Vant 访问到所有组件。
NPM
通过 npm 安装，在现有项目中使用 Vant 时，可以通过 npm 或 yarn 进行安装：
# Vue 3 项目, 安装最新版 Vant：
npm i vant -S
# Vue 2 项目, 安装 Vant 2：
npm i vant@latest-v2 -S引入组件有以下三种方式：
自动按需引入 (推荐)
babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。首先，安装 babel-plugin-import：
# 安装插件
npm i babel-plugin-import -D然后在 .babelrc 中添加配置：
// 注意：webpack 1 无需设置 libraryDirectory
{
"plugins": [
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
]
}
// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
};接着可以在代码中直接引入 Vant 组件，插件会自动将代码转化为方式二中的按需引入形式。
手动按需引入
在不使用插件的情况下，可以手动引入需要的组件，以 Button 为例。
import Button from 'vant/lib/button';
import 'vant/lib/button/style';导入所有组件
Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法。
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);vuex(store)
vuex 中的 store 是一个状态管理工具，用于单个页面中不同组件（例如兄弟组件）的数据流通。它使用单一状态——用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 ”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。
npm 安装 vuex
npm install vuex --save然后在项目的 src 文件目录下创建 store 文件夹，在 store 文件夹中创建一个 js 文件，例如：index.js 。
1、创建 store 实例，在新创建的 js 文件中加入如下代码：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
// store 状态的保存
bankName: "中央银行"
},
mutations: {
// store 状态的修改
newBankName(state, msg) {
state.bankName = msg
}
},
actions: {
},
modules: {
}
})
export default store2、在全局 main.js 引入 store，这样所有的组件都可以使用 store 中的数据了。
// main.js 文件
import Vue from 'vue'
import App from './App.vue'
import store from './store'
new Vue({
store,
render: h => h(App)
}).$mount('#app')3、使用 $store.state.xxx 调用我们保存的数据。例如使用计算属性返回 store 中的数据：
export default {
...
computed: {
bankName() {
return this.$store.state.bankName
}
},
...
}4、如果想在组件中修改 store 中的状态，可以使用 this.$store.commit() 方法。
export default {
...
computed: {
bankName() {
return this.$store.state.bankName;
}
},
methods: {
newBankName: function() {
this.$store.commit('newBankName', "工商银行")
}
}
...
}通过调用 this.$store.commit() 方法修改 store 状态，store 中 bankName 的值就变成了“工商银行”，同时所有用到过 bankName 的地方也将同步更新。
iconfont
应用中图标的显示是必不可少的，如果每个图标都用图片，那样会使得文件占用资源很大，可以用 iconfont 来显示图标，占用更少资源。
iconfont 官网：iconfont-阿里巴巴矢量图标库 ，先注册账号，然后搜索自己想要的图标，将想要的图标添加入库（选择第一个“购物车”图标按钮）：
添加后，点击右上角的“购物车”，选择“下载代码”，最后将下载下来的 zip 包解压并添加到自己的 Vue 项目。
在项目中使用 iconfont 主要有以下两种方式：
font-class 引用
第一步：引入项目下面生成的 fontclass 代码：
第二步：挑选相应图标并获取类名，应用于页面：
// xxx 表示图标名称，可在 iconfont.json 文件中的 “font_class” 属性查看
Symbol 引用
这是一种全新的使用方式，应该说这才是未来的主流，也是目前推荐的用法。这种用法其实是做了一个 SVG 的集合。
第一步：引入项目下面生成的 symbol 代码：
第二步：加入通用 CSS 代码（引入一次就行）：
第三步：挑选相应图标并获取类名，应用于页面：
// xxx 表示图标名称，可在 iconfont.json 文件中的 “font_class” 属性查看
vue-clipboard2
vue-clipboard2 插件支持复制内容至剪切板
使用 npm 安装插件
npm install vue-clipboard2 --save在项目中引用
import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)引用后，具体在项目中使用有以下两种方式：
方式一：
方式二
vue-scroller
vue-scroller 用于在页面中滚动，下拉刷新，上拉加载等功能。
npm 安装 vue-scroller
npm i vue-scroller -S插件引入到项目
import Vue from 'vue'
import VueScroller from 'vue-scroller'
Vue.use(VueScroller)在项目中使用示例
{{ item }}
其他重要的属性：
refreshText // 下拉加载的提示内容，默认值为：“下拉刷新”
noDataText // 上拉刷新的提示内容，默认值为：“没有更多数据”
finishInfinite(true) // 开始下拉加载
finishPullToRefresh() // 停止下拉加载
// 开始/停止上拉刷新
// 当参数为false时，上拉获取数据可以重新调用。
// 当参数为true，上拉获取数据回调函数停止使用,上拉提示会显示 noDataText 属性的值
finishInfinite(isNoMoreData :Boolean)
vue-quill-editor
传统的 textArea 输入框输入的内容没法做格式上的更改， vue-quill-editor 可以让我们像处理word 一样，可以对其中内容的格式做一些调整，还可以添加图片等等，它在开发中有个专有名词，叫富文本编辑器。
由于 vue-quill-editor 依赖于 quill ，所以需要先安装 quill
npm install quill -S然后安装 vue-quill-editor
npm install vue-quill-editor -S插件引入到项目
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'具体使用示例
sass-resources-loader
我们经常用less定义一些全局变量，比如头部的高度，比如主题的颜色，比如侧边栏的宽度，这时我们定义less 全局文件是有必要的，可以使用插件 sass-resources-loader 。
npm 安装 sass-resources-loader
npm install sass-resources-loader --save-devvue-cli@2：在 build 的 utils.js 文件中第 42 行后面加上以下代码：
if (loader === 'less') { // 如果是使用 sass，则将 'less' 改成 'sass' 即可
loaders.push({
loader: 'sass-resources-loader',
options: {
resources: [path.resolve(__dirname, 'path/to/your/file.less'),]
},
});
}vue-cli@3：在 vue.config.js 文件（如果没有就自行创建）中加入以下代码：
// vue.config.js
const path = require('path');//引入path模块
module.exports = {
chainWebpack: config => {
// 如果使用的是 sass，则 'less' 换成 'scss'
const oneOfsMap = config.module.rule('less').oneOfs.store
oneOfsMap.forEach(item => {
item
.use('sass-resources-loader')
.loader('sass-resources-loader')
.options({
resources: ['path.resolve(__dirname, 'path/to/your/file.less')']
})
.end()
})
}
}修改完配置文件记得重启服务器。
qrcodejs2
qrcodejs2 是用于生成 QRCode 的 javascript 库。qrcodejs2 没有依赖项。
npm 安装 qrcodejs2
npm install qrcodejs2 --save-dev在项目中使用
vue-cropper
vue-cropper 是一个优雅的图片裁剪插件。
npm 安装插件：
npm install vue-cropper --save在 vue 项目中引入插件：
// Vue2 组件内引入
import { VueCropper } from 'vue-cropper'
components: {
VueCropper
}
// Vue2 全局引入
import VueCropper from 'vue-cropper'
Vue.use(VueCropper)具体使用示例：
![]()
qs
qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。可以进行对象与字符串之间的一个转换。
npm 安装插件：
npm install qs在 vue 项目中引入插件：
// 方式一：导入项目
import qs from 'qs'
// 方式二：在main.js中设置成全局属性
Vue.prototype.$qs = qsqs 有 stringify 和 parse 两个方法。stringify 方法，是将对象序列化成 url 形式的字符串，以 & 符号进行拼接；parse方法，是将 url 形式的字符串解析成对象。具体使用示例：
// 方法一: qs.stringify(data)
const userObj = {name:'xiaoming',password:'123123'}
qs.stringify(userObj)
console.log('转换后的格式：',qs.stringify(userObj))
// 转换后的格式：name=xiaoming&password=123123
// 方法二: qs.parse(data)
const userStr = 'name=xiaoming&password=123456'
qs.parse(userStr)
console.log('转换后的格式：',qs.parse(userStr))
// 转换后的格式：Object{name:'xiaoming',password:'123456'}