前言 首先我们可以把多页应用理解为由多个单页构成的应用，而何谓多个单页呢？其实你可以把一个单页看成是一个 html 文件，那么多个单页便是多个 html 文件，多页应用便是由多个 html 组成的应用，如下图所示既然多页应用拥有多个 html ，那么同样其应该拥有多个独立的入口文件、组件、路由、 vuex 等。没错，说简单一点就是多页应用的每个单页都可以拥有单页应用 src 目录下的文件及功能，我们来看一下一个基础多页应用的目录结构...
Netlify 带有内置表单处理功能，可以用来存储表单数据，下载 csv 文件，同时可以在接收到新的提交时发送邮件通知或者通过配置 webhook 发送请求。 它是通过在部署应用时直接解析 HTML 文件，识别 html 中的 form 标签来实现的，本文记录如何在一个 Vue 应用中使用表单功能。 开发首先使用@vue/cli 新建一个 Vue 应用，完成一系列步骤后，运行应用 vue create my-awesome-app ... yarn serve创建一个 form 表单 <!--data-netlify="t...
之前开发项APP项目直接用APICloud+原生js的方式进行编写，整个项目下来发现开发慢，页面代码多且复杂，维护起来相对困难，而且文件大打包之后的APP会比较大，apicloud的框架也不好用，支持部分es67(像let、const、import等es6新特性不支持写的太难受了) 采用vue-cli+APIcloud的方式写解决以上痛点，开发灵活，并且打包之后体积更小速度更快 环境依赖 vuewebpackvue-cli3nodeJS基本流程 项目开发最好准备两个项目，一个打包APP，一...
本人主要做c#winform应用，刚接触vue，发现用vue做单页面应用的比较多，多页面的资料很少，特别是用vue3.0版本做多页面的资料，更少，所以自己整理一下，结合bootstrap和jquery，也可以给有需要的同行做个参考。 1.首先用 vue --version 命令查一下安装的vue-cli版本，要3.x版本，我原先装的是2.9.6版本的2.卸载vue-cli,执行命令：cnpm uninstall -g vue-clinpm uninstall -g vue-cli ,执行完就好了 3.安装vue-cli3.x版本：cnpm in...
公司前端界面用的是vue，我要嵌入到Android中生成App第一步：安装nodenode安装：直接进入官网https://nodejs.org/zh-cn/，下载最新版本安装。安装之后在命令行中使用”node -v” 检查安装是否成功。npm安装：由于新版的nodejs已经集成了npm，所以node安装时npm也一并安装好了。同样可以通过输入 “npm -v” 来测试是否成功安装。第二步：安装cordova1. 打开cmd 输入命令：npm install -g cordova .安装cordova2. 验证是否安装成功，...
现在用VSCode开发Vue.js应用几乎已经是前端的标配了，但很多时候我们看到的代码混乱不堪，作为一个前端工程师，单引号双引号乱用，一段有分号一段没有分号，有的地方有逗号有的地方没有逗号，空格回车都对不齐，还说自己做事认真，这不是开玩笑的事情。我们今天从头开始，完整地讲述一下一个重度代码洁癖患者该如何用vscode开发vue，以及如何把一个已经可以宣判死刑的全身各种格式错误几万条的项目整容成标准美女。 从安装开始 为了...
单页应用其一个问题是首屏屏渲染速度较慢。这是因为页面首次加载时服务器将向客户端发送大量JavaScript，在屏幕上显示任何内容之前必须下载并解析。可以想象，随着应用程序规模的扩大，这个问题对用户体验的影响也会越来越突出。 现在幸运的是，当使用Vue CLI构建Vue应用程序时（使用webpack），可以采取一些措施来抵消这种情况。在本文中，我将演示如何在应用程序的初始渲染之后使用 异步组件 和webpack的代码分割功能加载到页面的...
说明 一直想做一个基于VUE的项目,但是因为项目往往要涉及到后端的知识(不会后端真的苦),所以就没有一直真正的动手去做一个项目。 直到发现GitHub上有网易云音乐的api NeteaseCloudMusicApi ,才开始动手去做。 仅仅完成了首页,登入，歌单，歌曲列表页。 项目地址https://github.com/qp97vi/music 项目成功运行还要把后端api在本地运行 前端技术栈 vue2+vuex+vue-router+axios+mint-ui+webpack 遇到的问题 1.前端路由拦截 想做一个登...
1 动态设置页面标题 页面标题是由 <title></title> 来控制的，因为 SPA 只有一个 HTML，所以当切换到不同的页面时，标题是不会发生变化的。必须通过 JavaScript 来修改 <title></title> 中的内容： window.document.title ='xxx'有一种思路是在每个页面的 *.vue 的 mounted 钩子函数中，通过 JavaScript 来修改 <title></title> 中的内容。这种方式固然可行，但如果页面很多，就会显著增加维护成本，而且修改逻辑都是一样的。有没有...
随着各大前端框架的诞生和演变，SPA开始流行，单页面应用的优势在于可以不重新加载整个页面的情况下，通过ajax和服务器通信，实现整个Web应用拒不更新，带来了极致的用户体验。然而，对于需要SEO、追求极致的首屏性能的应用，前端渲染的SPA是糟糕的。好在Vue 2.0后是支持服务端渲染的，零零散散花费了两三周事件，通过改造现有项目，基本完成了在现有项目中实践了Vue服务端渲染。 关于Vue服务端渲染的原理、搭建，官方文档已经讲的...
1、创建工程 npm install --global vue-cli 安装脚手架 vue init webpack vue-adminlte 初始化webpack 项目 cd vue-adminlte 切换项目文件夹下 npm install 安装依赖库 npm run dev 运行项目2、安装 jquery npm install jquery —save-dev并在build/webpack.base.conf.js中， 引入webpack var webpack = require(webpack);以及在当前文件下找到 module.exports 中 》resolve 〉alias 增加 如下 alias: { vue$: vue/dist/vue.esm.js...
什么是骨架屏？ 简单的说，骨架屏就是在页面未渲染完成的时候，先用一些简单的图形大致勾勒出页面的基本轮廓，给用户造成页面正在加载的错觉，待页面渲染完成之后再用页面替换掉骨架屏，从而减少页面白屏的时间，给用户带来更好的体验。分析VUE渲染过程 使用vue-cli3.0创建项目： vue create project 在生成的项目文件夹下的public文件夹下的index.html文件代码如下： <!DOCTYPE html> <html lang="en"><head><meta ch...
#在切换路由时，组件会被复用，不过，这也意味着组件的生命周期钩子不会再被调用。解决办法有两种，1简单地 watch (监测变化) $route 对象： const User = {template: ...,watch: {$route (to, from) {// 对路由变化作出响应...}} } 2.使用 2.2 中引入的 beforeRouteUpdate 导航守卫： const User = {template: ...,beforeRouteUpdate (to, from, next) {// react to route changes...// dont forget to call next()} }#全局...
1.订单提交地址等组件的应用。 使用的组件有如下： import {Card,button,Toast,AddressList,Popup,AddressEdit,Area} from vant主要是配货地址编辑这块；<van-address-edit:area-list="areaList":address-info="addressInfo"show-postalshow-deleteshow-set-defaultshow-search-result@save="onSave"@delete="onDelete"@change-detail="onChangeDetail"/> 地址编辑。没有用默认的地址编辑属性：search-resultsearch-result详细地址...
问题描述： 手头有一个项目是使用 vue-cli 搭建的单页面应用。项目分为了管理平台和用户查看页面，用户查看页面是很简单的页面，但是在加载过程中，却加载了整个应用的打包代码，量重且影响了响应和体验。我想要的效果是，查看页面只加载查看页面的代码，不包含管理系统的代码，因此着手将单页面应用改造成多页面应用，这里分享下方法。 1、改造文件目录 改造前：改造后：assets：这里不变，依然放置公用的静态资源文件；component...