目錄
-
- 一、vue項目中引入lodash
- 二、vue項目中引入js-base64
- 三、vue項目中使用md5加密
- 四、vue項目中引入echarts
- 五、vue項目中引入jQuery
- 六、vue項目中引入js-cookie
- 七、vue項目中引入elementUI庫
- 八、vue項目中引入less并使用
- 九、vue項目中使用axios和qs
一、vue項目中引入lodash
1、安裝lodash依賴
npm i lodash -S
或者
cnpm i lodash -S
2、在需要使用lodash的元件中使用直接使用md5
import _ from 'lodash'
或者
let _ = require('lodash')
注明：也可擴充vue的插件lodash，可将第2步改為：
//引入
import _ from 'lodash'
//擴充vue的插件
Vue.prototype._ = _
//使用
let res = _.union(arr1,arr2,arr3);
二、vue項目中引入js-base64
1、安裝md5依賴
npm install --save js-base64
或者
cnpm install --save js-base64
2、在需要使用md5的元件中使用直接使用md5
let Base64 = require('js-base64').Base64;
Base64.decode('dsdsdSd');
Base64.decode('3232131');
Base64.encode('6545hgdfg');
Base64.encode('543hfghfhfhggfh');
三、vue項目中使用md5加密
1、安裝md5依賴
npm install --save js-md5
或者
cnpm install --save js-md5
2、在需要使用md5的元件中使用直接使用md5
import md5 from 'js-md5';
let data={
'account': this.loginAccount,
'password': md5(this.loginPassword)
};
注明：也可擴充vue的插件md5，可将第2步改為：
//引入
import md5 from 'js-md5';
//擴充vue的插件
Vue.prototype.$md5 = md5;
//使用
let data={
'account': this.loginAccount,
'password': this.$md5(this.loginPassword)
};
四、vue項目中引入echarts
1、安裝echarts依賴
npm install echarts --save
或者
cnpm install echarts --save
2、引入echarts（注明：可在main.js檔案中全局引入，也可在所需的元件中局部引入，如user.vue元件中局部引入）
import echarts from 'echarts' //引入echarts
Vue.prototype.$echarts = echarts
3、在需要使用echarts的元件中使用
//餅狀圖建構
this.initPieChart('myChart1’,10,90);
initPieChart(idName,rest,used){
let myChart = echarts.init(document.getElementById(idName));
myChart.setOption({
title : {
text: '',
subtext: '',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: '({d}%) {a} <br/>{b} : {c}TB ',
},
legend: {
orient: '',
left: '',
data: [],
show:false
},
color:['#78C085','#75ABDE'],
series : [
{
name: '',
type: 'pie',
radius : '63%',
center: ['50%', '50%'],
data:[
{value:rest, name:'剩餘'},
{value:used, name:'已用'}
],
labelLine: { //訓示線狀态
normal:{
length:8//長度
}
},
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
normal:{//餅圖圖形上的文本标簽
labelLine : {
show : true //顯示标示線
}
}
}
}
]
});
}
注明：如果您隻需要引入柱狀圖，可以按需引入，那麼隻需要将上述的第2步改為：
1、引入基本模闆
let echarts = require('echarts/lib/echarts')
2、引入折線圖元件
require('echarts/lib/chart/line')
3、引入提示框和title元件，圖例
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
require('echarts/lib/component/legendScroll')//圖例翻譯滾動
4、vue擴充echarts插件
Vue.prototype.$echarts = echarts
小提示：require不用完整路徑，import需要完整路徑
五、vue項目中引入jQuery
1、安裝jQuery依賴
npm install jquery --save
或者
cnpm install jquery --save
2、修改webpack配置檔案
const webpack = require('webpack');
module.exports = {
entry: {
app: ['./src/js/index.js']
},
plugins: [
new webpack.ProvidePlugin({
$:'jquery',
jQuery:'jquery'
})
]
};
3、在需要使用jQuery的元件中使用
import $ from 'jquery';
let data={
page:1,
rows:20,
groupId:'111111',
order:'desc',
sort:'create_time',
accuntStatus:1,
useStatus:0,
name:'ewewe',
token:'e342421eddsada32321'
};
//表單序列化
let param = $.param(data);
六、vue項目中引入js-cookie
背景：vue項目中由于項目的token是需要設定過期時間的，當然，以前這種過期的行為邏輯一直是後端來控制，但這次要求前端也進行token時間的一個監控，由于懶得封裝cookie，是以就用了js-cookie的一個cookie封裝庫
js-cookie是關于cookie存儲的一個js的API，根據官網描述其優點有：适用所有浏覽器、接受任何字元、經過任何測試沒什麼bug、支援CMD和CommonJS、壓縮之後非常小，僅900個位元組
1、在項目中進行安裝：
npm install js-cookie 'js-cookie' --save
2、在項目中的入口檔案（main.js）全局引入
3、在項目中使用：
//1、存cookie set方法支援的屬性有 ： expires->過期時間 path->設定為指定頁面建立cookie domain-》設定對指定域名及指定域名的子域名可見 secure->值有false和true ,表示設定是否隻支援https,預設是false
Cookies.set('key', 'value'); //建立簡單的cookie
Cookies.set('key', 'value', { expires: 27 });//建立有效期為27天的cookie
Cookies.set('key', 'value', { expires: 17, path: '' }); //可以通過配置path,為目前頁建立有效期7天的cookie
//2、取cookie
Cookies.get('key'); // 擷取指定key 對應的value
Cookies.get(); //擷取所有value
//3、删除cookie
Cookies.remove('key');//删除普通的cookie
Cookies.remove('name', { path: '' }); // 删除存了指定頁面path的cookie
注意：如果存的是對象，如： userInfo = {age:111,score:90}; Cookie.set(‘userInfo’,userInfo)
取出來的userInfo需要進行JSON的解析,解析為對象：let res = JSON.parse( Cookie.get(‘userInfo’) );
當然你也可以使用：Cookie.getJSON(‘userInfo’);
七、vue項目中引入elementUI庫
1、使用npm 安裝elementUI
npm install element-ui -S
2、在vue項目的入口js檔案中全局引入elementUI庫，增加以下三行代碼：
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
3、測試一下，在hello.vue檔案中
<template>
<div class="hello">
<h1>{{ msg }}</h1><br>
<br>
<el-button type="danger">這是element-ui的button元件</el-button>
</div>
</template>
4、效果如下：
八、vue項目中引入less并使用
1、npm進行安裝
npm install less less-loader --save
2、建立less檔案,如login.less
.login-page{
h1{
cursor: pointer;
background: #f00;
}
}
3、在vue檔案(如：login.vue)中的style标簽将less檔案(login.less)引入
<template>
<div class="login-page">
<h1>{{ msg }}</h1>
<div>
<el-button type="success" @click="login">登入</el-button>
</div>
</div>
</template>
<script>
export default {
name: 'Login',
data () {
return {
msg: 'Login'
}
},
methods:{
login(){
console.log(111)
this.$router.push('/index');
}
}
}
</script>
<style lang="less" scoped>
@import "../less/login.less";//scope表示這個less檔案隻在該元件産生作用
</style>
4、效果如下：
九、vue項目中使用axios和qs
1、安裝axios和qs
npm install axios --save
npm install qs
2、在項目中的子產品中使用axios 、qs
import axios from 'axios';
import qs from 'qs';
3、在axios進行接口調用
①post請求：
let data = {name:'1111'};
axios.post('/getUser',qs.stringify(data)).then(res => {//成功的請求
consle.log(res);
}).catch(err =>{//失敗的請求
console.log(err);
});
②get請求
let data = {id:1};
axios.get('/getUserInfo',{params:data}).then(res =>{//成功的請求
console.log(res);
}).catch(err => {//失敗的請求
console.log(err);
});