最近发现了一个鹅厂的仓库,实现起来比我这个方便[捂脸].https://github.com/AlloyTeam/AlloyLever 一.vue-cli脚手架中搭建的项目引入vConsole调试 1.首先npm安装,大家都懂的. npm install vconsole 2.在合适的地方新建一个文件vconsole.js,内容如下: import Vconsole from 'vconsole' let vConsole = new Vconsole() export default vCon

最近做项目,一页图片很多,加载的时候效果很差. 通过学习借鉴其他大神的方法,使用了插件vue-lazyload,使用这个插件,界面更美观了,加载的效果好起来. 安装 npm i vue-lazyload --save 在main.js中加入下面代码 import VueLazyload from 'vue-lazyload' // 引入这个懒加载插件 // Vue.use(VueLazyload) // 直接使用 Vue.use(VueLazyload, { // 添加自定义选项 preLoad

//需要自己弄雪碧图 <template> <div class="tab" id="tab"> <router-link to="/home" tag="div" class="tab-item"> <div class="tab-link"> <i class="icon icon1"></i>

今年5月份的时候做了一个测评报告项目,需要在网页正常显示的同时且可打印为pdf,当时的技术方案采用jquery+template的方式,因为是固定模板所以并没有考虑报告的模块化区分,九月底产品提出新的需求,由于报告页数动辄上千页,所以希望用户自行选择内容生成报告,这个时候原项目就不够灵活了,与小伙伴商量决定将这个项目使用vue进行重构,对报告模块进行细分封装组件复用,大概一个月的工期,中途遇到n多坑,趁着今天有时间将实现思路整理出来并将出现的问题总结一下 整体的实现思维导图如下: 需要考虑的:

vue项目中在某个页面阻止浏览器返回上一页,适用移动端.PC端. 使用场景例如: 首页 与 A页面     来回跳转,那样点击浏览器返回时也会来回跳转,本想当页面在首页的时候就不再返回了,所以这个时候需要阻止浏览器的返回. 用法:https://github.com/WangMaoling/vue-prevent-browser-back

vue项目实现详情页后退缓存之前的数据 2019年02月19日 14:54:57 不想写代码的程序员 阅读数:244   一.需要缓存的内容: 1.后退缓存条件查询的数据 2.后退缓存分页信息 二.实现 通过参考网上搜集的资料知道用keepAlive实现 参考地址:https://blog.csdn.net/sinat_17775997/article/details/80950246 1.在路由文件router.js中针对要缓存的页面进行设置 添加keepAlive: true,通过此字段判断

vue 项目 版本 Vue Cli 3.3 官方文档 https://router.vuejs.org/zh/guide/essentials/history-mode.html 因为本项目部署在 Apache Tomcat上 所以 以Apache为例 修改Apache配置 找到 #LoadModule rewrite_module modules/mod_rewrite.so 这一行 把#去掉 然后保存配置 重启服务 在根目录下创建文件 ./htaccess 把下面代码放进去 <IfModul

