vue个人博客模板,Vue.js项目模板如何大家图文分享

vue个人博客模板,Vue.js项目模板如何大家图文分享详细介绍

本文目录一览： 如何利用VuePress搭建个人博客

这次给大家带来如何利用VuePress搭建个人博客，利用VuePress搭建个人博客的注意事项有哪些，下面就是实战案例，一起来看一下。VuePressvuepress是尤大大4月12日发布的一个全新的基于vue的静态网站生成器，实际上就是一个vue的spa应用，内置webpack，可以用来写文档。一个基于 Vue SSR 的静态站生成器，本来的目的是爽爽的写文档，但是我发现用来撸一个人博客也非常不错。这是VuePress的官方文档上手搭建你可以跟着文档上的例子自己玩一玩，不过由于VuePress的文档也是用VuePress来实现的，所以我取巧直接拿VuePress仓库中的docs目录拿来玩耍。1.首先安装VuePress到全局npm install -g vuepress2.然后把VuePress仓库克隆到你的电脑git clone git@github.com:docschina/vuepress.git在docs文件中执行（请确保你的 Node.js 版本 >= 8）cd vuepresscd docsvuepress dev当你看到这一行就说明已经成功了： VuePress dev server listening at http://localhost:8080/下面我们打开http://localhost:8080/发现真的打开了vuepress文档：下面的工作就是数据的替换了，但我们应该先看一下docs的目录结构：├─.vuepress│ ├─components│ └─public│ └─icons│ └─config.js // 配置文件├─config // Vuepress文档的配置参考内容├─default-theme-config // Vuepress文档的默认主题配置内容├─guide // Vuepress文档的指南内容└─zh // 中文文档目录 ├─config ├─default-theme-config └─guide└─README.md // 首页配置文件文档分成了两部分，中文文档在/zh/目录下，英文文档在根目录下。其实目录里面的东西都挺好看懂的，首先guide 、default-theme-config、config 这三个目录中的都是Vuepress文档的主要内容，从中文文档里也可以看到只有这三个目录被替换了。首页配置默认主题提供了一个主页布局，要使用它，需要在你的根目录 README.md 的 YAML front matter 中指定 home：true，并加上一些其他的元数据。我们先看看根目录下的README,md：home: true // 是否使用Vuepress默认主题heroImage: /hero.png // 首页的图片actionText: Get Started → // 按钮的文字actionLink: /guide/ // 按钮跳转的目录features: // 首页三个特性- title: Simplicity First details: Minimal setup with markdown-centered project structure helps you focus on writing.- title: Vue-Powered details: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue.- title: Performant details: VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.footer: MIT Licensed | Copyright ? 2018-present Evan You // 页尾实在看不懂，官网有比我更详细的配置说明。导航配置导航配置文件在.vuepress/config.js中在导航配置文件中nav是控制导航栏链接的，你可以把它改成自己的博客目录。nav: [ { text: 'Guide', link: '/guide/', }, { text: 'Config Reference', link: '/config/' }, { text: 'Default Theme Config', link: '/default-theme-config/' }]剩下的默认主题配置官方文档都有很详细的文档说明这里就不在_嗦了。更改默认主题色你可以在.vuepress/目录下创建一个override.styl文件。vuepress提供四个可更改的颜色：$accentColor = #3eaf7c // 主题色$textColor = #2c3e50 // 文字颜色$borderColor = #eaecef // 边框颜色$codeBgColor = #282c34 // 代码背景颜色我把它改成了这样：侧边栏的实现由于评论区里问的人较多，所以在这里更新一下，其实我就算在这里写的再详细也不如大家去看官方文档。侧边栏的配置也在.vuepress/config.js中：sidebar: [ { title: 'JavaScript', // 侧边栏名称 collapsable: true, // 可折叠 children: [ '/blog/JavaScript/学会了ES6，就不会写出那样的代码', // 你的md文件地址 ] }, { title: 'CSS', collapsable: true, children: [ '/blog/CSS/搞懂Z-index的所有细节', ] }, { title: 'HTTP', collapsable: true, children: [ '/blog/HTTP/认识HTTP-Cookie和Session篇', ] },]对应的文档结构：├─blog // docs目录下新建一个博客目录│ ├─CSS│ ├─HTTP│ └─JavaScript我的博客：brownhu部署在配置好你博客之后，命令行执行：Vuepress build当你看到这一行就说明成功了：相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！推荐阅读：Node.js+console输出日志文件实例分析如何使用Vue实现拖拽效果

