1、vue引入没有 npm资源的 js 方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>****</title>
<--标题图标-->
<link rel="icon" href="static/favicon.ico" type="image/x-icon" />
<--引入第三方库js-->
<script src="./static/jcinvccbar.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
这样就可以在全局中使用它了,亲测可用
2、vue 引入有npm资源的 js (以 moment 为例)
1、首先导入资源包
npm install moment
2、在main.js中导入moment并绑定到vue上
import moment from 'moment'
Vue.prototype.$moment = moment;
3、这样经过简单的两步就可以在系统中,不每个vue页面都去引用,就可以愉快的使用它了,方式如下
let formatDate = this.$moment.(new Date()).format('YYYY-MM-DD HH:mm:')
3、同理自己也可以写类似的工具方法
注意:只要 export default 声明的方法就可,下面是一个简单的例子
export default {
//initState :1:成功 2:失败 talkState:1:无状态 2:正在呼叫 3:正在通话
GeoState:{
initState:{
SUCCESS:1,
FAILED:2,
},
talkState:{
NO_STATE:1,
CALLING:2,
TALKING:3
},
crmPort:'9078',
},
/**
* aes 加密处理
* @param word
* @param keyStr
* @returns {string}
*/
encrypt(word,_this){
let keyStr = _this.$store.state.Geo.safetyCode
keyStr = keyStr ? keyStr : 'abcdefgabcdefg12';
var key = CryptoJS.enc.Utf8.parse(keyStr);//Latin1 w8m31+Yy/Nw6thPsMpO5fg==
var srcs = CryptoJS.enc.Utf8.parse(word);
var encrypted = CryptoJS.AES.encrypt(srcs, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
return encrypted.toString();
},
/**
* aes 解密
* @param word
* @param keyStr
* @returns {string}
*/
decrypt(word,_this){
//此处的safetyCode是管理在 vuex 中的
let keyStr = _this.$store.state.Geo.safetyCode
keyStr = keyStr ? keyStr : 'abcdefgabcdefg12';
var key = CryptoJS.enc.Utf8.parse(keyStr);
var decrypt = CryptoJS.AES.decrypt(word, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
return CryptoJS.enc.Utf8.stringify(decrypt).toString();
},
/**
* 处理有层级关系的菜单(递归拼接菜单父子管理的工具方法(用与el-menu的菜单 data))
* @param rows
* @returns {Array}
*/
convert(rows){
function clone(obj) {
if (null == obj || "object" != typeof obj) return obj;
if (obj instanceof Date) {
var copy = new Date();
copy.setTime(obj.getTime());
return copy;
}
if (obj instanceof Array | obj instanceof Object) {
var copy = (obj instanceof Array)?[]:{};
for (var attr in obj) {
if (obj.hasOwnProperty(attr))
copy[attr] = clone(obj[attr]);
}
return copy;
}
throw new Error("Unable to clone obj! Type isn't supported.");
}
function exists(rows, parentId){
for(var i=0; i<rows.length; i++){
if (rows[i].id == parentId) return true;
}
return false;
}
var nodes = [];
for(var i=0; i<rows.length; i++){
var row = rows[i];
if (!exists(rows, row.parentId)){
nodes.push(clone(row));
}
}
var toDo = [];
for(var i=0; i<nodes.length; i++){
toDo.push(nodes[i]);
}
while(toDo.length){
var node = toDo.shift();
for(var i=0; i<rows.length; i++){
var row = rows[i];
if (row.parentId == node.id){
var child = clone(row);
if (node.children){
node.children.push(child);
} else {
node.children = [child];
}
toDo.push(child);
}
}
}
return nodes;
}
}
上面的代码中 可以看出,其中可以定义一些常量,也可以定义一些方法,使用方法如下
<template>
<div></div>
</template>
<script>
data(){
return {
}
},
methods:{
//加密方法
let aesWord = this.$global.encrypt('13800138000',this)
//调用解密的方法
this.$global.decrypt(aesWord,this)
//常量的使用
let successCode = this.$global.GeoState.initState.SUCCESS
}
</script>
以上方法亲测可行,再此记录学习,以提高自己