上上一篇我写过一些关于vue项目部署到linux服务器的文章，但是那是以node作为开发环境 pm2 守护进程的方式，让他能正常运行，可是还是出现了问题，因为属于与APP交互的页面，在webView中打开过慢，APP的用户体验非常的差，所以我查找了资料，改变了部署方式，接下来我介绍一下 这一次，我想Tomcat为例 我们先看一下Linux中 Tomcat下面的目录结构：以vue-cli 搭建出来的手脚架 webpack的模板下的/config/index.js，这里可以看到asse...
首先，在vue项目中安装gojs的依赖包，并在项目中引入。创建tablePreview.vue <style>#sample{position: relative;margin: 20px;}#myOverviewDiv {position: absolute;width:225px;height:100px;top: 10px;left: 10px;background-color: aliceblue;z-index: 300; /* make sure its in front */border: solid 1px blue;}#mySearch{width: 60%;float: right;margin-right: 20px;}.input_button{margin: 20px;}#entityRelation{width: ...
插件打包与发布插件功能开发完成后，若需要发布到公共组件库中（例如：npmjs），需要对插件进行打包并发布，简单说明一下这个过程，以插件名 dialog 为例 1、创建 dialog 目录，并进入 2、运行命令行，初始化项目，生成 package.json npm init -y3、使用 webpack-simple 模板构建项目基本结构（前提为已自行安装好 vue-cli）vue init webpack-simple根据导航提示，设置好项目后，基本结构生成完成 4、删除无用内容 删除 index.ht...
一、全局引入文件 1、先定义共用组件 common.vue <script type="text/javascript">// 定义一些公共的属性和方法const httpUrl = http://39.105.17.99:8080/function commonFun() {console.log("公共方法")}// 暴露出这些属性和方法export default {httpUrl,commonFun} </script> 2、在需要使用的地方导入 <script> // 导入共用组件 import global from ./common.vue export default {data () {return {username: ,password: ,// 赋...
我们开发项目的时候，用vue-cli 2.x版本新建的项目，只有dev, pro两种开发环境, 有时需要个test环境来给测试使用，所以找了很多方法，总结了个最简单的方法来给大家使用 1、package.json 在build下面添加一个test运行命令 "test": "node build/build.js" 2、prod.env.js在config -> prod.env.js 中修改代码use strict// 读取系统运行时候的变量const target = process.env.npm_lifecycle_event;// 控制台日志输出console.log('env ...
使用全局路由守卫实现 前端定义好路由，并且在路由上标记相应的权限信息 const routerMap = [{path: /permission,component: Layout,redirect: /permission/index,alwaysShow: true, // will always show the root menumeta: {title: permission,icon: lock,roles: [admin, editor] // you can set roles in root nav},children: [{path: page,component: () => import(@/views/permission/page),name: pagePermission,meta: {titl...
节流函数是web前端开发中经常用到的一个开发技巧,在input实时搜索,滚动事件等,为了避免过多消耗性能,我们都会使用节流函数.在《JavaScript高级程序设计》一书中有这样的一个例子: function throttle (method, context) {clearTimeout((method.tId))method.tId = setTimeout(function () {method.call(context)}, 100)}function resizeDiv () {var div = document.getElementById(myDiv)div.style.height = div.offsetWidth + px}wi...
本文介绍了vue树形结构获取键值的方法示例，分享给大家，具体如下： 把键值文件放入引入控件 import { getTypeValue } from @/api/dict/dictValue/index; 点击搜索，打开弹窗 <el-form-item label="机构名称" placeholder="请选择机构" prop="orgName"><el-input readonly type="text" v-model="form.orgName"><el-button slot="append" icon="el-icon-search" @click="openDepartDialog()"></el-button></el-input></el-form-item...
我的GitHub前端经验总结，喜欢的话请点star:Thanks.: https://github.com/liangfengbo/frontend-develop vuejs导航条高亮我的做法： 用一个数组存导航条，用v-for循环它，这样可以减少代码，二可以使用它的下标来判断高亮，三还可以获取后端的导航信息来遍历重点是在：routerLink(index, path)函数，传入当前点击的下标，自定义一个下标，判断是否相等就用三元符号判断多给一个高亮样式如何解决刷新就不高亮或第一个高亮了，很简单...
最近做了一次关于vue组件自动化测试的分享，现在将vue组件单元测试环境搭建过程整理一下。这次搭建的测试环境和开发环境隔离，所以理论上适用所有使用vue的开发环境。 准备 这篇文章的重点在于搭建测试环境，所以我随便写了个webpack的vue开发环境。 代码地址：https://github.com/MarxJiao/vue-karma-test 目录结构如下目录结构app.vue和child.vue代码app.vuechild.vue运行效果如下： 运行效果测试环境搭建 注意：这里使用的是w...
本文实例讲述了vue.js使用3DES加密的方法。分享给大家供大家参考，具体如下： 如何在VUE-CLI手脚架建立的工程中使用3des加密： npm install crypto-js --save-dev import CryptoJS from crypto-js //DES加密 Pkcs7填充方式 encryptByDES(message, key){const keyHex = CryptoJS.enc.Utf8.parse(key);const encrypted = CryptoJS.DES.encrypt(message, keyHex, {mode: CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});return en...
背景index页面：首页品牌入口list页面：商品列表页面product页面：商品详情页面从index页面进入list的时候要刷新页面，从product页面返回list的时候不需要刷新页面，所以list使用了keep-alive的属性,keepAlive设置为true，但是开发过程中发现一个问题，从product返回到list的时候，列表页面不是正确的品牌列表，而是之前一次点击的品牌列表。由于每个人遇到关于keep-alive请求数据不正确的问题不同，这里就直接说我的解决办法。希望...
以vue创建的官方例子为例子，我们在开发环境的时候会 npm run dev ，生成而想要打包成一份很简单， 只需要 npm run build 这个命令 这两种命令的配置文件在config的index.js 一种是build 一种是dev ，而我们想要在本地查看打包后的成果，需要在assetsPublicPath 改变它的路径， 具体为什么，可以看index.html引入的文件路径之后只需要放在服务器上运行就好了。 *常用技巧 1.如果在config -> index.js 中的 build 代码中的 producti...
首先，我们需要在vue工程中安装video.js相关依赖。 npm install --save video.js npm install --save videojs-contrib-hls然后，我们需要引入videojs的css文件，例如在main.js中引入 import video.js/dist/video-js.css接着，我们在需要播放视频的页面引入js对象 import videojs from video.js import videojs-contrib-hls指定一个video容器，例如： <video id="my-video" class="video-js vjs-default-skin" controls preload="au...
本文实例讲述了vue.js中实现登录控制的方法。分享给大家供大家参考，具体如下： vue中使用vue-router实现登录的控制在做后台管理系统中很常见，但是不想之前熟悉的流程那样，不过只要大家理解vue-router的使用也是很好实现的。 首先我们需要编写登录页面和主页面： <template><div class="login"><table width="100%" height="100%"><tr height="41"><td class="logintb" colspan="2"> </td></tr><tr height="100%" class="loginbg...