Vue 服务端渲染 入门学习和注意事项内含推荐文档
为什么使用服务端渲染
- 更好的 SEO,由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。
- 更快的内容到达时间(time-to-content),特别是对于缓慢的网络情况或运行缓慢的设备。
使用技术栈
- vue
- nuxt(官网提供框架。 后文会针对提供一些区分和注意点)
- express
- axios(vue-resorce停止更新,官网推荐数据交互中间件)
如果感觉是很多不熟悉的名词,不要感到很困难,可以通过引入一个基本的小项目上手练习。慢慢就都吸收了。后文提供项目地址,以及分析。
如果熟悉自行跳过。看项目初始
技术栈相关文档推荐
必看文档。读一遍后,查找即可。
- vue 官方2.0中文文档:cn.vuejs.org/v2/guide/
- nuxt 中文api文档 :zh.nuxtjs.org/api
- express 中文api文档: expressjs.jser.us/3x_zh-cn/ap…
了解文章。读一遍
- 前端SEO((Search Engine Optimization))知识:
- imweb.io/topic/56829… (前端写页面注意)
- www.rapospectre.com/blog/38 (详细分析)
初始项目引入
直接使用vue init引入
vue init nuxt-community/express-template <project-name>
cd <project-name> # 移动到项目目录
npm install # or yarn install
项目运行
$ npm install # Or yarn install
# 服务热加载在 localhost:3000
$ npm run dev # server下的index可以改变端口
# 正式构建
$ npm start
项目结构分析
建议同时与nuxt文档一起,使用更佳。
nuxt分析(重点)
- 例如: assets、components、eslintrc.js、package.json、yarn.lock和我们正常使用vue是相同的。
- 我们只需要针对的学习一些nuxt特有的语法即可。
- layouts(布局文件)
- 为页面指定使用哪一个布局文件
- pages(页面文件、路由根据文件生成)zh.nuxtjs.org/api/compone…
- asyncData 方法使得你能够在渲染组件之前异步获取数据。zh.nuxtjs.org/api/
- head 设置当前页面的头部标签。zh.nuxtjs.org/api/pages-h…
- layouts(布局文件)
注意事项
- pages目录结构和命名方式:
- 动态数据:例如点击不同列表内容进入详情页,需要在命名上进行区分。例如图中_id.vue。
- 子路由: 例如theme.vue 需要同名文件夹theme 其中在进行子路由即可。
- 如果想看具体的结构,可以运行 npm run build在生成的文件夹.nuxt 查看生成router文件的具体情况,进行调整
- 使用axios 可以去看下es6的Promise Generator async。 www.ruanyifeng.com/blog/2015/0…
- 最后,欢迎打开新世界的大门。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhbcfggi
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13