XHTMT
HTML5
CSS
HTML DOM
分享至
朋友圈
微信
qq空间
微博
复制
vue项目常用组件和框架结构介绍
作者: 大姐有钱就他娘的甩了你 来源: 51数据库 2021-11-08
vue项目基础结构
一个vue的项目，我觉得最小的子集其实就是{vue,vue-router,component}，vue作为基础库，为我们提供双向绑定等功能。vue-router连接不同的"页面"，component作为样式或者行为输出，你可以通过这三个东西来实现最基本的静态spa网站。当然我在这里不谈vue全家桶这样宽泛的概念，我会如数家珍的把主要的技术点一一列举。
八字财运财帛非定数、求财有玄机,解析流年财富运势,把握旺财机遇
1.vue-cli：搭建基本的vue项目骨架，脚手架工具
2.sass-loader&node-sass:我是使用的sass作为样式的预编译工具，两者缺一不可，大家也可以自行选择，less,stylus都可以
3.postcss:实现响应式布局的关键，px=>rem。大漠已经提出了基于vw,vh的布局方案，不过我暂时持观望态度。
4.vuex:管理复杂的数据流向，状态机工具，特化的flux
5.vuex-persistedstate:将vuex中state持久化的工具
6.vue-router:实现spa间“页面”之间的跳转
7.vue-lazyload:实现图片的懒加载，优化http传输性能
8.vue-awesome-swiper:轮播功能的实现及一些特殊切换效果的完成
9.better-scroll:实现列表滚动及父子组件间的滚动问题
10.axios:http工具，实现向api请求数据，以及拦截器的实现
外貌分析天象文化人工智能团队研发，利用传统面相知识和现代科技，实现人工智能看面相。
11.fastclick:解决300ms延迟的库
以上这些，都是我觉得一个中大型的vue项目需要用到的，还有一些比如我在实现图片上传中用到了jsx的语法，需要babel-jsx这样的东西，不具有普适性，就不例举了。
下面简述一下上面说到的这些东西，有的东西会单独的来出来细说：
1.vue-cli：
脚手架工具，当我们选择vue作为我们的开发技术栈以后，就要开始为我们的项目搭建目录及开发的环境。安装好node以后，通过以后命令进行安装
npm install -g vue-cli 将vue-cli安装到全局环境
vue init webpack my-vue-demo 创建基于webpack模板的名为my-vue-demo文件名的vue项目
这里的模板有6中，不过我们比较常用的就是webpack了。
宝宝起名参照生辰八字,结合三才五格原理,为宝宝起一个弥补五行,平衡八字的好名字
期间你会看到有一些例如e2e这样的单元测试的工具和eslint检测代码质量的工具，我觉得都是可以不必安装的。
那么，其实我们最关心的就是在src文件夹下面的内容了。可以看下图
上图就是一个在刨除vue-cli的基本结构，在项目上比较成熟的vue骨架了。
2&3 :sass,postcss
直接写css得洪荒时代已经过去了，预编译的样式处理器帮助我们解放了生产力，提高了效率。sass,less,stylus各有优缺，也各有信徒。
要使用sass的话，你需要安装一下sass-loader和node-sass，不过node-sass不是很好装，被墙的厉害，建议还是用taobao的镜像。如果安装完成后还是报错无法解析的话，你可能就需要去webpack.base.conf.js里去看看是否设置好了对应的loader。
缘份测试你们是命中注定的一对吗？你们适合做恋人还是朋友？
postcss的常用功能
px2rem =>可以帮助我们实现px到rem单位的转换，只需要你定义好相应的转换标准就可以了。
autoprefixer =>兼容性的处理postcss也可以帮我们处理好。
//vue-loader.conf.js
module.exports = {
loaders: utils.cssloaders({
sourcemap: isproduction
? config.build.productionsourcemap
: config.dev.csssourcemap,
extract: isproduction
}),
postcss: [
require('autoprefixer')({
browsers: ['ios >= 7', 'android >= 4.1']
}),
require('postcss-px2rem')
({ remunit: 64 })
]
}
4,5:vuex,vuex-persistedstate
一个中大型的vue项目，肯定有复杂的状态需要去管理。简单的event bus已经不再适用了。
特化的flux架构，vuex就迎头顶上。简而言之：他就是我们处理无论是用户操作，api返回，url变更等多重操作的状态管理工具。以后我会具体的说下vuex。
用过vuex的人，会发现一个很痛苦的地方，就是vuex里面的state，只要我们去刷新，它就被释放掉了。有的状态还好，没有了大不了我们可以让用户去重新操作一遍。但是像登录这样的操作，你不可能让用户刷一下就去登一下吧。当然，你会说，我们可以存到local啊，cookie里面啊。是可以！但是这样的话,state就和local里的数据形成了一种松散的关联，state显得十分的脆弱，因为你无法预知你什么时候会少写一个setstore这样的方法。vuex-persistedstate帮我们解决了这样的问题，它帮我们直接把state映射到了本地的缓存环境，我们可以在computed里面用vuex提供的mapstate辅助函数，来动态的更新local里面的数据。而不需要持久化的state，我们依旧可以刷新来释放掉。
测事业运解读八字密码,分析命局喜忌,揭示您一生命运、事业财帛、情感婚恋以及未来发展
6.vue-router
当我们使用vue来构建spa的应用时，就等于说我们完全的分离了前后端。或者通俗点的说：这就是一个纯前端的项目。后端仅仅提供数据，任何的逻辑都在前端实现。既然"脱离"了后端，那么肯定就没有request mapping这样的同步映射url了。那么，前端就需要router来实现我们前端"页面"的跳转。vue-router就帮我们做了这样的事情，他提供给了路由守卫给我们，我们可以设置全局的，组件内的路由守卫，来实现特定的业务逻辑。 提供过渡动画，来更加生动的展示spa应用应有的风采等等，这个以后也要具体的来说。
生肖运势20222022年对你是否有好的机遇？是否有机会暴富？是否合适创业？
7.vue-lazyload
实现图片的懒加载。这是前端性能优化的一个必须面对的问题：图片。懒加载可以减少请求的数量，而且在很直观的视觉上，也有一个良好的过渡。当然，图片我们也是需要去做一些处理的，使用webp格式来减小图片的质量，或者通过oss来对图片作处理。
8.vue-awesome-swiper
通过它可以实现基本轮播，横轴的切换，横轴的列表滚动等。
例如我要去实现四个tab切换这样的功能，但是简单的display这样的效果我又觉得不是很满意。那么我们就可以通过swiper来实现，每次tab里面的content都会对应swiper的一个swiper-item。切换的tab，其实就是swiper里面的next page或者before page.
流年运程2022解读八字密码,分析命局喜忌,揭示您一生命运、事业财帛、情感婚恋以及未来发展
data(){
return{
swiperoption: {
slidesperview :'auto',
direction: 'horizontal',
freemode : true,
loop: false,
spacebetween: 20,
},
}
}
<swiper :options="swiperoption" ref="swiper" v-if="list&&list.length !== 0">
<swiper-slide v-for="(item,index) in list" :key="index" class="hot-item">
<router-link :to="{name:'quickcar',params:{carid:item.carid}}" class="description_car">
<img v-lazy="item.attachments.length !==0 &&item.attachments[0].filepath"/>
<span>¥{{item.price}}/日</span>
</router-link>
</swiper-slide>
</swiper>
<p class="nodata" v-else></p>
9.better-scroll
实现纵轴列表的滚动，以及当有嵌套的路由的时候，通过better-scroll来实现的禁止父路由随着子路由的滚动的问题。
better-scroll其实也可以去实现横轴的滚动，但是为什么不使用better-scroll来处理呢？这是因为在better-scroll实现横轴滚动的时候，我们无法在better-scorll的content的内容区域里去下向拉动我们的页面。所以导致的一个bug就是，在better-scroll横轴滚动的区域里，页面动不了了。
如上图：横轴滚动下面还有内容，但是在图片所示的区域里面，无法向下拉动。所以横轴的滚动其实也是通过vue-awesome-swiper来实现的。
测爱情运天象签约老师朱五九从自己最擅长的姓名学领域，为你揭开爱情的面纱。
10.axios
基本功能就是通过axios来请求后台接口的数据。并且axios可以配合router更好的实现类似后台的拦截器的功能，例如处理token过期这样问题。因为当token过期的时候，仅仅通过vue-router的router.beforeeach来处理就有点无能为力了。这时候就需要配合后台响应返回的code来进行url的处理。
11.fastclick
解决点透和点击延时的问题
推荐阅读
浅析Vue中插槽和配置代理的使用方法
浅析vue怎么实现动画效果
一文详解Vue+flex布局实现TV端城市列表
一文浅析vue中消息订阅与发布的使用方法
一文浅析Vue组件的自定义事件和全局事件总线
一文浅析Vue中单文件组件
【整理分享】一些常见Vue面试题（附答案解析）
一文聊聊vue怎么阻止重复请求
一文聊聊Vue中非单文件组件的使用
Vue中什么是JSX？什么时候用？怎么用？
热点文章
浅析Vue中插槽和配置代理的使用方法
浅析Vue中插槽和配置代理的使用方法
02023-02-06
浅析vue怎么实现动画效果
浅析vue怎么实现动画效果
02023-02-06
一文详解Vue+flex布局实现TV端城市列表
一文详解Vue+flex布局实现TV端城市列表
02023-02-02
一文浅析vue中消息订阅与发布的使用方法
一文浅析vue中消息订阅与发布的使用方法
02023-02-02
一文浅析Vue组件的自定义事件和全局事件总线
一文浅析Vue组件的自定义事件和全局事件总线
02023-02-01
一文浅析Vue中单文件组件
一文浅析Vue中单文件组件
02023-01-31
【整理分享】一些常见Vue面试题（附答案解析）
【整理分享】一些常见Vue面试题（附答案解析）
02023-01-31
一文聊聊vue怎么阻止重复请求
一文聊聊vue怎么阻止重复请求
02023-01-30
一文聊聊Vue中非单文件组件的使用
一文聊聊Vue中非单文件组件的使用
02023-01-29
Vue中什么是JSX？什么时候用？怎么用？
Vue中什么是JSX？什么时候用？怎么用？
02023-01-29
号码凶吉好的手机号码一定是符合你的八字命理的,你的手机号码对你有哪些影响,哪些数字更适合你？
请输入搜索关键词
提交
首页软件前端设计
Copyright 2018 51数据库(www.51sjk.com)
软件
前端设计
程序设计
Java相关
说前端入门低的应该是没有做过前后端分离的后端；说后端只会增删改查的应该是只做过前后端分离的前端！前后端互相抱怨也不是一天两天了，不在其中不知道其中的厉害关系！
存在即合理，存在就有所需，与其六神无主，不如去学了再说！
当然有前景。任何一个公司都需要前端程序员，去互联网招聘网站一查便知，前端岗位的需求是很大的。
千万不要觉得前端好学门槛低，其实前端技术一直发展地很迅速，你需要不断强化自己的能力才能做一个优秀的前端工程师。
大家好，我是王我。
作为一个目前年已过完还没上班的程序员，来说说前端这个行业目前的状态，的确，从我在走入前端这个行业之前，我也有点瞧不起前端程序员，总是感觉前端程序员是程序员比较低级的一个种类，有点算不上程序员的行业，自从我走入前端行业，测底改变了我对前端的想法，我来说说我所看到的所闻到的前端是什么样子的。
1.现在的前端不仅仅是画页面那么简单，难度比以前大大增加
在以前前后端分离之前，对于前端可能就是展示信息，写一个简单的页面能让用户看到就行，做一个信息展示，不需要太多的用户交互与用户体验，但是现在的前端js越来越难， 我认为能做前端大牛，一定能做后端大牛。 因为现在前端是动画+逻辑+交互+用户体验，而后端大部分只是操作数据库给前端提供数据就行了，我说的这是大部分。
2.前端框架与第三方插件越来越多，作为一个前端程序员至少掌握一到两门插件或者框架
现在的前端框架主流是vue，vue需要学的东西也很多，今年2019年vue新版本估计也快要推出了，而且前端第三方插件那就更多了，比如UI中的ivew和vuetify，还有animate，jquery，bootstrap，需要学习的东西太多太多，而且技术多如牛毛，对于初级前端程序员来说，选择也是一个很重要的事情。
3.前端技术更新较快，几乎每几个月都有新技术出现或者更新，而且前端页面总是需要改
当我刚刚入职的时候，以为前端只要是个人都会学习，就是简单的HTML+CSS+DOM操作，后来我发现我错了，其实应用到实际开发中，需要用到的技术实在是太多太多，比如与后端交互，就有ajax，fetch，$.ajax()等等，解决办法实在是太多了，在不同的时候选择不同的方法解决，而且前端页面改变比较多，可能一段时间就需要改变一下，所以前端程序员要有很大的心里，一言不合可能就要该需求。
无论怎么样，我认为前端的前途很大很大，只要你把技术做好你就会有money，有前途也有钱途， 大家好，我是王我，中国最帅的前端程序员。❤️❤️❤️
前端的思想是模块化和渐进式，正是如此，导致前端开发的特点是知识点纷繁复杂，而且相互依赖，虽然在深度上比起后段相对简单，但那么广杂，掌握起来也非一日之功。
前端与后段，只是各有特色，再说了，难者不会 会者不难，没有什么哪个更高级哪个更厉害的问题。
低吗，首先得能干活吧？然后我一个三年经验的前端写一个页面用了一个月，最后还是没完成，你让那个说门槛低的来搞？
层次低吗？用用react，angular，你真能灵活使用css算你狠，如果嫌css层次低，用sass，less。
我前后端都搞过，觉得前端比后端难，后端你跟着写就完了。
前几年互联网爆发的几年前端可以说是非常火热，会css+html+JavaScript就可以拿高工资，现在要拿高工资，要有高技术。前端可以说入门门槛越来越低了，但是企业对前端工程师的要求越来越高了！
1、现在很多学前端的，但是很多企业高薪聘请不到高端的企业人才
2、任何技术你到高端都是很有前景的
3、现在对前端的要求：需要扎实的原生JS基础，深入理解W3C标准和ES规范；需要具备前端性能优化的能力、懂交互；要前端框架有着深入的研究；懂一门后端语言
所以学前端还是有前景的，但你要拿高薪水必须要有你的核心技术！
首先这其实是一个伪命题，所谓的前端门槛越来越低，是看你站在什么角度去看这个问题的。
我们先来看看什么是前端，这是一个很大的概念，从广泛的角度我们可以理解为把专注视图呈现的代码开发岗位称为前端，所以客户端开发也有前端、手机APP开发也有前端、web开发也有前端，而我们通常所谓的前端，其实是指web前端。确实近几年我们看到各大公司在前端这一块的招聘需求是逐年递增，涉及的岗位有纯网页开发、管理系统开发、微信公众号开发、小程序开发等。特别是小程序的出现，好像给人的感觉就是难度降低了，大家都可以去做app了。但实际上勒？
我们简单的梳理一下整个前端的发展史，会发现，从前端初现端倪的时候，我们只需要会写点简单的 HTML 和 CSS 就好了，什么 JS 交互，那时候还不流行。然后 jQuery 出现之后，大量的网页特效出现了，网页的开发难度也降低了，有什么不是一个 $ 符号就可以搞定的，如果不行，那就直接上插件。再后来，真正象征前端技术的是 AngularJS 的出现，算是颠覆了前端开发的技术栈。此时的web前端开发也变得复杂起来，复杂是因为前端能做的东西变多了，网站的性能得到了提升。再到近几年，前端三大框架 Angular、React、Vue 三足鼎立，几近无所不能。你以为还是以前学个 jQuery 就可以走天下了吗？或者说我会个框架就 OK 了吗？现在的前端开发首先你得熟悉原生 JavaScript，然后框架会用是其次，你得深入底层实现，讲得出实现的原理，其次各种相关工具你得会用，什么状态管理、Git、webpack等。还能够通过 NodeJS 搭建一个介于前端与java之间的桥梁。这些都是基础，再往里讲、怎么做性能优化、如何自行部署前端代码，这都算是区分一个初中级前端开发的分水岭了。还有吗，可多了，移动端开发（小程序、rn、uni、flutter等），这是目前主流，底层技术立于三大框架之上，你还得再学学不是吗，学会了还得会用。
所以现在的前端开发，看是简单了，实则很难。一个是负责的东西越来越多了，一个是要求会越来越精细化了，半罐子水的是跑不通了，还有一个就是你得保持学习，因为技术这玩意儿你想玩好，必须得跟随时代步伐，前端技术更新太快了。
任何一门语言，不管是用于前端，还是后端，入门较易，但往往缺少深度。只触及皮毛。
现在的前端，已经相当复杂，从Google，Alibaba，Facebook，twitter等行业巨头对前端框架的开源框架投入来看，只增不减。最新的TIOBE指数JavaScript排第6，PHP排第8，这进一步说明前端主流开发语言在程序工程师中的受欢迎程度。
所以，现在开始一点不晚，需要按照自己的情况制定合适的学习计划，有针对性的学习和解决问题。是否有前景，或者说是否好找工作，薪资福利待遇是否好的话，完全和所掌握的熟练程度和深度是正相关的。对于其他人所说的门槛问题，不要太过于在意，任何一个行业，都有体力劳动和脑力劳动之分。
是谁说的，把这个人揪出来[酷拽]
前端涵盖的东西越来越多了，缺口很大，门槛低是怎么来的？
任何行业学到了核心技术才能拿到高薪，只会基础的一些东西，那只会慢慢被淘汰！
还是踏实把技术学好才是最重要的。有一个不错的学习资料很适合小白学，百战程序员的前端资料，讲的很细，很系统，而且还是免费的，你也有个学习路线。官网就有，希望对你有帮助哈
首先你需要提交你的公司的资料信息，地址信息 ，公司名称 以及电话信息，门脸照片给官方，提交给官方后，他们会审核的，一般都是 1-7个工作日审核 审核通过后1-3天时间展现
如果发现地图有错误，可以进行纠错处理。
