首页 APP开发正文

vue框架搭建个人博客网站模板（基于vue的博客模板）

APP开发 2023-01-25T20:29:10 1652

今天给各位分享vue框架搭建个人博客网站模板的知识，其中也会对基于vue的博客模板进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！本文目录一览： 1、vue项目完整搭建步骤

今天给各位分享vue框架搭建个人博客网站模板的知识，其中也会对基于vue的博客模板进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

1、vue项目完整搭建步骤
2、ant-design-vue 框架搭建（一）
3、web前端开之网站搭建框架之vue详解
4、如何搭建属于自己的个人博客网站？
5、VuePress搭建个人博客
6、从零开始Gin Web+Vue商城的搭建（一）-- 前后端框架搭建和简单沟通

vue项目完整搭建步骤

为了让一些不太清楚搭建前端项目的小白，更快上手。今天我将一步一步带领你们进行前端项目的搭建。前端开发中需要用到框架，那vue作为三大框架主流之一，在工作中很常用。所以就以vue为例。

下载并安装node

下载地址为：

在 nodejs官网下载最新版稳定版的node.js安装，自带了npm工具 ,推荐下载左边的。

检查node是否安装成功

为了更快安装，可以使用淘宝的镜像：

在终端输入以下命令：

检测cnpm是否安装成功

vue-cli是vue脚手架工具，方便打包，部署，测试等。

进入你的项目目录，创建一个基于 webpack 模板的新项目: vue init webpack 项目名

进入项目

安装依赖

此时项目中会多了一个node_modules

启动成功

vue框架搭建个人博客网站模板（基于vue的博客模板）

ant-design-vue 框架搭建（一）

vue create 项目名

cd 项目名

yarn add ant-design-vue

main.js 中的配置

详细地址

npm add node-sass@4.14.1

npm add sass-loader@7.3.1

package.json变为这里好像会自动添加，无需导入

npm add vue-router

在src/router/index.js中配置好路由后，记得导入main.js

如果出现下面的错误

执行这条语句npm install --save core-js即可

npm install --save axios vue-axios

.env.development 配置环境变量

通过下面这个语句查看存在.env里的内容

axios 的使用

axios用法的详细地址

安装cookies

npm add nprogress 添加进度条

在main.js 中导入样式

在需要用到的地方

web前端开之网站搭建框架之vue详解

网站搭建框架之vue

Vue是web前端快速搭建网站的框架之一。它与jQuery有所不同，是以数据驱动web界面（以操作数据改变页面，而jQuery是以操作节点来改变页面），同时，vue还实现了数据的双向绑定，可及时响应用户的输入。最主要的是vue的写法简单，容易掌握，组件形式可以大大提高工作效率。

对于vue的使用可以分为两种使用形式：1.引入vue.js文件，在js中将vue实例化；2.通过node安装第三方包--vue，搭建脚手架，用脚手架将页面分成几个组件编写，从而利用组件来搭建页面。

引入vue.js的写法

Vue分为V层（视图层）和M层（数据层），一般都是由M层的数据来驱动V层的改变。而vue的常用指令数量不多且写法简单。常用的有v-html、v-text、v-show、v-if、v-else、v-for、v-bind:、v-model。v-html和v-text都是将数据写进标签内，但它们的不同之处在于v-text会将标签当做文本内容写入

，而v-html则会对标签进行编译，只显示标签内的内容。

至于v-show、v-if、v-else这三个指令都是通过布尔值的判断来执行的，当布尔值为真时，设置了v-show、v-if指令的标签会显示出来，当布尔值为假时，标签隐藏；而v-else与这两个指令相反。除此之外，v-show和v-if、v-else之间也有差别，v-show是改变标签的display属性来使标签显示或隐藏；而v-if、v-else是通过添加或删除节点，来显示或隐藏标签的。

V-for是vue的一种遍历方法，这个方法极大的简化了数组或对象的遍历并显示到页面的步骤

而v-bind：是对html属性或自定义属性的数据驱动方式，格式为v-bind:href，可简写为：href。对于类（class）的操作是通过布尔值来判断增加或者隐藏类，同时。类和样式（style）所接受的数据类型为对象。

