HTML页面的内容可以由浏览器本地渲染,也可以在服务器端渲染。
浏览器端的渲染,很难让爬虫获取到内容(也就是搜索引擎不能抓取到内容),所以不利于网站的推广。
而服务器端的渲染方式分两种,一种是全部渲染和部分渲染。
全部渲染主要是由服务器端向浏览器返回一个完整的HTML页面,这也是我们常用的,虽然他响应的时间可能会比部分渲染长一些,但是综合利弊,还是使用的多一些。
另一种就是部分渲染,主要通过AJAX来实现。
我们将VUE转变为服务器端渲染(SSR)的好处:
1.更好的SEO,因为搜索引擎爬虫抓取工具可以直接查看完全渲染的页面
2.用时更快,尤其是对于缓慢的网络情况或者运行缓慢的设备,无需等待所以javascript完全下载并执行。
接下来就是主角Nuxt.js了
它是一个基于vue.js的通用应用框架,由node.js复制内容渲染。
Nuxt.js包含了vue.js、Vue-Router和Webpack。也就是在单工程文件中我们写好vue文件要手动配置路由,但是在nuxt.js中会自动生成访问路劲,无需手动配置。
nuxt.js作为后台渲染框架,很容易上手使用。
在windows下创建Nuxt.js工程
首先要安装Vue-Cli插件
npm install -g vue-cli --registry=https://registry.npm.taobao.org
然后再需要创建工程的目录下面执行如下的指令。
vue init nuxt/starter my_project
cd my_project
npm install
就创建了名为my_project的工程
将工程导入到webStorm中
执行下面的命令,运行开发模式
npm run dev
这里的dev是指以开发者身份运行。
打开浏览器访问http://localhost:3000将会看到nuxt.js的欢迎页面!
具体配置vue环境对象的过程请参考:
windows:解决windows下搭建vue环境
mac:解决mac版 vue搭建环境
配置成功后nuxt.js的目录结构:
1. 资源目录(assets),放置不需要编译的文件,如 CSS、LESS、JS 等。
2. 组件目录(components ),放置 Vue.js 的组件。
3. 布局目录(ayouts),放置布局文件,该文件设置的内容和样式将作用到 所有的页面上面。
4. 中间件目录(middleware ),放置中间件。中间件是页面渲染之前调用 的函数。
5. 页面目录(pages),放置需要渲染的页面。
6. 插件目录(plugins),放置插件。
7. 静态文件目录(static),存放静态文件,该目录下的文件自动被映射到 “/”之下。
8. Store目录,存放状态信息。
9. nuxt.config.js 文件,Nuxt.js 的配置文件。建议将其中的 ESLint 注释掉。因为语法要求太严格,比如双引号和单引号都不能写差,很难搞。
10. package.js 文件,依赖文件。
在pages 目录下面创建 welcome.vue 页面,编写html内容和js内容
<template>
<div>
<h1>HelloWorld</h1>
<p>{{username}}</p>
</div>
</template>
<script>
import "../assets/welcome.css"; export default {
data:function () {
return { username : "Scott" }
} }
</script>
注意<div>
不能省略,一定要有根标签!!
访问 http://127.0.0.1:3000/welcome,就可以看到页面,不用自己配置路由!!