【腾讯Bugly干货分享】基于 Webpack Vue Vue-Router 的 SPA 初体验

2024-03-23 18:58
文章标签 javascript vue 分享 router frontend 腾讯 干货 webpack 初体验 bugly spa

本文主要是介绍【腾讯Bugly干货分享】基于 Webpack Vue Vue-Router 的 SPA 初体验，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

本文来自于腾讯bugly开发者社区，非经作者同意，请勿转载，原文地址：http://dev.qq.com/topic/57d13a57132ff21c38110186

导语

最近这几年的前端圈子，由于戏台一般精彩纷呈，从 MVC 到 MVVM，你刚唱罢我登场。 backbone，angularjs 已成昨日黄花，reactjs 如日中天，同时另一更轻量的 vue 发展势头更猛，尤其是即将 release 的2.0版本，号称兼具了 angularjs 和 reactjs 的两者优点。不过现在的官方版本还是1.0 ，下面就是基于1.0版本的初体验。

1. 为什么要 SPA？

SPA： 就是俗称的单页应用（Single Page Web Application）。

在移动端，特别是 hybrid 方式的H5应用中，性能问题一直是痛点。 使用 SPA，没有页面切换，就没有白屏阻塞，可以大大提高 H5 的性能，达到接近原生的流畅体验。

2. 为什么选择 vue？

在选择 vue 之前，使用 reactjs 也做过一个小 Demo，虽然两者都是面向组件的开发思路，但是 reactjs 的全家桶方式，实在太过强势，而自己定义的 JSX 规范，揉和在 JS 的组件框架里，导致如果后期发生页面改版工作，工作量将会巨大。

vue 相对来说，就轻量的多，他的view层，还是原来的 dom 结构，除了一些自定义的 vue 指令作为自定义标签以外，只要学会写组件就可以了，学习成本也比较低。

3. 环境配置

初始化工程，需要 node 环境使用 npm 安装相应的依赖包。

先创建一个测试目录，在里面依次输入以下命令。

//初始化package.json
npm init//安装vue的依赖
npm install vue --save
npm install vue-router --save//安装webpack的开发依赖
npm install webpack --save-dev//安装babel的ES6 Loader 的开发依赖
npm install babel --save-dev
npm install babel-core --save-dev
npm install babel-loader --save-dev
npm install babel-preset-es2015 --save-dev//安装html loacer 的开发依赖
npm install html-loader --save-dev

4. 目录结构

src 为开发目录，其中 components 为组件子目录，templates 为模板子目录。

dist 为构建出的文件目录。

index.html 为入口文件。

package.json 为项目描述文件，是刚才 npm init 所建立。

webpack.config.js 是 webpack 的构建配置文件

5. Webpack 配置

下面是 webpack 的配置文件，如何使用 webpack，请移步 webpack 的官网。

var webpack= require("webpack");module.exports={entry:{bundle:[ "./src/app.js"]},output:{path:__dirname,publicPath:"/",filename:"dist/[name].js"},module:{loaders:[{test: /\.html$/, loaders: ['html']},{test: /(\.js)$/, loader:["babel"] ,exclude:/node_modules/, query:{presets:["es2015"]}}]},resolve:{},plugins:[/* new webpack.optimize.UglifyJsPlugin({compress: {warnings: false}})*/]
}

6. 入口文件

index.html

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue Router Demo</title>
</head>
<body><div id="app"><router-view></router-view></div><script src="dist/bundle.js"></script>
</body>
</html>

其中 id 为 app 的 div 是页面容器，其中的 router-view 会由 vue-router 去渲染组件，讲结果挂载到这个 div 上。

app.js

var Vue = require('vue');
var VueRouter = require('vue-router');Vue.use(VueRouter);
Vue.config.debug = true;
Vue.config.delimiters = ['${', '}']; // 把默认的{{ }} 改成ES6的模板字符串 ${ }
Vue.config.devtools = true;var App = Vue.extend({});
var router = new VueRouter({});router.map(require('./routes'));
router.start(App, '#app');
router.go({"path":"/"});

这是 vue 路由的配置。 其中由于习惯问题，我把 vue 默认的{{ }} 改成了的 ${ } ,总感觉这样看模板，才顺眼一些。

routes.js

module.exports = {'/': {component: require('./components/index')},'/list': {component: require('./components/list')},'*': {component: require('./components/notFound')}
}

7. 第一个组件

components/index.js

module.exports = {template: require('../templates/index.html'),ready: function () {}
};

templates/index.html

<h1>Index</h1>
<hr/>
<p>Hello World Index!</p>

执行 webpack 构建命令

浏览器中访问：

查看 bundle 源码：

发现 template 模板文件，已经被 webpack 打成字符串了。这其中，其实是 webpack 的 html-loader 起的作用

8. 组件之间跳转

修改刚才的 index 组件，增加一个跳转链接，不用 href 了，要用 vue 的指令 v-link。

