Vue 爬坑之路（十一）—— 基于 Nuxt.js 实现服务端渲染（SSR）
|
直接使用 Vue 构建前端单页面应用，页面源码时只有简单的几行 html，这并不利于网站的 SEO，这时候就需要服务端渲染 2016 年 10 月 25 日，zeit.co 背后的团队对外发布了一个 React 的服务端渲染应用框架 Next.js 几小时后，一个基于 Vue.js 的服务端渲染应用框架应运而生，与 Next.js 异曲同工，这就是
在已经安装了 vue-cli 的前提下，可以快速创建一个 nuxt 的项目模板 vue init nuxt-community/starter-template MyProject
通过 npm installyarn install 更顺利）安装依赖之后，可以直接 npm run dev 在启动项目 默认启动的地址为 http://localhost:3000/，可以在 package.json 中添加以下配置来修改主机端口号 : :
开发完成后执行 npm run build 打包代码，最后 npm start 启动服务
生成的如下
大部分文件夹名称都是 nuxt 默认保留的，不可修改 其中比较关键的目录有三个： 1. components
一般用来存放的组件，如 header、footer 等公共组件 该目录下的组件具有常规 vue 组件的方法和特性，不会被 nuxt.js 扩展特性 2. layouts ?
可以修改该目录下的 default.vue 来修改默认布局 其中 此外还可以在目录下新增 error.vue 作为错误页面，具体的写法可以参考 3. pages 页面目录
用于存放页面级别的组件，nuxt 会根据该目录下的页面结构生成 比如上图中的页面结构，会生成这样的路由配置：
path:
此外，该目录下的 vue 组件还具备一些?Nuxt.js 提供的特殊 其中 asyncData 方法比较常用，支持异步数据处理 这个方法会在页面组件每次加载之前被调用，然后获取数据并返回给当前组件 asyncData ({ axios.(`api/posts/${=>((e) =>,message:
由于asyncData方法是在组件初始化前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象
如果项目中还需要引入其他的第三方插件，可以直接在页面中引入，这样在打包的时候，会将插件打包到页面对应的 js 里面 但要是别的页面也引入了同样的插件，就会重复打包。如果没有需要分页打包的需求，这时候可以配置 plugins 以 element-ui 为例，在安装了 element-ui 之后，在 plugins 目录下创建 elementUI.js
然后在根目录的 nuxt.config.js 中添加配置项 build.vendor 和 plugins 这里的 plugins 属性用来配置 vue.js 插件，也就是可以用 Vue.user() 方法的插件 默认只需要 src 属性，另外还可以配置 ssr: false，让该文件只在客户端被打包引入 如果是像 axios 这种第三方插件，只需要在 plugins 目录下创建 axios.js <span style="color: #0000ff;">const service =<span style="color: #000000;"> axios.create({baseURL: <span style="color: #800000;">'<span style="color: #800000;">/api<span style="color: #800000;">'<span style="color: #000000;"> }) Vue.prototype.$ajax =<span style="color: #000000;"> axiosexport <span style="color: #0000ff;">default service 然后在 build.vendor? 中添加配置（不需要配置?plugins） ?这样在打包的时候，就会把 axios 打包到 vendor.js 中
如果在 store 目录下创建了 index.js，nuxt.js 会根据该目录下的文件创建 Vuex 状态树
Vue.use(Vuex)
<span style="color: #0000ff;">const store = () => <span style="color: #0000ff;">new<span style="color: #000000;"> Vuex.Store({
state: { author: <span style="color: #800000;">'<span style="color: #800000;">WiseWrong<span style="color: #800000;">'<span style="color: #000000;">,info: <span style="color: #800000;">''<span style="color: #000000;"> },mutations: { setInfo (state,val) { state.info =<span style="color: #000000;"> val } },actions: { loadAboutMeInfo ({commit,state}) { <span style="color: #0000ff;">return Axios.<span style="color: #0000ff;">get( /<span style="color: #000000;">about).then(res =><span style="color: #000000;"> { console.log(<span style="color: #800000;">'<span style="color: #800000;">ajax is success<span style="color: #800000;">'<span style="color: #000000;">) console.log(res.data.info) commit(<span style="color: #800000;">'<span style="color: #800000;">setInfo<span style="color: #800000;">'<span style="color: #000000;">,res.data.info) }) .<span style="color: #0000ff;">catch(err =><span style="color: #000000;"> { console.log(<span style="color: #800000;">'<span style="color: #800000;">error<span style="color: #800000;">'<span style="color: #000000;">) }) } } }) export <span style="color: #0000ff;">default store
上面的代码中，我在 actions 中写了一个 方法，用来请求 /api/about 接口 然后在 about.vue 页面中调用 <span style="color: #0000ff;"><<span style="color: #800000;">template<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">section <span style="color: #ff0000;">class<span style="color: #0000ff;">="container"<span style="color: #0000ff;">> <span style="color: #0000ff;"><<span style="color: #800000;">div<span style="color: #0000ff;">> <span style="color: #0000ff;"><<span style="color: #800000;">img <span style="color: #ff0000;">src<span style="color: #0000ff;">="~/assets/about.png"<span style="color: #ff0000;"> alt<span style="color: #0000ff;">=""<span style="color: #0000ff;">> <span style="color: #0000ff;"></<span style="color: #800000;">div<span style="color: #0000ff;">> <span style="color: #0000ff;"><<span style="color: #800000;">h1<span style="color: #0000ff;">>{{$store.state.info}}<span style="color: #0000ff;"></<span style="color: #800000;">h1<span style="color: #0000ff;">> <span style="color: #0000ff;"></<span style="color: #800000;">section<span style="color: #0000ff;">> <span style="color: #0000ff;"></<span style="color: #800000;">template<span style="color: #0000ff;">> <span style="color: #0000ff;"><<span style="color: #800000;">script<span style="color: #0000ff;">><span style="background-color: #f5f5f5; color: #000000;"> ?成果演示：
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
