1、加入element UI:
(1): 执行:npm i element-ui -S
(2):查看安装结果
①:在package.json文件中可以看到 "element-ui": "^2.10.1"
②:在package-lock.json文件中搜索element-ui,可以查看到element-ui信息,即表示安装完成。安装完需要重新执行 npm run dev
2、加入IView:
(1) : 执行 npm install iview --save
(2):查看安装结果
①:在package.json文件中可以看到 "iview": "^3.4.2"
②:在package-lock.json文件中搜索iview,可以查看到iview信息,即表示安装完成。安装完需要重新执行 npm run dev
3、加入layer.js:
(1)执行 npm i --save layui-layer
(2)在main.js中加入import layer from "layui-layer";
(2)查看结果:
①:在package.json文件中可以看到 "layui-layer": "^1.0.9"
②:在package-lock.json文件中搜索layui-layer,可以查看到layui-layer信息,即表示安装完成,但是发现layui-layer还依赖jquery,此处显示需要jquery-3.1.1版本以上的,因此需要加入Juery。
3、加入Jquery.js:
(1)我们发现在安装完layer.js后需要依赖jquery,而在安装layer.js后package-lock.json中已经有Jquery.js了,
因此只需在package.json文件中手动写入"jquery": "^3.4.1"即可。
同时还需要修改webpack.base.conf.js(在build文件下)两个地方:
①:加入var webpack=require('webpack');
②:在module.exports最下面加入
plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
]
最后在main.js中加入:import $ from 'jquery';
4、加入bootstrap.js:
(1):执行 npm install bootstrap
(2):
①:在package.json文件中可以看到 "bootstrap": "^4.3.1"
②:在main.js中加入:
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
③:在package-lock.json文件中搜索bootstrap,可以查看到bootstrap信息,即表示安装完成。安装完需要重新执行 npm run dev
5、加入v-distpicker:安装完需要重新执行 npm run dev
(1):执行 npm install v-distpicker --save
(2)在main.j中注册成为全局组件: (2)或(3)二选一
import Distpicker from 'v-distpicker'
Vue.component('v-distpicker', Distpicker)
(3)或者在需要的地方 注册成为局部组件:
import VDistpicker from 'v-distpicker'
export default {
components: { VDistpicker }
}
(4) 在使用的页面加入即可:
<v-distpicker></v-distpicker>
(5)v-distpicker 详细的使用方法(附)