vue项目打包后上传至GitHub，并实现github-pages的预览 1. 打包vue 项目 vue项目：命令行输入打包命令npm run build，生成了dist文件夹：打包完成。 打包常见问题1——项目资源无法加载 打开刚刚打包好的dist文件夹，浏览器打开index.html发现该页面是空白的，打开控制台发现这里看到index.html文件中没有加载任何css、js文件。 解决方法——修改config文件 打开项目根目录config下的index.js文件，进行如下修改：即将assetsPublic...
根据官网的文档，要在一个html文件下使用layui里面的组件库其实很简单，但是在vue项目中使用该ui库却存在着很多坑，下面我们就详细讲解一下如何在vue-cli搭建的项目下使用layui 1.第一个坑：vue项目中使用npm安装引入时报错（目前并没有找到引入的合适的方式，知道的可以留言探讨） 在官网中我们可以看到他提到支持npm安装，但是当我们安装成功后，在main.js中引入时却报并不能找到该模块的错。 所以，我们先下载文件包，然后在htm...
一般我们都是在main.js中引入vue，然后在vue文件中直接使用this（this指向的是vue实例），但是在实际开发中，我们往往会引入外部的js文件使用this，这个this就会指向window，并不是我们期待的vue实例，那么就需要重新引入vue文件（import Vue from vue）,这样很麻烦。在目前项目中我使用的方法是mian.js导出vue实例，然后在需要使用的js中引入。 步骤一：main.js导出vue实例 var vue = new Vue({el: #app,router,components: { App...
前段时间，泡面将自己的一个Vue-cli构建的前端框架从webpack3.x升级到了4.x版本，现在才拉出来记录一下，已备忘之用，也和大家分享一下，以免大家采坑。原先的环境 项目原先通过Vue-cli 2.9.3 版本构建，原先使用的webpack 3.x版本首先需要对基础包进行更新(package.json)webpack 更新到4.x版本，泡面这里更新到了4.28.3更新webpack-dev-server，泡面更新到了3.1.14版本,安装webpack-cli，泡面安装的是3.2.1版本除了上面的这几个，...
Vant 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。 特性 50+ 个经过有赞线上业务检验的组件单元测试覆盖率超过 90%完善的中英文文档和示例支持 babel-plugin-import支持 TypeScript支持 SSR组件中文文档地址：https://youzan.github.io/vant/#/zh-CN/intro 1、创建VUE项目之后进入项目目录运行安装命令：npm i vant -S2、安装 babel-plugin-import 插件，babel-plugin-import 是一款...
fetch的由来和定义 fetch的由来 众所周知，传统 Ajax （指 XMLHttpRequest）是最早出现的发送异步请求技术，其核心是使用XMLHttpRequest对象。但是它也存在一些令人头疼的问题：XHR 是一个设计粗糙的 API，不符合关注分离的原则；配置和调用方式非常混乱，而且基于事件的异步模型写起来也没有现代的 Promise，generator/yield，async/await 友好。而Fetch 的出现就是为了解决 XHR 存在的问题。 fetch的定义和使用 MDN中的描述...
背景 今天在开发限时练-提分加项目的时候，有一个需要锚点定位的需求，而在Vue项目中，使用传统的在a标签的href属性中写id的方法无效，会导致浏览器的地址改变从而跳转到其他页面。解决 最终参考vue2.0中怎么做锚点定位改问题下的回答实现了效果。 <template> <div class="score-preview-container"><div class="content-box"><div class="content-page-box"><GlobalAnalysis :id="#anchor-0" /><ErrorMerge :id="#anchor-1" /><Do...
步骤一：申请百度地图密钥； JavaScript API v1.4以及以前的版本无序申请秘钥（ak），自v1.5版本开始需要先申请秘钥（ak），才可以使用，如需获取更高的配额，需要申请 认证企业用户。百度地图API 链接地址:http://lbsyun.baidu.com/apiconsole/key 步骤二：在index.html中添加百度地图JavaScript API接口； <script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script> // v1.4版本以及以前版本 <sc...
问题 单页面应用的一个问题就是首页加载东西过多，加载时间过长。特别在移动端，单页面应用的首屏加载优化更是绕不开的话题。下面我会写出我在项目中做的一些优化，希望大家能够相互讨论，共同进步。 我的项目 vue-cli3构建的，vue+vue-router+vuex，UI框架选用 element-ui，ajax方案选用 axios，服务器使用Nginx 。用到的这些技术都是现在用的比较广泛的，看到这篇文章，我估计你和我用的技术应该差不多。 第一步：webpack-bundle...
最近要写个弹框，发现element-ui弹框样式还可以，就copy下来改吧改吧。也不分步骤详细介绍了直接上代码。 在组件目录中新建文件夹message 我把message目录里的东西给大家贴出来message文件夹src文件夹 index.jsimport Message from ./src/main.js; export default Message;mian.jsimport Vue from vue; import Main from ./main.vue; let MessageConstructor = Vue.extend(Main); let instance; let instances = []; let seed = 1;...
在生成vue项目的时候，出现如下错误ERROR in static/js/index.d66d806fcdd72b36147b.js from UglifyJs Unexpected token: punc (() [src/components/Hello.vue:26,0][static/js/index.d66d806fcdd72b36147b.js:34,6] ERROR in static/js/cell.89bb6f1195b769a2c949.js from UglifyJs Unexpected token: punc (() [src/components/cell.vue:10,0][static/js/cell.89bb6f1195b769a2c949.js:19,6] ERROR in [copy-webpack-plugin] una...
项目需求中需要对用户登录时的密码进行加密，在网上查询些许文章后，最终与后端协商使用jsencrypt.js。 jsencrypt.js的github地址： https://github.com/travist/js... 使用yarn安装至Vue项目 yarn add jsencrypt --dep 或者使用npm npm install jsencrypt --dep 引入jsencrypt import { JSEncrypt } from 'jsencrypt' 可封装为全局混合，便于调用 公钥为后端提供，如前端需要解密数据，则需要后端提供私钥。此处只封装了加密。 me...
当Vue项目完成后，在根目录下打开命令行，输入命令： npm run build 实际上此命令就是执行build.js文件，将项目打包成静态资源。 此命令完成后，项目根目录下会多出一个dist文件夹，dist文件里面有：static文件下包括项目打包后的css、js、img、fonts(字体图标)。 项目资源无法加载 点击index.html,浏览器显示该页面是空白的。打开控制台看到index.html文件中没有加载任何css、js文件。 解决方法： 打开项目根目录config下的index....
Excel 导出 Excel 的导入导出都是依赖于js-xlsx来实现的。 在 js-xlsx的基础上又封装了Export2Excel.js来方便导出数据。 使用 由于 Export2Excel不仅依赖js-xlsx还依赖file-saver和script-loader。 所以你先需要安装如下命令：npm install xlsx file-saver -S npm install script-loader -S -D 由于js-xlsx体积还是很大的，导出功能也不是一个非常常用的功能，所以使用的时候建议使用懒加载。使用方法如下： import(@/vendor/Expor...
snapshot介绍snapshot测试又称快照测试，可以直观地反映出组件UI是否发生了未预见到的变化。snapshot如字面上所示，直观描述出组件的样子。通过对比前后的快照，可以很快找出UI的变化之处。 第一次运行快照测试时会生成一个快照文件。之后每次执行测试的时候，会生成一个快照，然后对比最初生成的快照文件，如果没有发生改变，则通过测试。否则测试不通过，同时会输出结果，对比不匹配的地方。 jest中的快照文件以为snap拓展名结尾...