上一篇文章介绍了vue.js如何快速创建一个应用，以及相关的目录介绍，编译部署等问题。这一篇文章主要总结一些项目通用的用法。
1.添加jquery和Bootstrap支持
1)在项目根路径下安装相应模块:
cnpm install bootstrap jquery –save
2)增加jquery支持：
//file:webpack.base.conf.js
头部增加 const webpack = require(‘webpack’)
module.exports模块里面增加：
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"windows.jQuery": "jquery"
})
],
最后在main.js中加入import $ from ‘jquery’,完成jquery的引入
3)增加bootstrap支持：
在入口文件main.js中加入：
import './assets/css/bootstrap.min.css'
import './assets/js/bootstrap.min'
在assets文件中新增css、js、fonts文件夹，分别在里面放入指定的bootstrap文件
2.增加fontAwesome图标支持：
方案一： 在index.html中合适的地方增加：
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
方案二： 在Font Awesome官网下载资源包，将解压后的文件依次放入/src/assets/下的对应文件夹(没有则新建)中，然后在main.js中导入指定文件：
import './assets/css/font-awesome.min.css'
3.使用js加密工具jsencript:
安装jsencript模块：
cnpm install jsencrypt --save
在需要的模块中使用：
import JSEncrypt from 'jsencrypt'
4.根据环境设置不同变量值
对于开发/生产环境（development/production）设置不同的变量值，代码如下：
var runenv = process.env.NODE_ENV
var backend_url = runenv=="development"?"http://localhost:8000/":"/"
5.设置通用函数
main.js里面设置，组件中引用方式为：this.getQueryVariable（"xxx"）
//获取get请求查询参数
Vue.prototype.getQueryVariable = function (variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
//判断对象是否为空
Vue.prototype.checkNone = function(obj){
if(obj == '' || obj == undefined || obj == null || obj == false){
return false
}else{return true}
}
//获取cookie值：
Vue.prototype.getCookie = function(name){
var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");
return r ? r[1] : undefined;
}
6.路由配置
1）导入组件 import componentName from ‘@/components/x/y/…’
2）如果去掉url中带入的#号，则设置mode : ‘history’; base : ‘/baseUri/‘
3）增加routes列表项，{path:’/abc’,name:’abc’,component : componentName}
7.路由匹配
若访问的uri不在路由配置中，则路由到404页面。设置/src/App.vue文件，增加mounted()函数如下：
mounted(){
if(!this.$route.matched || this.$route.matched.length === 0){
window.location.href = this.getBackendUrl()+'errorpage/404/404.html?path='+this.$route.path
}
}
8.拖拽排序
a) 项目路径下执行npm install awe-dnd --save
b) main.js中引入：
import VueDND from 'awe-dnd'
Vue.use(VueDND)
c) template中引用：
<div class="header-list">
<div class="header-item>
v-for="requestHeader in requestHeaders"
v-dragging="{ item: requestHeader, list: requestHeaders, group: 'requestHeader' }"
:key="requestHeader.id" :id="'requestHeader'+requestHeader.id">
....内容...
</div></div>
d) requestHeaders内容：
[{"id":1,"value":"x"},{"id":2,"value":"y"},...]
e) 添加事件：
export default {
mounted () {
this.$dragging.$on('dragged', ({ value }) => {
console.log(value.item)
console.log(value.list)
console.log(value.otherData)
})
this.$dragging.$on('dragend', () => {
})
}
}
附录：
设定行内部分元素拖拽的方法：
1）给需要拖拽的元素增加属性：draggable=”true”，并修改光标style=”cursor:move;”
2）修改awe-dnd源码，在文件vue-dragging.es5.js和vue-dragging.js中，注释掉这一行：el.setAttribute(‘draggable’, ‘true’);
9.安装调试工具
a) 全局安装cnpm install -g @vue/devtools
b) 运行：vue-devtools
c) 在应用的
<script src="http://localhost:8098"></script>如果是APP或远程机上执行的应用，则：
<script>
window.__VUE_DEVTOOLS_HOST__ = '<your-local-ip>' // default: localhost
window.__VUE_DEVTOOLS_PORT__ = '<devtools-port>' // default: 8098
</script>
<script src="http://<your-local-ip>:8098"></script>
d) npm run dev 运行应用，devtools会自动连接