服务器端渲染-解决nuxt.js的配置与使用

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，就可以看到页面，不用自己配置路由！！