用vue.js和vue-router重构一个网站

news/2024/5/10 6:56:20/文章来源:https://blog.csdn.net/weixin_35987513/article/details/54730051

拿了个以前的项目做练手,用了vue-cli,vue-router,vuex。主要还是想学习一下webpack和单文件组件的思想。不过代码写得其实挺匆忙,感觉还有很多地方还能改进,组件化思想还是不能很好的掌握。
github地址:https://github.com/fshwc/vuedemo-mpacc
这里写图片描述

vue-lic和webpack

很久以前我就看了webpack,但是因为还挺新的,大多资源都是英文,所以除我跟着网上做做demo没实际尝试过。但是vue我也学到了一定阶段,该进入进阶阶段了。vue-cli其实帮我们构建好一切了,一句vue init webpack-simple vuedemo就o了~,但是。。我知道其实webpack还有很多我不懂得功能的。搭好框架后一句webpack-dev-server就能把项目跑起来了。
webpack打包需要指定入口文件,这个其实指定多少个入口都无所谓的,但是要改出口哦~

//单入口 webpack.config.js
module.exports = {entry: './main.js',output: {filename: 'bundle.js'}
};//多入口
module.exports = {entry: {bundle1: './main1.js',bundle2: './main2.js'},output: {filename: '[name].js'}
};

但是这项目能这么想,我把首页做唯一的入口文件,那么跳转的时候我再异步加载相应的模块,所以这次我只用了一个入口文件main.js。
当我没了解清楚的时候,会想把整个项目都打包成一个js啊,那这个js不就很大,加载很慢吗,但是有一东东叫懒加载,结合 Vue 的 异步组件 和 Webpack 的 code splitting feature, 轻松实现路由组件的懒加载 http://router.vuejs.org/zh-cn/advanced/lazy-loading.html

单文件组件

单文件组件思想就是为了更好的组件化开发。
什么是 组件化开发呢? https://www.zhihu.com/question/29735633?sort=created

页面上的每个 独立的 可视/可交互区域视为一个组件;
每个组件对应一个工程目录,组件所需的各种资源都在这个目录下就近维护;
每个组件相对独立,页面只不过是组件的容器,组件自由组合形成功能完整的界面;
当不需要某个组件,或者想要替换组件时,可以整个目录删除/替换。

现在我自认还没理解好组件化开发,只是把相同功能的组件放在同一个目录下而已。vuex建议的项目结构。。。http://vuex.vuejs.org/zh-cn/structure.html。不知道这个是不是分太细。。。不过我相信一个项目足够大的时候,这样布局或许会更好~

项目介绍

用vue重构了校内网,页面跳转用了vue-router,我还暂时用了下vuex,但是其实这个是多余的。。。。本来想运用vuex代替连接数据库查询后返回数据,但是没找到合适的运用方式。所以不是每个项目都需要vuex,尤大大也提醒在项目需要的时候再用。等过完年,我看看webpack怎么结合Express,用vue-resource发起请求,连接数据库并返回数据,继续完善~~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_902791.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在线DOC转PDF网站

http://www.freepdfconvert.com 速度很快,感觉也不错,零外推荐使用wps ,因为WPS里面就有一个直接DOC转PDF的按钮,WPS现在发展确实不错,不但完全兼容office而且安装程序小,运行速度快,标签式页面&#xff0c…

一步步构建大型网站架构

原文: blog.csdn.net/luqin1988/article/details/8983697 之前我简单向大家介绍了各个知名大型网站的架构,亿万用户网站MySpace的成功秘密、Flickr架构、YouTube网站架构、PlentyOfFish 网站架构学习、WikiPedia技术架构学习笔记。这几个都很典型&#x…

解决打开GitHub网站格式不正确的问题

第一步 运行c:\windows\system32\drivers\etc 第二步 打开hosts文件 第三步 添加185.31.17.184 github.global.ssl.fastly.net 保存,从新打开浏览器即可

【0024】网站中保存密码,有可能被盗哦!

在自己电脑还没事,别的电脑保存密码,就会有危险了。 按F12打开开发者工具,用指针工具点击密码框,弹出密码框html代码,里面有type“password”,只要把passwotd改为text,就可以显示密码。。。尴尬…

[实战]黑帽SEO的RayFile排名做法

RayFile平台 黑帽SEO 实战排名做法视频教程-养殖行业 RayFile和我们之前公布的黑帽大型平台排名程序相似,也是利用第三方平台进行排名,客服电话首选,比如XXX开户,哪里有XXX,**XXX等信息,然后留一个电话号码及QQ,是电…

ailess给您介绍互联网黑帽seo技术

对黑帽SEO还比较陌生的同学可以先看看百度百科对黑帽seo的定义:黑帽技术是指在seo优化中通过黑帽seo培训获取一些类似于“作弊”的方法或技术手段,在短时间内以非平常的正常SEO优化手法来获得较好的搜索引擎优化的一种黑帽seo技术。黑帽SEO的主要的特点就…

