详细说明Vue基于Nuxt.js实现服务器端渲染(SSR)

直接使用Vue搭建前端单页应用，使用页面源代码时只有几行简单的html，不利于网站的SEO。此时，需要服务器渲染

2016年10月25日，zeit.co背后的团队发布了React服务器端渲染应用框架Next.js

几个小时后，一个基于Vue.js的服务器端渲染应用框架应运而生，类似于Next.js这就是Nuxt.js

一、快速模板

在安装了vue-cli的前提下，您可以快速创建一个nuxt项目模板

vue init nuxt-community/starter-template MyProject其中my project是项目文件夹的名称，可以自定义

在通过npm install安装依赖项之后(这看起来比纱线安装更流畅)，您可以通过npm run dev在开发环境中直接启动项目

默认起始地址为http://localhost33603000/，可以在package.json中添加以下配置来修改主机端口号

config ' : { ' nuxt ' : { ' host ' : ' 0 . 0 . 0 '，' port' :' 7788'}，开发完成后，npm运行build将代码打包，最后npm启动启动服务。

二、重要目录

生成的项目目录如下

默认情况下，大多数文件夹名称由nuxt保留，不能修改

其中，有三个目录具有关键的价格比较：

1.组件组件目录

通常用于存储非页面级组件，如页眉、页脚和其他公共组件

该目录中的组件具有常规vue组件的方法和特征，不会被nuxt.js扩展

2.布局布局目录

您可以在此目录中修改default.vue来修改默认布局

模板div my-header/my-header nuxt/my-footer/my-footer/div/需要nuxt/的模板，页面的主要内容会显示在这里(类似于根节点的路由器视图)

另外，可以在目录中添加error.vue作为错误页，具体写法可以参考官方文档

3.页面页面目录

用于存储页面级组件，nuxt将根据该目录下的页面结构生成路由

例如，上图中的页面结构将生成这样的路由配置：

router : { router :[{ name : ' index '，path: '/'，component : ' pages/index . vue ' }，{ name: 'about '，path : '/' about '，component : ' pages/about . vue ' }，{ name : ' chamber '，path : ' pages/chamber . vue '，Children: [需要创建相应的以下划线为前缀的Vue文件或目录，如Path:' : ID '，Component : ' Pages/chamber/_ ID。vue '，名称： '教室-ID'}]]}此外，此目录中的VUE组件还具有Nuxt.js提供的一些特殊功能

通常使用异步数据方法，支持异步数据处理

每次加载页面组件之前都会调用此方法，然后获取数据并将其返回给当前组件

asyncData ({ params，error }){ return axios . get(` API/post/$ { params . id } `)。然后((RES)={ return { name : RES . data . name } })。catch((e)={ error({ status code : 404，message: '未找到' })} } async data方法的第一个参数是context object，具体属性可以在这里查看。

因为在组件初始化之前调用了asyncData方法，所以在方法中无法通过这个引用组件的实例对象

第三，使用插件

如果项目中需要引入其他第三方插件，可以直接引入到页面中，这样在打包时，插件就会打包到页面对应的js中

但是如果其他页面引入相同的插件，就会被重复打包。如果不需要分页和打包，此时可以配置插件

以element-ui为例，安装element-ui后，在插件目录下创建elementUI.js

然后将配置项build.vendor和plugins添加到根目录中的nuxt.config.js

构建： {供应商：[' ~/plugins/element ui。js ']}，plugins :[{ src : ' ~/plugins/element ui。js ' }，]这里的插件属性用来配置vue.js插件，也就是可以用Vue.user()方法的插件

默认只需要科学研究委员会属性，另外还可以配置ssr:假，让该文件只在客户端被打包引入

如果是像爱可信这种第三方（不能使用)插件，只需要在插件目录下创建axios.js

//axios。jsimport Vue from ' Vue ' import axios from ' axios ' const service=axios。创建({ baseurl : '/API ' })Vue。原型。$ Ajax=axiosexport默认服务然后在建造。厂商中添加配置（不需要配置插件)

build : {厂商：[' ~/plugins/axios。js ']}这样在打包的时候，就会把爱可信打包到供应商。射流研究…中

四、Vuex状态树

如果在商店目录下创建了index.js，nuxt.js会根据该目录下的文件创建状态管理状态树

//存储/索引。jsimport从' Vue '导入Vuex从' Vuex '导入Axios从' ~/plugins/Axios。js '；vue。使用(Vuex)const store=()=new Vuex .存储({ state : { author : ' WiseFroom '，info: '' })，突变： { SetInfo(state，val) { state.info=val } }，操作3360 { LoadAboutMeinFo({ commit，state }){ return Axios。得到(大约).然后(res={ console.log('ajax就是成功)控制台。日志数据。info)提交(' setInfo '，res.data.info) }).catch(err={ console。日志('错误')})} })导出默认storeNuxt.js内置引用了状态管理模块，不需要额外安装

上面的代码中，我在行动中写了一个loadAboutMeInfo()方法，用来请求/API/关于接口

然后在关于。某视频剪辑软件页面中调用

//关于. vue模板节类=' container ' div img src=' http : ~/assets/about。png ' alt=' '/div h1 { { $ store。国家。info } }/h1/section/template script导出默认值{ fetch({ store }){ return store。dispatch(' loadAboutMeInfo ')}，name: 'about '，data(){ return } }/script成果演示：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。