vue-cli 打包 使用 history模式 的后端配置
apache的配置这是windows下的在httpd-vhosts.conf文件中把目录指向项目index.html文件所在的位置#VirtualHosts#<VirtualHost*:80>ServerNamelocalhostDocumentRootD:/wamp64/www/huanzuan/dist<Directory"D:/wamp64/www/huanzuan/dist">OptionsIndexesFollowSymLinksAllowOverrideAllOrderallow,denyAllowfromall</Directory></VirtualHost>然后再index.html文件的同级路径下创建.htaccess文件<IfModulemod_rewrite.c>RewriteEngineOnRewriteBase/
angular.js和vue.js中实现函数去抖（debounce）
问题描述搜索输入框中，只当用户停止输入后，才进行后续的操作，比如发起Http请求等。学过电子电路的同学应该知道按键防抖。原理是一样的：就是说当调用动作n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间。本文将分别探讨在angular.js和vue.js中如何实现对用户输入的防抖。angular.js中解决方案把去抖函数写成一个service，方便多处调用：.factory('debounce',['$timeout','$q',function($timeout,$q){//Theserviceisactuallythisfunction,whichwecallwiththefunc//thatshouldbedebouncedandhowlongtowaitinbetweencallsreturnfunctiondebounce(func,wait,immediate){vartimeout;
jQuery
前端基础进阶：全方位详细图解面向对象、构造函数、原型与原型链这是一篇非常适合新手理解关于面向对象一切的文章，解答了为什么我们会使用构造函数与原型，构造函数与原型的本质以及new关键字到底对构造函数干了些什么等关键问题这里有超过20家的前端面试题，你确定不点进来看看？请各位读者添加一下作者的微信公众号，以后有新的文章，将在微信公众号直接推送给各位，非常感谢。0.备注若文章中部分内容无法显示，请移步李鹏的其他博客。简书CSDN1.前言这里有超过20家的前端面试题，你确定不点进来看看？好吧，如果你看到这句话，你明显是点进来了。…面试分享：一年经验初探阿里巴巴前端社招最近，试了一把阿里社招面试，分享一下面试题以及心得。详解Javascript十大常用设计模式力荐~深度好文~深入理解Javascript10大设计模式Vue实战(一)--Vue基础总结Vue作为一个前端轻量级的MVVM框架有其独到之处,本文主要针对Vue1.0版本的官方文档进行梳理总结,主要包括以下几个方面:数据绑
解决多个路由绑定同一个组件 获取参数只获取一次的方法
{path:'/application',title:'我的工作',icon:'code-working',name:'application',component:Main,children:[{path:'index/:id',title:'我的申请',name:'myApplication',component:resolve=>{require(['@/views/application/index'],resolve);}},{path:'index/:id',title:'我的待办',name:'havenotdone',component:resolve=>{require(['@/views/application/index'],resolve);}
SpringBoot+Vue前后端分离，使用SpringSecurity完美处理权限问题(一)
当前后端分离时，权限问题的处理也和我们传统的处理方式有一点差异。笔者前几天刚好在负责一个项目的权限管理模块，现在权限管理模块已经做完了，我想通过5-6篇文章，来介绍一下项目中遇到的问题以及我的解决方案，希望这个系列能够给小伙伴一些帮助。本系列文章并不是手把手的教程，主要介绍了核心思路并讲解了核心代码，完整的代码小伙伴们可以在GitHub上star并clone下来研究。另外，原本计划把项目跑起来放到网上供小伙伴们查看，但是之前买服务器为了省钱，内存只有512M，两个应用跑不起来(已经有一个V部落开源项目在运行)，因此小伙伴们只能将就看一下下面的截图了，文末有部署教程，部署到本地也可以查看完整效果。本文我们先不聊具体实现，我先来介绍一下我这个权限管理模块的一个整体架构，以及最终呈现出来的效果。数据库设计权限数据库主要包含了五张表，分别是资源表、角色表、用户表、资源角色表、用户角色表，数据库关系模型如下：关于这个表，我说如下几点：1.hr表是用户表，存放了用户的基本信息。2.role是角色表，name字段表示角色的英文名称
Electron 前端提测小工具
场景目前公司的测试环境还是由开发来搭建和部署的。这种做法是机器不科学的。所以那种部署啊什么的重复性的操作还是做个工具让测试自己去部署好了。先来预览一下工具-.-：实施本来是想做个在线版的工具的。但是和公司运维沟通蛋疼。测试服务器没网，让他们开个联网的权限bb个不停，还来个这是我该做的事情吗？我只能说我是前端开发，服务器有需求是我一个开发该做的事情吗？好了，不抱怨，我前段啥都能玩，不就是没网，照样怼。没网，我就做个离线版的工具呗。做个桌面应用不就好啦。挖坑记录虽然以前也没折腾过桌面应用什么的，但是不要怂，撸起袖子干。调研选型技术目前我了解到使用前端技术做桌面应用有Electron和NW.js以及heX着三种神器。具体选哪个呢，不纠结，看到Electron出自github，那自然首先考虑啦。安装Electron作为一个懒人，首先想到的就是手脚架啦：#Clonethisrepositorygitclonehttps://github.com/electron/electron-quick-start
Vue + jquery 实现表格指定列的文字收缩
效果很简单，但是写起来真的不容易，因为Vue对于没有React这种前端框架经验的人是不友好的（少吐槽，多工作，省下时间出去hi）先说一下我走过的弯路：我之间想通过v-if指令去操作这一列代码是这样的：<el-table-columnwidth="250"align="center"label="比较基准"><templatescope="scope"><spanv-if="isAllTxt">{{getShortStr(scope.row.benchmark)}}</span><spanv-else>{{scope.row.benchmark}}</span><i@click="changeTxt"style="margin-left:8px;color:#20a0ff;"class="el-icon-more"></i></template></el-tabl
原创全新打包工具Parcel零配置VueJS开发脚手架
parcel-vue一个基于Parcel打包工具的VueJS急速开发脚手架解决方案,强烈建议使用node8.0以上项目地址:https://github.com/w3c-king/p...初始化项目$gitclonehttps://github.com/w3c-king/parcel-vue.git安装依赖$cdparce-vue$npminstall其中parcel-bundler是主要的工具，对于vue结尾的单文件，需要单独处理文件类型，parcel-plugin-vue这个插件会通过vueify来生成对应的代码，parcel会自动加载parcel-plugin开头的依赖。运行开发环境,运行成功后打开浏览器http://localhost:1234查看项目$npmrundev打包编译$npmrunbuild开发目录结构src├──router├──index.js├──assets├──logo.png├──components├──
vue-cli构建web项目
一、安装node，npm。检测安装成功：node-v和npm-v。二、安装vue-cli。首先安装cnpm：npminstall-gcnpm--registry=https://registry.npm.taobao.org。查看版本：cnpm-v。然后用cnpm安装vue-cli：cnpminstall-gvue-cli。三、生成手脚架项目：输入命令：vueinitwebpackzhao。如果出现vue命令无法识别，如图：有两种可能，一种是npm版本过低，更新最新的npm版本即可。npminstall-gnpm或者cnpminstall-gnpm。另一种可能是因为npm全局路径配置的不对或缺失导致的，所以查看npm全局路径：npmroot-g。然后会看到vue-V成功，如图：然后进入项目，安装项目依赖：cnpminstall。最后启动项目即可：npmrundev。
SpringBoot+Vue前后端分离，使用SpringSecurity完美处理权限问题(二)
当前后端分离时，权限问题的处理也和我们传统的处理方式有一点差异。笔者前几天刚好在负责一个项目的权限管理模块，现在权限管理模块已经做完了，我想通过5-6篇文章，来介绍一下项目中遇到的问题以及我的解决方案，希望这个系列能够给小伙伴一些帮助。本系列文章并不是手把手的教程，主要介绍了核心思路并讲解了核心代码，完整的代码小伙伴们可以在GitHub上star并clone下来研究。另外，原本计划把项目跑起来放到网上供小伙伴们查看，但是之前买服务器为了省钱，内存只有512M，两个应用跑不起来(已经有一个V部落开源项目在运行)，因此小伙伴们只能将就看一下下面的截图了，GitHub上有部署教程，部署到本地也可以查看完整效果。项目地址：https://github.com/lenve/vhr上篇文章我们对项目做了一个整体的介绍，从本文开始，我们就来实现我们的权限管理模块。由于前后端分离，因此我们先来完成后台接口，完成之后，可以先用POSTMAN或者RESTClient等工具进行测试，测试成功之后，我们再来着手开发前端。本文是本系列的第二篇，建议先阅读前
vue-i18n和ElementUI国际化使用总结
项目中需要自定义切换中/英文，基于vue.js，结合vue-i18n，ElementUI,以下是使用方法。ElementUI国际化链接：http://element-cn.eleme.io/#/...vue-i18n：https://github.com/kazupon/vu...安装:npminstallvue-i18nvue.js+vue-i18n国际化先不使用ElementUI，就单纯的vue.js+vue-i18n使用方法：在main.js同级建i18n新文件夹，里面新建i18n.js、langs文件夹，langs文件夹下新建en.js、cn.js;目录如下://i18n.jsimportVuefrom'vue'importVueI18nfrom'vue-i18n'importmessagesfrom'./langs'Vue.use(VueI18n)//从localStorage中拿到用户的语言选择，如果没有，那默认中文。consti18n=newVueI18n({loc
vue.js 2.0 transition-group 知识点学习
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>vue.js2.0transition-group</title><style>.list-li{width:100px;height:20px;transform:translate(0,0);}.list-enter,.list-leave-active{opacity:0;transform:translate(-30px,0);}.list-enter-active,.list-leave-active{transition:all0.5se
基于go+vue实现的golang每日新闻浏览与检索平台
介绍gonews是基于go+vue实现的golang每日新闻浏览与检索平台项目地址：Github线上Demo：GoNews数据来源：GoCN每日新闻项目截图部署获取新闻数据gitclonehttps://github.com/gocn/news/data/news获取源码goget-ugithub.com/mikemintang/gonews解析数据nohupgonews-d/data/news>/data/log/gonews.log2>&1启动Apinohupgonews-aapi-p8017>/data/log/gonews.log2>&1&前端部署cd$GOPATH/src/github.com/mikemintang/gonews/webnpminstallnpmrunbuildNginx配置server{listen80;server_namego
vue-cli#2.0项目结构分析
项目结构build构建工具相关的目录config配置目录dist通过工具打包生成的最终需要上线的目录node_modules存放本地开发所有的依赖包的目录src源码目录static存放图片等静态资源的目录.babelrcbabel是把新的ES语法，编译成浏览器兼容的语法的编译器，而它需要配置文件.babelrc来配置预设的规范.editorconfig定义和维护一致的编码风格。用于语法与编程规范检查.eslintignore你可以通过在项目根目录创建一个.eslintignore文件告诉ESLint去忽略特定的文件和目录。eslintignore文件是一个纯文本文件，其中的每一行都是一个glob模式表明哪些路径应该忽略检测。以下将忽略所有的JavaScript文件：**/*.js当ESLint运行时，在确定哪些文件要检测之前，它会在当前工作目录中查找一个.eslintignore文件。如果发现了这个文件，当遍历目录时，将会应用这些偏好设置。一次只有一个.eslintignor
vue从入门到进阶：简介（一）
前言用了这么久的vue了，但是一直没有时间写个系列文章，现在抽一定时间总结下vue的知识点。首先，Vue不支持IE8及以下版本，因为Vue使用了IE8无法模拟的ECMAScript5特性。但它支持所有兼容ECMAScript5的浏览器。下面总结的内容是在2.x的版本。安装直接用<script>引入直接下载并用<script>标签引入，Vue会被注册为一个全局变量。在开发环境下不要使用压缩版本，不然你就失去了所有常见错误相关的警告!CDN推荐：https://cdn.jsdelivr.net/npm/vue，会保持和npm发布的最新的版本一致。可以在https://cdn.jsdelivr.net/npm/vue/浏览npm包资源。也可以从unpkg和cdnjs获取(cdnjs的版本更新可能略滞后)。NPM在用Vue构建大型应用时推荐使用NPM安装。NPM能很好地和诸如webpack或Browserify模块打包器配合使用。同时
vue父子组件通信传值
父组件->子组件通过props来进行通信父组件代码:<Children:dataName="dataContent"/>//dataName:传过去数据的名字//dataContent:传过去的数据子组件代码:<script>exportdefault{props:['dataName']}console.log(this.dataName)//通过"this.父组件传过数据名"来调用</script>子组件->父组件子组件代码:this.$emit('dataName1',dataContnet1)//通过this.$emit()来发送你想要发送的数据//dataName1:传过去数据的名字//dataContent1:传过去的数据父组件代码:<Children@dataName1='newFuncName'/>//dataName1:传过去数据
浅谈Vue模板的那些事儿
接触过vue的童鞋都知道，组件的模板一般都是在template选项内定义的，如：1Vue.component('child-component',{23template:'<h3>我是闰土大叔</h3>'45})这个用法都是老生常谈了，今天来聊聊Vue的内联模板。看过vue文档的同学都知道，Vue提供了一个内联模板的功能，在使用组件时，给组件标签使用inline-template特性，组件就会把它的内容当做模板，而不是把它当成内容分发，这样做的好处是，让模板更灵活。介绍完内联模板的概念后，接下来我要分享一个我在工作中碰到的bug，关于内联模板，以及我debug的过程。先来贴出案发现场的代码片段：<divid="app"><child-componentinline-template><div><h2>在父组件中定义子组件的模板</h2>&
基于有赞 vant 组件的移动商城新鲜出炉
移动商城使用有赞移动端Vue组件库—Vantversions:^0.11.13Githubhttps://github.com/qianzhaoy/...预览图Vue相关库与插件Vue+Vue-router+Vant+Sassaxiosvuelidation(表单验证)fastclickbabel-polyfill@xkeshi/vue-countdown(各种倒计时)未使用Vuex,因为各个页面有较高的独立性.可以省下Vuex,少部分组件通信使用eventbus即可.店铺信息:sessionStorage用户信息及token:localStorage未完成的部分大部分功能只有UI,目前做了几个mock数据接口.还有`webpack.dll`要做.mock数据#先全局安装json-server,如果已经装过可忽略这步npminstall-gjson-servercd./mocknpmijson-serverdb.j
textarea下长度区别字母数字字符、中文字符换行 maxlength兼容
在Vue上textarea根据字母数字中文换行符号显示剩余长度第一次写博客，主要是想把自己平时开发过程中遇到的问题记录下来，做个积累，也给各位前端小伙伴一些知识分享，平时公司工作比较忙，忽略了提升自己，通过博客可以做知识沉淀，如果对其中有不同意见的，欢迎提出问题出现公司很多的h5和小程序场景都是在textarea输入文字，然后显示已输入xxx个字符这样的这时候常规做法在textarea设置maxlength='5000',基于vue的话,那就绑定一个值textareaVal在页面输出{{textareaVal.length/5000}}不过如果这样就完成，写这篇博文就没意义了，好了，废话不多说这样写的问题有一下几个：--假设最多输入40个字符，中文能输入48个，字母输入48个，但是字母的占位只有中文的一半，显然产品和用户不会买账，他们会让你把字母也要根中文输入的一样多，占位一样--换行，用户手动去点换行，会占一个字符，默认textareaVal.length会把换行符号当作一个字
vue-cli发布版本时，打包问题的正确解决方案
一、修改后端express配置：编辑bin/www修改端口号为80（当然如果喜欢域名中带有端口可以不修改，推荐修改）。输入：vimbin/www。显示如图：二、检查后端express中的view下的index.html存在与否，若存在对比web代码中的index.html是否一样，若不一样，将web代码中的index.html覆盖掉view/index.hmtl。（我的不一样，所以，覆盖。）如图：三、清空后端express中public下的所有文件：四、现在开始配置web代码，首先配置config下的index.js的文件配置，修改相对路径和配置不打包map文件。具体做法是将config文件夹-index.js中的assetsPublicPath:'./'要改为当前目录而不是'/'根目录'。以及关闭map压缩：将productionSourceMap修改为false（默认是true）。如图：五、修改build-webpack.base.conf.js，解决引入字体图标，比如font-awesome的图标路径出错的问题，在