笔记参考
- 服务器端渲染 利于 SEO
- 客户端渲染
vue-server-renderer
https://ssr.vuejs.org/zh/guide/
安装环境
npm install vue vue-server-renderer --save
1、渲染示例
const Vue = require("vue"); const VueServerRenderer = require("vue-server-renderer"); // 第 1 步：创建一个 Vue 实例 const app = new Vue({ template: `<div>Hello {{name}}</div>`, data() { return { name: "Tom", }; }, }); // 第 2 步：创建一个 renderer const renderer = VueServerRenderer.createRenderer(); // 第 3 步：将 Vue 实例渲染为 HTML renderer.renderToString(app).then((html) => { console.log(html); }); // <div data-server-rendered="true">Hello Tom</div>
2、与服务端结合
npm install express --save
const Vue = require("vue"); const VueServerRenderer = require("vue-server-renderer"); const express = require("express"); // vue实例 const app = new Vue({ template: `<div>Hello {{name}}</div>`, data() { return { name: "Tom", }; }, }); // 渲染器 const renderer = VueServerRenderer.createRenderer(); // 服务 const server = express(); server.get("*", async (request, response) => { const html = await renderer.renderToString(app); response.end(html); }); server.listen(8080);
官方 Demo
https://github.com/vuejs/vue-hackernews-2.0/
Nuxt
1、使用 npx 创建项目
npx create-nuxt-app my-app # 等价于 npm install -g create-nuxt-app create-nuxt-app my-app
如果速度慢，可以配置国内源
vim ~/.bash_profile alias cnpx='NPM_CONFIG_REGISTRY=https://registry.npm.taobao.org/ npx'
2、目录结构
静态资源 assets 会被编译 scss等 组件 components 布局组件 layouts 中间件 middleware 页面路由 pages 插件目录 plugins 根vue.js应用 实例化之前运行 静态文件 static 不会被编译处理 应用的Vuex 状态树 store 个性化配置 nuxt.config.js 脚本接口 package.json
别名
~ 或 @ srcDir ~~ 或 @@ rootDir assets 或者 static 使用~
3、配置
css
npm install node-sass sass-loader --save-dev
4、路由
<nuxt-link to="/"></nuxt-link> • 1
pages 目录下会自动生成
(1)基础路由
pages/detail => /detail
(2)动态路由
pages/detail/_id.vue => /detail/007 $route.params.id == 007
(3)嵌套路由
pages/users.vue pages/users/index.vue
(4)过渡动效
assets/css/main.scss
.page-enter-active, .page-leave-active { transition: opacity 0.5s; } .page-enter, .page-leave-active { opacity: 0; }
nuxt.config.js：
module.exports = { css: ["assets/css/main.scss"], };
5、中间件 middleware
6、模板
app.html 不建议直接修改
布局 layouts
7、异步数据
asyncData 页面加载之前
static/data/user.json
{ "name": "Tom", "age": 23 }
pages/index.vue
<template> <div class="container"> {{ initData.name }} </div> </template> <script> import axios from "axios"; export default { async asyncData(context) { const res = await axios.get("http://localhost:3000/data/user.json"); console.log(res); return { initData: res.data, }; }, }; </script>
8、资源文件
assets 会被打包
static 不会被打包
<!-- 引用 static 目录下的图片 --> <img src="/my-image.png" /> <!-- 引用 assets 目录下经过 webpack 构建处理后的图片 --> <img src="~/assets/my-image-2.png" />
9、插件
plugins/vue-notifications.js：
import Vue from "vue"; import VueNotifications from "vue-notifications"; Vue.use(VueNotifications);
配置 plugins 如下：
module.exports = { plugins: ["@/plugins/vue-notifications"], };
10、注入
(1)注入 Vue 实例
plugins/vue-inject.js:
import Vue from "vue"; Vue.prototype.$debug = (msg) => console.log(msg);
nuxt.config.js:
export default { plugins: ["~/plugins/vue-inject.js"], };
(2)注入 context
plugins/ctx-inject.js:
export default ({ app }, inject) => { // Set the function directly on the context.app object app.debug = (msg) => console.log(msg); };
nuxt.config.js:
export default { plugins: ["~/plugins/ctx-inject.js"], };
(3)同时注入
会自动添加前缀$
export default ({ app }, inject) => { inject("debug", (msg) => console.log(msg)); ); };
nuxt.config.js:
export default { plugins: ["~/plugins/combined-inject.js"], };
11、状态树
fetch 方法会在渲染页面前被调用，作用是填充状态树 (store) 数据
与 asyncData 方法类似，不同的是它不会设置组件的数据。
nuxtServerInit：服务端数据传给客户端的状态树
store/index.js
export const state = () => ({ counter: 0, }); export const mutations = { increment(state) { state.counter++; }, };
pages/index.vue
<p>{{$store.state.counter}}</p> <button @click="$store.commit('increment')">点击</button>
12、部署
开发 npm dev 上线 npm start
学习视频:
