零成本打造网站：免费网站搭建指南，哪款单页网站制作教程更实用？
谁的单页网站制作指南推荐？
众所周知，单页网站系销售型网站，众多从事竞价工作的站长普遍采用单页网站。原因在于单页网站为纯静态站点，易于搜索引擎收录并取得优良排名。此外，它能够通过文字、图片、视频等多种形式展示产品，其最大优点是：学习与制作过程相对简单、易于上手，非常适合初学者。
我最初选择该教程时，仅有栾洪全老师的“金魔手单页网站制作”教程，不知为何现在市面上涌现出众多模仿其网站的教程。我坚信品牌的力量，栾洪全老师不仅提供优质的售后服务，而且持续推出免费教程，后续价值颇丰。
使用vue制作一个基础网站（vue搭建网站）
利用vue开发网页效果
本地应用：
指令v-text的作用是：设定标签内容
默认写法将替换全部内容，采用插值表达式{{}}可替换指定内容
部分替换使用双大括号写法
v-html指令：设定元素的innerHTML
内容中含有HTML结果会被解析为标签；v-text无论内容如何，只会解析为文本
解析文本用v-text，解析HTML结构用v-html
v-on指令：事件绑定方法以函数调用形式呈现，可传入自定义参数
定义方法时需定义形参以接收传入的实参
事件修饰符的使用：
1.在data中定义数据num；
2.methods中添加两种方法add和sub；
3.使用v-text为num设置span标签；
4.使用v-on将add，sub绑定至+、-按钮；
5.add逻辑小于10时继续累加，否则弹出警告；
6.sub逻辑大于0时继续递减，否则弹出警告；
创建Vue实例时，el（挂载点），data（数据），methods（方法）
v-on指令的作用是绑定事件，简写为
方法中通过this，关键字获取data中的数据
v-text设置文本值，简写{{}}
v-show指令的作用是：根据真假切换元素的显示状态
原理是修改元素的display属性，实现显示和隐藏
指令后面的内容，最终都会解析为布尔值
值为true元素显示，值为false元素隐藏
v-if指令的作用是：根据真假切换元素的显示状态
本质是通过操作DOM元素来切换显示状态
表达式的值为true，元素存在于DOM树中，为false，从DOM树中移除
v-bind指令的作用是：为元素绑定属性
完整写法是v-bind：属性名
简写的话可以直接省略v-bind，只保留【：属性名】
需要动态增删class建议使用对象的方式
v-for指令的作用是：根据数据生成列表结构
数组经常与v-for结合使用
语法是（item，index）in数据
item和index可结合其他指令一起使用
数组长度的更新会同步到页面上，是响应式的
v-model指令的作用是便捷地设置和获取表单元素的值
绑定的数据和表单元素值相关联
绑定的数据双向绑定表单元素的值
网络应用
VuePress-Vue驱动的静态网站生成器入门指南
VuePress由两部分组成：第一部分是一个简约静态网站生成器(opensnewwindow)，它包含由Vue驱动的主题系统和插件API，另一个部分是为撰写技术文档而优化的默认主题，其诞生初衷是为了满足Vue及其子项目的文档需求。
每个由VuePress生成的页面都带有预渲染好的HTML，因此具有优秀的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他页面则仅在用户浏览到时按需加载。
实际上，一个VuePress网站是一个由Vue、VueRouter和webpack驱动的单页应用。如果你以前使用过Vue，当你在开发自定义主题时，你会感受到非常熟悉的开发体验，你甚至可以使用VueDevTools进行调试你的自定义主题。
在构建时，我们会为应用创建一个服务端渲染（SSR）的版本，然后通过虚拟访问每一条路径来渲染对应的HTML。这种做法的灵感来源于Nuxt(opensnewwindow)的nuxtgenerate命令，以及其他一些项目，如Gatsby
1、创建并进入一个新目录
2、使用你喜欢的包管理器进行初始化
3、将VuePress安装为本地依赖
我们不再推荐全局安装VuePress
4、创建你的第一篇文档
5、在package.json中添加一些scripts
这一步骤是可选的，但我们推荐你完成它。在下文中，我们会默认这些scripts已经被添加。
6、在本地启动服务器
VuePress将在(opensnewwindow)启动一个热重载的开发服务器。
现在，你应该已经拥有了一个简单可用的VuePress文档。接下来，了解一下推荐的目录结构和VuePress中的基本配置。
VuePress遵循“约定优于配置”的原则，推荐的目录结构如下：
如果没有任何配置，这个网站将会非常局限，用户也无法在你的网站上自由导航。为了更好地自定义你的网站，让我们首先在你的文档目录下创建一个.vuepress目录，所有VuePress相关的文件都将会被放在这里。你的项目结构可能是这样：
一个VuePress网站必要的配置文件是.vuepress/config.js，它应该导出一个JavaScript对象：
对于上述的配置，如果你运行起devserver，你应该能看到一个页面，它包含一个页头，里面包含一个标题和一个搜索框。VuePress内置了基于headers的搜索——它会自动为所有页面的标题、h2和h3构建起一个简单的搜索索引。
你也可以使用YAML(.vuepress/config.yml)或是TOML(.vuepress/config.toml)格式的配置文件。
一个VuePress主题应该负责整个网站的布局和交互细节。在VuePress中，目前自带了一个默认的主题（正是你现在所看到的），它是为技术文档而设计的。同时，默认主题提供了一些选项，让你可以去自定义导航栏（navbar）、侧边栏（sidebar）和首页（homepage）等。
对于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结合，因为每个工具都有其独特的优点，择优而用是明智的选择。