<h1>Index</h1>
<hr/>
<p>Hello World Index!</p>
<p><a v-link="{path:'/list'}" >List Page</a></p>

添加 list 组件

components/list.js

module.exports = {template: require('../templates/list.html'),data:function(){return {items:[{"id":1,"name":"hello11"},{"id":2,"name":"hello22"}]};},ready: function () {}
};

templates/list.html

<h1>List</h1>
<hr/><p>Hello List Page!</p>
<ul><li v-for="(index,item) in items">${item.id} : ${item.name}</li>
</ul>

v-for 也是 vue 的默认指令，是用来循环数据列表的。

现在开始执行 webpack –watch 命令进行监听，这样就不用每次敲 webpack 命令了。只要开发者每次修改 js 点了保存，webpack 都会自动构建最新的 bundle 文件。

浏览器里试试看：

index 页

点击 List Page 跳转到 list 页

Bingo！ 单页面两个组件之间跳转切换成功！

9. 组件生命周期

修改 componets/list.js 

module.exports = {template: require('../templates/list.html'),data:function(){return {items:[{"id":1,"name":"hello11"},{"id":2,"name":"hello22"}]};},//在实例开始初始化时同步调用。此时数据观测、事件和 watcher 都尚未初始化init:function(){console.log("init..");},//在实例创建之后同步调用。此时实例已经结束解析选项，这意味着已建立：数据绑定，计算属性，方法，watcher/事件回调。但是还没有开始 DOM 编译，$el 还不存在。created:function(){console.log("created..");},//在编译开始前调用。beforeCompile:function(){console.log("beforeCompile..");},//在编译结束后调用。此时所有的指令已生效，因而数据的变化将触发 DOM 更新。但是不担保 $el 已插入文档。compiled:function(){console.log("compiled..");},//在编译结束和 $el 第一次插入文档之后调用，如在第一次 attached 钩子之后调用。注意必须是由 Vue 插入（如 vm.$appendTo() 等方法或指令更新）才触发 ready 钩子。ready: function () {console.log("ready..");},//在 vm.$el 插入 DOM 时调用。必须是由指令或实例方法（如 $appendTo()）插入，直接操作 vm.$el 不会 触发这个钩子。attached:function(){console.log("attached..");},//在 vm.$el 从 DOM 中删除时调用。必须是由指令或实例方法删除，直接操作 vm.$el 不会 触发这个钩子。detached:function(){console.log("detached..");},//在开始销毁实例时调用。此时实例仍然有功能。beforeDestroy:function(){console.log("beforeDestroy..");},//在实例被销毁之后调用。此时所有的绑定和实例的指令已经解绑，所有的子实例也已经被销毁。如果有离开过渡，destroyed 钩子在过渡完成之后调用。destroyed:function(){console.log("destroyed..");}};

在浏览器里执行了看看：

首次进入 List 页面的执行顺序如下：

此时点一下浏览器的后退，List Component 会被销毁，执行顺序如下：

这是官方的生命周期的图：

10. 父组件与子组件

在很多情况下，组件是有父子关系的，比如 list 列表组件有个子组件 item

components/item.js

module.exports = {template: require('../templates/item.html'),props:["id","name"],ready: function () {}
};

templates/item.html

<p>我是subitem： ${id} - ${name}</p>

修改 list 组件，添加 item 的引用

components/list.js

//引用item组件
import item from "./item";module.exports = {template: require('../templates/list.html'),data:function(){return {items:[{"id":1,"name":"hello11"},{"id":2,"name":"hello22"}]};},//定义item组件为子组件components:{"item":item},ready: function () {}};

templates/list.html

<h1>List</h1>
<hr/>
<p>Hello List Page!</p>
<ul><li v-for="(index,item) in items"><!--使用item子组件，同时把id,name使用props传值给item子组件--><item v-bind:id="item.id" v-bind:name="item.name"></item></li>
</ul>

浏览器里试试看：

子组件成功被调用了

11. 组件跳转传参

组件之间的跳转传参，也是一种非常常见的情况。下面为列表页，增加跳转到详情页的跳转，并传参 id 给详情页

修改路由 routes.js

module.exports = {'/': {component: require('./components/index')},'/list': {component: require('./components/list')},//增加详情页的跳转路由，并在路径上加上id传参，具名为name：show'/show/:id': {name:"show",component: require('./components/show')},'*': {component: require('./components/notFound')}
}

添加组件 show

components/show.js

module.exports = {template: require('../templates/show.html'),data:function(){return {};},created:function(){//获取params的参数IDvar id=this.$route.params.id;//根据获取的参数ID，返回不同的data对象（真实业务中，这里应该是Ajax获取数据）if (id==1){this.$data={"id":id,"name":"hello111","age":24};}else{this.$data={"id":id,"name":"hello222","age":28};}},ready: function () {console.log(this.$data);}};

templates/show.html

<h1>Show</h1>
<hr/><p>Hello show page!</p><p>id:${id}</p>
<p>name:${name}</p>
<p>age:${age}</p>

修改 templates/item.html

<p>我是subitem： <a v-link="{name:'show',params: { 'id': id } }"> ${id} : ${name}</a> </p>

这里 name:’show’ 表示具名路由路径，params 就是传参。

继续浏览器里点到详情页试试：

点击“hello11”，跳转到详情页：

传参逻辑成功。

12. 嵌套路由

仅有路由跳转是远远不够的，很多情况下，我们还有同一个页面上，多标签页的切换，在 vue 中，用嵌套路由，也可以非常方便的实现。

添加两个小组件

components/tab1.js

module.exports = {template: "<p>Tab1 content</p>"
};

components/tab2.js

module.exports = {template: "<p>Tab2 content</p>"
};

修改 components/index.js 组件，挂载这两个子组件

import tab1 from "./tab1";
import tab2 from "./tab2";module.exports = {template: require('../templates/index.html'),components:{"tab1":tab1,"tab2":tab2},ready: function () {}
};

在路由里加上子路由

module.exports = {'/': {component: require('./components/index'),//子路由subRoutes:{"/tab1":{component:require('./components/tab1')},"/tab2":{component:require('./components/tab2')}}},'/list': {component: require('./components/list')},'/show/:id': {name:"show",component: require('./components/show')},'*': {component: require('./components/notFound')}}

好了，在浏览器里试一下：

初始状态：

点了 tab1，tab2：

Tab 切换没问题，可是，初始状态显示是空的，能不能默认显示 Tab1 Content 呢？很简单，调整下路由就可以了：

module.exports = {'/': {component: require('./components/index'),//子路由subRoutes:{//默认显示Tab1"/":{component:require('./components/tab1')},"/tab1":{component:require('./components/tab1')},"/tab2":{component:require('./components/tab2')}}}
}

13. 业界 vue 使用案例

小米移动官网：http://m.mi.com/1/#/index

饿了吗招聘：https://jobs-mobile.ele.me/#!/

更多精彩内容欢迎关注bugly的微信公众账号：

腾讯 Bugly是一款专为移动开发者打造的质量监控工具，帮助开发者快速，便捷的定位线上应用崩溃的情况以及解决方案。智能合并功能帮助开发同学把每天上报的数千条 Crash 根据根因合并分类，每日日报会列出影响用户数最多的崩溃，精准定位功能帮助开发同学定位到出问题的代码行，实时上报可以在发布后快速的了解应用的质量情况，适配最新的 iOS, Android 官方操作系统，鹅厂的工程师都在使用，快来加入我们吧！

这篇关于【腾讯Bugly干货分享】基于 Webpack Vue Vue-Router 的 SPA 初体验的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/839231。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya（不是本人，claude AI）在社交媒体上分享了他在OpenAI学习到的15个Prompt撰写技巧。 以下是详细的内容： 提示精确化:在编写提示时,力求表达清晰准确。清楚地阐述任务需求和概念定义至关重要。例:不用"分析文本",而用"判断这段话的情感倾向:积极、消极还是中性"。 快速迭代:善于快速连续调整提示。熟练的提示工程师能够灵活地进行多轮优化。例:从"总结文章"到"用
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
【专题】2024飞行汽车技术全景报告合集PDF分享（附原数据表）

【专题】2024飞行汽车技术全景报告合集PDF分享（附原数据表）

原文链接： https://tecdat.cn/?p=37628 6月16日，小鹏汇天旅航者X2在北京大兴国际机场临空经济区完成首飞，这也是小鹏汇天的产品在京津冀地区进行的首次飞行。小鹏汇天方面还表示，公司准备量产，并计划今年四季度开启预售小鹏汇天分体式飞行汽车，探索分体式飞行汽车城际通勤。阅读原文，获取专题报告合集全文，解锁文末271份飞行汽车相关行业研究报告。 据悉，业内人士对飞行汽车行业
阅读更多...
计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者：计算机编程-吉哥 🍊简介：专业从事JavaWeb程序开发，微信小程序开发，定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事，生活就是快乐的。 🍊心愿：点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能
阅读更多...
Vue3项目开发——新闻发布管理系统（六）

Vue3项目开发——新闻发布管理系统（六）

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后，系统就进入了首页。接下来，也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分，左侧为系统的菜单栏，右侧
阅读更多...
【VUE】跨域问题的概念，以及解决方法。

【VUE】跨域问题的概念，以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略，该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同，则需要服务器显式地允许这种跨域请求。一般在springbo
阅读更多...
HTML提交表单给python

HTML提交表单给python

python 代码 from flask import Flask, request, render_template, redirect, url_forapp = Flask(__name__)@app.route('/')def form():# 渲染表单页面return render_template('./index.html')@app.route('/submit_form',
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2