每一个程序员都应该有写博客：使用VuePress搭建一个博客系统

你好啊，我是大阳。一个撸码近十年的程序员。
不知道你是否有这样的职场困惑：职场三年没有任何进步；学了很多，毛用没有；学了，过了一年全都忘记了，更不知道怎么把已经学到的知识迁移到其他领域或者行业。
也就是搬砖多年，一直都没有在自己的专业上建立完备的知识体系 。
时间和知识的碎片化、工作996、职场pua都在阻止我们系统化地学习、更别说沉淀为知识体系啦。
为了能够对抗这些外部因素，我建议你写博客。强制输出倒逼输入、随时记录学习历程夯实脚步、不断实践形成技能树。
而作为一个程序员，形成个人知识体系，对抗危机和忧虑，可以使用下面的方法：
下面我们来使用VuePress来搭建一个博客系统。我这里使用的是vuepress社区主题vuepress-theme-hope（一款集成了众多插件的vuepress主题）。
事实上，一个 VuePress 网站是一个由 Vue、Vue Router和 webpack驱动的单页应用。如果你以前使用过 Vue 的话，当你在开发一个自定义主题的时候，你会感受到非常熟悉的开发体验，你甚至可以使用 Vue DevTools 去调试你的自定义主题。
在构建时，我们会为应用创建一个服务端渲染（SSR）的版本，然后通过虚拟访问每一条路径来渲染对应的HTML。这种做法的灵感来源于Nuxt的 nuxt generate 命令，以及其他的一些项目，比如 Gatsby。
根据提示进行配置,可以启动自带demo
主配置文件config.ts
主题配置：
palette.scss

Vue.js项目模板如何大家图文分享

本文主要为大家带来一篇Vue.js项目模板搭建图文教程。给大家做个参考，希望能帮助到大家。前言从今年（2017年）年初起，我们团队开始引入「Vue.js」开发移动端的产品。作为团队的领头人，我的首要任务就是设计 整体的架构 。一个良好的架构必定是具备丰富的开发经验后才能搭建出来的。虽然我有多年的前端开发经验，但就「Vue.js」来说，仍然是个新手。所幸「Vue.js」有一个配套工具「Vue-CLI」，它提供了一些比较成熟的项目模板，很大程度上降低了上手的难度。然而，很多具体的问题还是要自己思考和解决的。项目划分我们公司的H5产品大部分是嵌套在手机客户端里面的页面。每个项目的功能都比较独立，而且规模不大。这样一来，既可以让这些小项目各自为政，也可以把它们集中放到一个大项目中管理。各自的优缺点如下：项目模板考虑到我们团队刚开始使用「Vue.js」，需要逐步摸索出合适的架构。如果做成一个大项目，一旦架构要调整，很可能会伤筋动骨。所以最终的选择是 划分成多个小项目 。虽然划分成多个小项目了，但是这些小项目也要保持一致的架构和公共代码。说白了，就是要根据业务情况搭建自己的项目模板，所有具体的项目都在这个模板的基础上开发。下面就介绍一下我们团队的项目模板的搭建过程。初始化项目模板本身也是一个项目，所以也通过「Vue-CLI」来初始化（项目名为「webapp-public」）：vue init webpack webapp-public这里选用的是「webpack」模板，因为功能比较齐全。初始化的过程中要注意：安装「Vue-Router」以支持单页应用；安装「ESLint」以统一编码规范。SASS安装「SASS」的支持比较简单，先通过命令行安装相关依赖：npm install node-sass --save-devnpm install sass-loader --save-dev装好后，只要指定style标签的「lang」属性为「scss」，就可以用该语言来编写样式代码了：组件二（box.vue）

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！推荐阅读：Angular项目中使用scss步骤详解怎样使用vue2.0+koa2+mongodb实现注册登陆
volar怎么快速生成vue模板

配置自定义的snippets。通过vscode的snippets我们可以自己配置自定义的snippets，从而实现快捷生成代码片段，在VsCode里按F1，输入snippets->选择配置用户代码片段，选择后出现选择配置的界面，这里我们对Vue文件的代码片段进行配置，然后就完成了。随着vscode以及vue的越来越普及，vetur这个名字也越来越被人熟知。vetur是一个vscode插件，用于为.vue单文件组件提供代码高亮以及语法支持。