V-model指令的作用是将数据进行双向绑定，仅限于输入类型标签。当用户在页面输入时，数据层的数据会跟着改变。这是VM模式。由v驱动m。

除了这些普通的指令之外，还有事件指令v-on:，可简写为@+事件名，例如：@click，并将执行函数写到vue的methods中

通过脚手架来写项目的话，可用通过写组件，再将组件引入（注册）到另一个vue文件里拼接在一起，从而构建出一个页面。

（组件书写格式）

（组件整合）

（注册路由）

路由是通过vue-router来实现的，在注册路由的时候要将router实例化。不同的路由跳转不同的页面，这是搭建单页面应用的优势。

而父组件与子组件之间的通讯可以通过props将父组件的信息传递给子组件，改变子组件的内容，这样子组件的复用就不会有障碍了，而子组件传递信息给父组件或者其他组件的通讯则需vuex。

通过引入vuex并实例化一个Vuex.Store作为一个公共平台，将数据进行传输。通过vue的computed方法接收数据，通过methods方法改变数据。而这个公用平台可以实现组件与组件之间的信息传递，从而实现组件之间的交互。

通过一个星期的实战，深深的体会到了vue的优势，在构建移动端这方面的效率很高。但在搭建的过程中，还是少不了与jQuery结合，毕竟每个工具都有其优点，择其优而用是明智的选择。

如何搭建属于自己的个人博客网站？

从很久以前就有粉丝问浪哥怎么搭建个人博客，怎么搭建一个个人博客网站呢，其实搭建一个博客还是挺简单的，一个网站的建立无非就是：域名-空间-程序这几样组成的，只要完成了这几点你就可以搭建一个网站哦！

域名注册

我们搭建自己的博客的时候是不是得有一个自己的网站的域名了，首先我们先确定好自己网站的域名，建议长度在6位数这类的，这样容易好记一些；想好域名后我们就去找一些域名注册公司注册就行了，需要注意的是后辍一定要选择主流类型：”com cn net org“这几种其中的一个或者多个。其余的都就不要选了。

空间购买

注册好域名后，我们就去买一个放网站程序的空间，可以是ASP的也可以是PHP的建议大家选择PHP的这样安全一些。前期我们的网站流量都不大所以买一个空间就行了。流量比较大的时候在换成服务器这类的。一般我们都是购买国内的空间，如果嫌麻烦不想备案就买香港的。

域名备案

在国内不管你做什么网站都得备案网站，建议大家备案一下。如果大家使用的是国外的服务器或者香港的服务器或空间。可以不用备案，国内的不备案也就不能够访问网站，这点我们得知道。

程序选择

我们搭建一个博客网站是不需要一个程序呢？那是肯定的。现在博客程序流行的有三种：“WordPress ZBlog Emlog ”,它们各有各的优点和缺点，大家喜欢哪一个选择好就行了。建议大家用ZBlog !

网站安装

选择好博客程序后。我们把下载下来的程序包上传到网站的根目录，然后把域名解析到空间上（*空间也要绑定域名），然后访问并且安装博客程序。安装完成后基本上就完成了，我们也只需要起一个比较好的网站名称设置好一些栏目。有能力的可以自己写一个博客主题，不会的话自己用免费的或者买一个。

我觉得搭建一个网站不难，重点是不好推广。所以大家得注重网站内容质量和推广！

VuePress搭建个人博客

VuePress 是一个以 Markdown 为中心的静态网站生成器，一个 VuePress 站点本质上是一个由 Vue在和 Vue Router驱动的单页面应用 (SPA)。路由会根据你的 Markdown 文件的相对路径来自动生成。每个 Markdown 文件都通过 markdown-it 编译为 HTML ，然后将其作为 Vue 组件的模板。

在VuePress2.0环境下运行，部署使用的1.x版本方法。

（实际上是将打包的 .vuepress/dist 文件上传到远程仓库地址）

步骤基本同第三步，部分修改如下所示（将打包的dist文件发布到子仓库及其gh-pages分支上），未修改部分同上：

参考自：