问题:在vue项目中, 需要将标签上的icon换成自己所需的,发现在更换了public/favicon.ico后,没有生效,依旧是原来Vue的icon. 解决办法:在vue.config.js中,修改pwa配置 代码 module.exports = { pwa: { iconPaths: { favicon32: 'favicon.ico', favicon316: 'favicon.ico', appleTouchIcon: 'favicon.ico', maskIcon: 'favicon

vue-cli是什么? vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. vue-cli怎么使用? 安装vue-cli之前,需要先装好vue 和 webpack npm install -g vue //全局安装vue npm install -g webpack //全局安装webpack npm install -g vue-cli //全局安装vue-cli 注意:上面这些装过一次之后都不需要再安装了比如说我的项目要生成在D:/project下面那么先进到目录里

关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 由于vue相对来说比较平缓的学习过程和新颖的技术思路,使其受到了广大前后端开发者的青睐,同时其通俗易懂的API和数据绑定的功能也为其揽获了不少用户.本文主要讲解vue项目的构建与实战,因此不会太多涉及其API和语法部分,旨在帮助vue的入门级用户了解从零开始构建vue项目的步骤和方法. vue项目分类 首先,在构建一个vue项目之前我们需要了解vue项目的分类,这里我主要将其分为两类:(1)直接引

Vue项目搭建完整剖析全过程 项目源码地址:https://github.com/ballyalex 有帮助的话就加个星星呗~!  项目技术栈:vue+webpack+bower+sass+axios MINGW64使用简介: 在运行项目的目录下开启,其中,ctrl+c是退出,clear是清除. NPM使用技巧: 国内网络访问npm的速度是比较慢的,所以我们可以采用淘宝开发的cnpm代替. 方便调试查看工具: 谷歌浏览器的vue插件. Vue模块介绍: vuex: 管理核心数据 vue-rout

公司要求用vue做一个微信端的网站,其中还包含一些app的内嵌页.开始的时候没想那么多,就直接用vue-cli搭了一个单页的vue项目,可随着项目越做越大,页面越来越多,问题就开始暴露出来了. 众所周知,单页面程序优点是在页面初始化时加载相应的HTML.JavaScript 和 CSS,一旦页面加载完成了,就不用再做其他的加载和跳转了,极大的提升了页面的流畅性,提供良好的用户体验.那么问题来了,把所有东西都放在初始化的时候做,就造成了页面首次加载需要更长的等待时间.而对于那些作为app内嵌的页面

地址:https://segmentfault.com/a/1190000010063757 1.前言 今天要做的,就是在上一篇文章的基础上,进行功能页面的开发.简单点说呢,就是与后端的数据交互和怎么把数据展示出来,用到的资源主要是element-ui和vue-resource,其它参考(vue-resource插件使用).今天讲到的一些功能开发,主要就是请求列表数据,详情数据,分页功能操作,搜索,搜索标签等的开发.今天这个,按照下面步骤,一步一步来.一个一个功能的做! 2.数据接口 我以'回款

实现功能: 1.记住密码勾选,点登陆时,将账号和密码保存到cookie,下次登陆自动显示到表单内 2.不勾选,点登陆时候则清空之前保存到cookie的值,下次登陆需要手动输入 大体思路就是通过存/取/删cookie实现的:每次进入登录页,先去读取cookie,如果浏览器的cookie中有账号信息,就自动填充到登录框中,存cookie是在登录成功之后,判断当前用户是否勾选了记住密码,如果勾选了,则把账号信息存到cookie当中,效果图如上: 直接上主要的代码 HTML部分 <div class=&qu

概述 vue-cli是Vue 提供的一个官方命令行工具,可用于快速搭建大型单页应用.该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程.只需几分钟即可创建并启动一个带热重载.保存时静态检查以及可用于生产环境的构建配置的项目. 使用vue-cli有以下几大优势: vue-cli是一套成熟的Vue项目架构设计,会跟着Vue版本的更迭而更新 vue-cli提供了一套本地的热加载的测试服务器 vue-cli集成了一套打包上线的方案,可使用webpack或Browserify等构建工具 安装 下面

总结了几个vue项目开发过程中遇到的常见问题,希望大家注意. 注:文末有福利! 一.样式问题 1.vue中使用less 安装less依赖 npm install less less-loader --save-dev修改 webpack.base.config.js 配置文件 { test:/\.less$/, loader:'style-loader!css-loader!less-loader' } 在使用时 在style标签中加入 lang="less" 也可以加上scoped代

一.如何去除vue项目中访问地址的# vue2中在路由配置中添加mode(vue-cli创建的项目在src/router/index.js) export default new Router({ mode: 'history', routes: [ { path: '/', name: 'menu', component: menu, children: [ { path: 'organization', component: organization, children: [ { path:

前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vue2 + vuex + vue-router + webpack + ES6/7 + element-ui + vue-baidu-map + i18n + vue-awesome-swiper 做项目时总是有一些思考和踩过的坑,对以后有一定的帮助,今天就来写写做vue项目遇到的那些事. 假如你正准

搭建环境 搭建node环境 下载 1.进入node.js官方网站下载页,点击下图中框出位置,进行下载即可,当前版本为8.9.4,下载网址为:https://nodejs.org/zh-cn/download/ 2.至于什么是LTS,请参考该知乎问题:https://www.zhihu.com/question/35512237,总之LTS意味着更加稳定,因此此处选择安装该版本,具体请依照自身需求. 安装 1.安装十分简单,只需双击刚下载完成的node-v8.9.4-x64.msi文件,期间可以更

本地环境:node版本:8.11.4 vue版本:3.4.1; 开发工具vscode 1.创建一个空的vue项目(vue create bigdata_reprot_web) 2.找到项目的空白页,改造该页面 改造思路:先把依赖的css,和js一个个的引入到 vue项目中,每引入一个,看看是否生效了 顺序: jquery(虽然vue不建议使用jquery) bootstrap.min.js jquery.slimscroll.min.js beyond.js(这个是该项目的主要js) 引入bey

首先打包你的 vue 项目 生成 dist 文件夹,教程请移步  https://www.cnblogs.com/taohuaya/p/10256670.html 看完上面的教程,请确保 你是 将: 项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPublicPath中的“/”,改为“./”后,打包生成的 dist 文件. 开始使用 HBuiderX 打包.(工具下载地址:http://www.dcloud.io/) 这是我vue 项目打包后的dist