很多朋友对于vue自适应网站源码分享和vue实现自适应布局不太懂，今天就由小编来为大家分享，希望可以帮助到大家，下面一起来看看吧！
作者：Sufen
转发链接：https://mp.weixin.qq.com/s/n9PeozLcIJFlORHMlzrlNQ
目录
手把手教你Electron+Vue实战教程（一）
手把手教你Electron+Vue实战教程（二）本篇
手把手教你Electron+Vue实战教程（三）
手把手教你Electron+Vue实战教程（四）
1Electron升级
2020年5月19号，Electron更新了最新的9.0.0版本，带来了诸多改进，具体的我就不在此赘述了，大家可以看一下官方介绍：https://github.com/electron/electron/blob/master/docs/breaking-changes.md
好了，我们现在就把上节课初始化好的项目升级到Electron9.0.0，只要简单的两步：1、命令行直接执行重新安装yarnaddelectron即可升级到最新版本Electron；2、删除src目录中background.js文件内的代码app.allowRendererProcessReuse=true，这行代码其实就是我们上节课添加的，9.0的版本已经设置为默认值了，所以此处我们就不需要了。
2项目介绍
估计大家看到这里都已经忍不住了：你BB了那么久，你到底是要搞啥子项目呀……咳咳，我的锅我的锅，一开始就应该介绍一下先的了，拖到了现在……这实战教程其实并不是什么高难度的项目，就是仿有道云笔记，没错又是仿某某某的套路。。当然，鉴于时间的问题，我应该不会全放下来，只挑选Markdown的文件编写部分。在此，我有个小小的建议：「不要为了仿而仿，而是为了如何在一个项目中把你所学会的知识技能点糅合在一起，融会贯通举一反三，这才是我们的最终目的」
3工欲善其事必先利其器
在开始正式写代码之前，有必要先安利一下前端最好的编辑器之一VisualStudioCode，当然，这是个仁者见仁智者见智的问题，最适合你的才是最好的！如果你选择不使用这个编辑器，那么你可以直接跳过这一小节了。必装插件ESLint和Prettier-Codeformatter，推荐一下我常用的代码风格和eslint设置，在项目根目录下分别新建三个文件.editorconfig、.eslintrc.js、.prettierrc.js，如下图所示：
「下面是代码展示，此处仅展示当前项目使用的eslint与代码风格样式，你可以自行选择是否使用。」
39;plugin:vue/essential&39;@vue/airbnb&39;babel-eslint&39;no-console&39;no-debugger&39;error&39;never&39;no-multiple-empty-lines&39;error&39;linebreak-style&39;error&39;windows&39;comma-dangle&39;never&39;no-trailing-spaces&39;import/no-dynamic-require&39;import/no-unresolved&39;no-param-reassign&39;max-len&39;error&39;guard-for-in&39;no-shadow&39;object-shorthand&39;no-restricted-syntax&39;no-plusplus&39;consistent-return&39;no-return-assign&39;global-require&39;prefer-promise-reject-errors&39;import/extensions&39;off&39;import/no-extraneous-dependencies&39;error&39;arrow-parens&39;error&39;as-needed&39;no-undef&39;class-methods-use-this&39;no-underscore-dangle&39;error&39;_id&39;no-global-assign&39;space-before-function-paren&39;error&39;never&39;never&39;always&39;object-curly-newline&39;error&39;no-unused-expressions&39;error&39;none&39;vue&39;vue-router&39;/&39;Home&39;@/views/Home&39;history&34;app&34;less&app{\nfont-family:Avenir,Helvetica,Arial,sans-serif;\n-webkit-font-smoothing:antialiased;\n-moz-osx-font-smoothing:grayscale;\ncolor:34;app-wrapper&34;sidebar-container&34;main-container&39;Home&34;less&eaeefb;\n}\n.main-container{\nflex:1;\n}\n}\n</style>
4.2引入element-ui和fontawesome图标库
在src目录中创建文件夹plugin，我们以后所有引入的外部框架与插件全部都放在这里。我们使用命令行yarnaddelement-ui安装element-ui，接着在plugin文件中新建文件element-ui.js：
/*\n*@Description:引入element-ui框架\n*@Author:sufen\n*@Date:2020-05-2109:58:49\n*@LastEditTime:2020-05-2109:59:20\n*@LastEditors:sufen\n*/\nimportVuefrom&39;\nimportElementUIfrom&39;\nimport&39;\n\nVue.use(ElementUI,{size:&39;})
继续安装fontawesome图标库，先安装所有的图标依赖，后续再按需引入我们所需要的图标。
MacBook-Pro:vue-electron-notesBill$yarnadd@fortawesome/vue-fontawesome@fortawesome/free-solid-svg-icons@fortawesome/fontawesome-svg-core@fortawesome/free-brands-svg-icons@fortawesome/free-regular-svg-icons
接着在plugin文件中新建文件fortawesome.js，里面的faMarkdown、faUserSecret就是我们按需引入的图标，后续如果我们需要新的图标就在这里新增就完事了：
/*\n*@Description:fortawesome图标库\n*@Author:sufen\n*@Date:2020-05-2109:55:29\n*@LastEditTime:2020-05-2110:06:46\n*@LastEditors:sufen\n*/\nimportVuefrom&39;\nimport{library}from&39;\nimport{faUserSecret}from&39;\nimport{faMarkdown}from&39;\n//import{faUserSecret}from&39;\nimport{FontAwesomeIcon}from&39;\n\nlibrary.add(faUserSecret,faMarkdown)\n\nVue.component(&39;,FontAwesomeIcon)
搞完上面两个还没完呢，最后我们需要在main.js文件中引入：
importVuefrom&39;\nimportAppfrom&39;\nimportrouterfrom&39;\nimportstorefrom&39;\nimport&39;\nimport&39;\n\nVue.config.productionTip=false\n\nnewVue({\nrouter,\nstore,\nrender:h=>h(App)\n}).$mount(&app&34;search-container&34;请输入内容&34;$attrs&34;$listeners&34;append&34;el-icon-search&34;primary&34;el-icon-circle-plus-outline&34;dropdown&34;createFile()&34;importFile()&39;FileSearch&39;create&39;import&34;less&daecfe;\n\n.el-dropdown{\n.el-button–small{\nmargin-left:10px;\npadding:6px;\nfont-size:14px;\nborder-radius:30%;\n}\n}\n}\n</style>
4.3FileList文件列表组件
在components组件目录新增FileList组件，我们这一节主要就是完成这么一个列表，至于后面使用到的右键菜单等等，到我们后续使用到了再说，路要一步步走。可以看到，我们这个组件props接收一个fileList数组，然后通过v-for直接渲染后搞定了。每一个li都使用flex布局，li包含了我们的文件标题和文件的最后修改时间，不得不说flex真的是布局神器，一直用一直爽！图标当然就使用我们前面所引入的fortawesome图标库了，我们前面具体的图标引入代码为：
import{faMarkdown}from&39;\nlibrary.add(faMarkdown)
接着我们直接在FileList组件中使用fortawesome组件，markdown图标就已经展示出来了，后面稍微修改样式调节一下间距就能很完美了：
<font-awesome-icon:icon=&39;fab&39;markdown&34;/>
如果仅仅到这里就结束了，那么这个组件确实也太没技术含量了吧。随着我们的文件越来越多，列表的长度会越来越长，那么就必然会出现滚动条，作为一个有追求的程序猿，浏览器原生的滚动条我是肯定无法接受的，简直丑爆了一点也不优雅好不好……为了既可以解决这个问题而又不用自己造轮子，我选用了element-ui的隐藏组件el-scrollbar，看一下官方文档的使用效果：
虽然在官方文档中没有给出这个组件，但是在源码中是有的。所以我们可以直接使用：
<el-scrollbar></el-scrollbar>
这个组件的使用还是些坑需要注意的，大家可以参考这篇文章所写，里面已经是写得很清晰明了了，我就不在此重复啰嗦了。
看看我们最后完整的组件代码：
<!–\n*@Description:左侧文件列表组件\n*@Author:sufen\n*@Date:2020-05-2016:18:34\n*@LastEditTime:2020-05-2110:37:18\n*@LastEditors:sufen\n–>\n<template>\n<el-scrollbarclass=&34;wrap-class=&34;:noresize=&34;tag=&34;>\n<liv-for=&34;:key=&34;class=&34;>\n<font-awesome-icon:icon=&39;fab&39;markdown&34;class=&34;/>\n<pclass=&34;>{{item.title}}</p>\n<pclass=&34;>{{item.time}}</p>\n</li>\n</el-scrollbar>\n</template>\n\n<script>exportdefault{\nname:&39;,\nprops:{\nfileList:{\ntype:Array,\ndefault:()=>[]\n}\n},\ndata(){\nreturn{}\n}\n}</script>\n\n<stylelang=&34;scoped>\n.file-list{\nuser-select:none;\n.file-item{\ndisplay:flex;\nalign-items:center;\nheight:55px;\nborder-bottom:1pxsolid34;less&34;app-wrapper&34;sidebar-container&34;searchTitle&34;fileList&34;main-container&39;@/components/FileSearch&39;@/components/FileList&39;Home&39;&39;文件名1&39;2020-06-21&39;文件名2&39;2020-06-21&39;文件名3&39;2020-06-21&39;文件名4&39;2020-06-21&39;文件名5&39;2020-06-21&39;文件名6&39;2020-06-21&39;文件名1&39;2020-06-21&39;文件名2&39;2020-06-21&39;文件名3&39;2020-06-21&39;文件名4&39;2020-06-21&39;文件名5&39;2020-06-21&39;文件名6&39;2020-06-21&34;less&eaeefb;\n}\n.main-container{\nflex:1;\n}\n}\n</style>
列出最后的文件树：
├──public\n│├──favicon.ico\n│└──index.html\n├──src\n│├──assets\n││└──logo.png\n│├──components\n││├──FileList\n│││└──index.vue\n││└──FileSearch\n││└──index.vue\n│├──plugin\n││├──element-ui.js\n││└──fortawesome.js\n│├──router\n││└──index.js\n│├──store\n││└──index.js\n│├──views\n││└──Home.vue\n│├──App.vue\n│├──background.js\n│└──main.js\n├──.editorconfig\n├──.eslintrc.js\n├──.gitignore\n├──.prettierrc.js\n├──README.md\n├──babel.config.js\n└──package.json
搞定！这就是我们左侧面板的最后效果图：
老规矩，如果你觉得本文写得也还可以，麻烦点个赞+关注。谢谢！
推荐Vue学习资料文章：
《手把手教你Electron+Vue实战教程（一）》
《收集22种开源Vue模板和主题框架「干货」》
《如何写出优秀后台管理系统？11个经典模版拿去不谢「干货」》
《手把手教你实现一个Vue自定义指令懒加载》
《基于Vue和高德地图实现地图组件「实践」》
《一个由Vue作者尤雨溪开发的web开发工具—vite》
《是什么让我爱上了Vue.js》
《1.1万字深入细品Vue3.0源码响应式系统笔记「上」》
《1.1万字深入细品Vue3.0源码响应式系统笔记「下」》
《「实践」Vue数据更新7种情况汇总及延伸解决总结》
《尤大大细说Vue3的诞生之路「译」》
《提高10倍打包速度工具Snowpack2.0正式发布，再也不需要打包器》
《大厂CodeReview总结Vue开发规范经验「值得学习」》
《Vue3插件开发详解尝鲜版「值得收藏」》
《带你五步学会VueSSR》
《记一次Vue3.0技术干货分享会》
《Vue3.x如何有惊无险地快速入门「进阶篇」》
《「干货」微信支付前后端流程整理(Vue+Node)》
《带你了解vue-next（Vue3.0）之炉火纯青「实践」》
《「干货」Vue+高德地图实现页面点击绘制多边形及多边形切割拆分》
《「干货」Vue+Element前端导入导出Excel》
《「实践」Denobytes模块全解析》
《细品pdf.js实践解决含水印、电子签章问题「Vue篇」》
《基于vue+element的后台管理系统解决方案》
《Vue仿蘑菇街商城项目（vue+koa+mongodb）》
《基于electron-vue开发的音乐播放器「实践」》
《「实践」Vue项目中标配编辑器插件Vue-Quill-Editor》
《基于Vue技术栈的微前端方案实践》
《消息队列助你成为高薪Node.js工程师》
《Node.js中的stream模块详解》
《「干货」DenoTCPEchoServer是怎么运行的？》
《「干货」了不起的Deno实战教程》
《「干货」通俗易懂的Deno入门教程》
《Deno正式发布，彻底弄明白和node的区别》
《「实践」基于Apify+node+react/vue搭建一个有点意思的爬虫平台》
《「实践」深入对比Vue3.0CompositionAPI和ReactHooks》
《前端网红框架的插件机制全梳理（axios、koa、redux、vuex）》
《深入Vue必学高阶组件HOC「进阶篇」》
《深入学习Vue的data、computed、watch来实现最精简响应式系统》
《10个实例小练习，快速入门熟练Vue3核心新特性（一）》
《10个实例小练习，快速入门熟练Vue3核心新特性（二）》
《教你部署搭建一个Vue-cli4+Webpack移动端框架「实践」》
《2020前端就业Vue框架篇「实践」》
《详解Vue3中router带来了哪些变化？》
《Vue项目部署及性能优化指导篇「实践」》
《Vue高性能渲染大数据Tree组件「实践」》
《尤大大细品VuePress搭建技术网站与个人博客「实践」》
《10个Vue开发技巧「实践」》
《是什么导致尤大大选择放弃Webpack？【vite原理解析】》
《带你了解vue-next（Vue3.0）之小试牛刀【实践】》
《带你了解vue-next（Vue3.0）之初入茅庐【实践】》
《实践Vue3.0做JSX(TSX)风格的组件开发》
《一篇文章教你并列比较React.js和Vue.js的语法【实践】》
《手拉手带你开启Vue3世界的鬼斧神工【实践】》
《深入浅出通过vue-cli3构建一个SSR应用程序【实践】》
《怎样为你的Vue.js单页应用提速》
《聊聊昨晚尤雨溪现场针对Vue3.0Beta版本新特性知识点汇总》
《【新消息】Vue3.0Beta版本发布，你还学的动么？》
《Vue真是太好了壹万多字的Vue知识点超详细!》
《Vue+Koa从零打造一个H5页面可视化编辑器——Quark-h5》
《深入浅出Vue3跟着尤雨溪学TypeScript之Ref【实践】》
《手把手教你深入浅出vue-cli3升级vue-cli4的方法》
《Vue3.0Beta和React开发者分别杠上了》
《手把手教你用vuedragchart实现一个可以拖动/缩放的图表组件》
《Vue3尝鲜》
《总结Vue组件的通信》
《Vue开源项目TOP45》
《2020年，Vue受欢迎程度是否会超过React？》
《尤雨溪：Vue3.0的设计原则》
《使用vue实现HTML页面生成图片》
《实现全栈收银系统（Node+Vue）（上）》
《实现全栈收银系统（Node+Vue）（下）》
《vue引入原生高德地图》
《Vue合理配置WebSocket并实现群聊》
《多年vue项目实战经验汇总》
《vue之将echart封装为组件》
《基于Vue的两层吸顶踩坑总结》
《Vue插件总结【前端开发必备】》
《Vue开发必须知道的36个技巧【近1W字】》
《构建大型Vue.js项目的10条建议》
《深入理解vue中的slot与slot-scope》
《手把手教你Vue解析pdf(base64)转图片【实践】》
《使用vue+node搭建前端异常监控系统》
《推荐8个漂亮的vue.js进度条组件》
《基于Vue实现拖拽升级（九宫格拖拽）》
《手摸手，带你用vue撸后台系列二(登录权限篇)》
《手摸手，带你用vue撸后台系列三(实战篇)》
《前端框架用vue还是react？清晰对比两者差异》
《Vue组件间通信几种方式，你用哪种？【实践】》
《浅析React/Vue跨端渲染原理与实现》
《10个Vue开发技巧助力成为更好的工程师》
《手把手教你Vue之父子组件间通信实践讲解【props、$ref、$emit】》
《1W字长文+多图，带你了解vue的双向数据绑定源码实现》
《深入浅出Vue3的响应式和以前的区别到底在哪里？【实践】》
《干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)》
《基于Vue/VueRouter/Vuex/Axios登录路由和接口级拦截原理与实现》
《手把手教你D3.js实现数据可视化极速上手到Vue应用》
《吃透Vue项目开发实践｜16个方面深入前端工程化开发技巧【上】》
《吃透Vue项目开发实践｜16个方面深入前端工程化开发技巧【中】》
《吃透Vue项目开发实践｜16个方面深入前端工程化开发技巧【下】》
《Vue3.0权限管理实现流程【实践】》
《后台管理系统，前端Vue根据角色动态设置菜单栏和路由》
作者：Sufen
转发链接：https://mp.weixin.qq.com/s/n9PeozLcIJFlORHMlzrlNQ
vue自适应网站源码分享的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vue实现自适应布局、vue自适应网站源码分享的信息别忘了在本站进行查找哦。