什么是seo?seo的定义

SEO既SearchEngineOptimization,翻译为搜索引擎优化,是一种利用技术手段提升网站在搜索引擎之中的排名的方式,让搜索引擎更为信任网站,通过排在搜索引擎的前页从而获得更多的流量。SEO是指通过对网站内部调整优化及站外优化&#…

响应式网站切图实操-姜威-专题视频课程

响应式网站切图实操—7236人已学习 课程介绍 本课程讲以互动的方式与学员共同打造一个网站,从创意开始,一直到整体页面被呈现出来。从原生的方式到主流的UI开发过程。一切从零开始,只要你有HTML5基础,通过22学时的努力&#x…

Tomcat 发布部署jsp网站—-使用自己的ip访问jsp网站

最近我们做了个李宁的jsp项目,做完之后想在我们局域网的电脑上访问,并且通过这台机器的ip地址访问,通过多次配置,终于成功,以下是配置的过程。 一,首先将工程打包,打成war包,点击右键…

几个画流程图的网站

3个在线画流程图/线框图的网站 Posted on 2011/08/15 by iworm 手头没有Visio,想画几张简单的流程图该怎么办呢? 这几个网站可以帮到你,都提供免费和收费版本。 1. Cacoo,基于Flash的画图网站,图上可输入中文。提供基本…

SEO细节很重要 优化网站就找上海知名的清法网络公司

提到网站优化,很多人第一时间想到的就是内容和外链。没错,网站优化内容和外链确实很重要。但是在优化网站的过程中,除了这些大问题,还需要注意一些的细节问题。其中,关键词分析是网站整体优化容易被忽视的一个环节&…

清法网络:提升网站排名,单靠外链可不行

做seo的都知道外链很重要,但是对于准备从事seo行业的小白,可能对外链还不是很了解。在这篇文章中,上海网站优化公司——清法网络科技有限公司将对外链的定义,以及外链的作用做一下简单的介绍。 外链,全称外部链接&…

清法网络:百度seo做好了,其他搜索引擎也会有排名吗

seo的工作,主要是研究搜索引擎的喜好和规律,将想要的内容呈现在搜索引擎合适的位置。很多seo初学者会有这么一个认知:“做seo就是做百度关键词优化”,这个观点,在上海seo企业网站优化公司清法网络看来,是片…

上海SEO排名公司清法网络告诉你,撰写文章的技巧有哪些?

在做SEO网站优化的过程中,很多企业都曾为网站的文章撰写而发愁。因为想要保证网站的收录并且获得关键字排名,稳定、频繁地更新高质量的文章是必须的。而这些文章想要获得搜索引擎的青睐,光凭复制、粘贴肯定不是行的,它还得融入一定…

浙江杭州SEO公司清法网络告诉你,搜索引擎优化对企业的意义

相信对于很多企业来说,都听说过SEO,知道它是一种利用搜索引擎规则,提高网站在有关搜索引擎内自然排名的方式。不过,这其中许多人对它都是一知半解,根本不明白SEO对企业意义有哪些。今天,搜索公关专家清法就…

关于网站搜索引擎优化技巧,杭州SEO公司清法网络有话说

提到江小白,相信很多人不是想到酒有多好喝,而是它的文案有多牛。曾有网友号称,江小白的文案月薪3万。然而,你真的认为江小白的成功是因为它的文案很牛吗?不,你错了,江小白的成功,实际…

如何一眼“看穿”对手网站?清法网络只用了这3招

俗话说知己知彼,方能百战不殆。在网络营销的战场上,身为萌新网站,如何在同行业竞争中脱颖而出,成为搜索引擎的“心头好”,日日霸占着首页、第二页、第三页……这就需要网站的SEO儿们,不仅要有自省自查之心&…

网站部署到阿里云服务器,连接neo4j数据库【从零开始】

之前网页都是在本地开发运行的,发布建站的经验从来没有,一点点摸索到现在,花了整整一天时间!记录一下从选购服务器开始的部署连服务器经验! 大概流程如下: 选购云服务器并配置购买域名并备案(…

访问所有HTTPS网站显示连接不安全 (火狐浏览器)

当 Firefox 连接到一个安全的网站时(网址最开始为“https://”),它必须确认该网站出具的证书有效且使用足够高的加密强度。如果证书无法通过验证,或加密强度过低,Firefox 会中止连接到这个网站,并显示“连接…

前端加薪必备:掌握这10个利于SEO优化的HTML标签吧

作为一位企业主或网站管理员,相信你一定听过SEO,也就是搜索引擎优化。这个东西的作用就是帮助你的网站在相关关键字的搜索引擎结果页面 (SERP) 上排名更靠前。而想要做到更好的SEO,就必须得对你网站的HTML代码有个透彻的理解。 所谓HTML&…