vue入坑笔记（持续更新）

tanglijun 发布于2019-08-21 18:28 / 3209人阅读

摘要：如果我们能把不同路由对应的组件分割成不同的代码块，只在路由被访问的时候才加载对应的组件，这样就更加高效了。这样会大大提高首屏显示的速度，但是可能其他的页面的速度就会降下来。

一、代码分割,让页面按需加载，加快首屏速率

vue.js构建单页应用虽然能通过路由来实现多页面效果，但是实际上打包后所有的代码都只有一个入口文件app.bundle.js,当项目变得十分庞大的时候，app.bundle.js文件就会非常大，而且用户没有访问到的页面代码也包含在其中，使得首页加载时间延长，非常影响性能和用户体验。
如果我们能把不同路由对应的组件分割成不同的代码块，只在路由被访问的时候才加载对应的组件，这样就更加高效了。这样会大大提高首屏显示的速度，但是可能其他的页面的速度就会降下来。结合Vue的异步组件和webpackde code splitting feature,我们就轻松实现路由组件的懒加载。

方法很简单，只需要在路由配置中改变模块的引入方式，比如未修改的index模块引入是这样的：

import Indexfrom "components/index/index"

修改后(其他路由引入类似)：

const Index = (resolve) => {
  import("components/index/index").then(module => {
    resolve(module)
  })
}

二、将vue项目部署到nginx,刷新页面跳转到404错误页面的问题

location / {
    alias D:dist;
    try_files $uri $uri/ /index.html;
}

多个vue项目共享一个域名的方法

index.html文件添加

config/index.js文件

3.src/router/index.js文件

Nginx配置修改

将编译好的dist文件夹放在磁盘任意位置，比如D盘

三、axios.js post application/x-www-form-urlencoded参数问题

自己遇到过的坑，引用别人写的
请求的方法：

self.axios.post(url, {a: 1, b:2}, {
  headers: {
    "Content-Type": "application/x-www-form-urlencoded",
  },
}).then(response => response.data)
  .then(data => {
    console.log(data);
  });

这个Form Data后台取不到数据，正常的Form Data数据不是应该是健值对的么，像下面这样：

解决办法：发送数据前对data进行qs.stringify(data)处理：

var qs = require("qs");
axios.post("/foo", qs.stringify({ "bar": 123 });

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90504.html

Vue入坑笔记

摘要：近段时间常使用开发，写点记录，避免时间久之忘了。安装教程查看是否已安装，在中输入若已安装则输出版本号。继承报错可能是文件路径问题。当和继承的不同时在文件夹内外的话，会出现该错误。近段时间常使用vue-cli开发，写点记录，避免时间久之忘了。环境 1. nodejs　　vue-cli开发基于nodejs环境，确保开发的环境中已安装了nodejs。　　安装教程 https://www....

superw 2019-08-26 12:16 评论0 收藏0
一个JAVA WEB伪全栈的VUE入坑随笔，从零点零五学起

摘要：开始时间日接触，先在官网十目一行学完了基本特性，作为一个的伪全栈，用感受了一把双向绑定，感觉比的要强悍不少，但这开发环境吧，不能写个，就总觉得自己不能零距离接触。开始时间：3.26日接触Vue，先在官网十目一行学完了基本特性：http://cn.vuejs.org/v2/guide/，作为一个JAVA WEB的伪全栈，用Myclipse感受了一把双向绑定，感觉比JQUERY的JSRE...

HmyBmny 2019-08-21 15:33 评论0 收藏0
前端入坑指南

摘要：作为自学两年的初级前端，希望对那些想入门前端开发的人分享一些观点。尤其是这几年前端领域飞速的发展，新东西层出不穷。或者关注下我的微信公众号前端获取每天分享前端入门知识。为什么选择前端做一件事之前最好问问自己为什么要做，然后再去思考该怎么做。如果只是看到别人做了，并且有很不错的收入，然后自己就决定做了，很可能中途放弃浪费掉很多时间。起码问自己一个问题：我是否真的热爱这个领域，并且很乐意在这个...

junnplus 2019-05-22 15:27 评论0 收藏0
Vuex 升级入坑小记

摘要：升级入坑小记场景描述引入的版本为，开启调试工具默认升级后可以调试。遂升级，发现大量使用失效，报，的中文文档，没有及时更新。机票订单和用户信息。 Vuex 升级入坑小记场景描述引入Vuex的版本为0.3，开启调试工具默认升级后可以调试Vuex。给作者一个大大的赞。为提高开发体验也是操碎了心 (๑•̀ㅂ•́)و✧ (8。安利下(Vue Devtools）。 Vue Devtools ...

ziwenxie 2019-08-19 17:56 评论0 收藏0
一个JAVA WEB伪全栈的VUE入坑随笔:从登录开始（VUEX）

摘要：此文章用于记录本人学习历程，有共同爱好者可加好友一起分享。从上周天，由于本周有公司篮球比赛，所以耽误两天晚上，耗时三个晚上勉强做了一个登录功能。这里的用户信息和登录状态都是直接取的中的用户信息进行属性值初始化。此文章用于记录本人VUE学习历程，有共同爱好者可加好友一起分享。从上周天，由于本周有公司篮球比赛，所以耽误两天晚上，耗时三个晚上勉强做了一个登录功能。中间的曲折只有自己知道，有...

Zack 2019-08-20 15:47 评论0 收藏0