首页 > 其他分享> 文章详细

【项目】小帽学堂（十一）

2022-02-23 20:58:43 阅读：134 来源： 互联网

标签：十一 name 渲染学堂 js content 小帽视频页面

小帽学堂

十七、搭建项目前台环境

1. 服务端渲染技术NUXT

在这里插入图片描述

什么是服务端渲染
- 服务端渲染又称SSR (Server Side Render)是在服务端完成页面的内容，而不是在客户端通过AJAX获取数据。
- 服务器端渲染(SSR)的优势主要在于：更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。
- 如果你的应用程序初始展示 loading 菊花图，然后通过 Ajax 获取内容，抓取工具并不会等待异步完成后再进行页面内容的抓取。也就是说，如果 SEO 对你的站点至关重要，而你的页面又是异步获取内容，则你可能需要服务器端渲染(SSR)解决此问题。
- 另外，使用服务器端渲染，我们可以获得更快的内容到达时间(time-to-content)，无需等待所有的 JavaScript 都完成下载并执行，产生更好的用户体验，对于那些「内容到达时间(time-to-content)与转化率直接相关」的应用程序而言，服务器端渲染(SSR)至关重要。
什么是NUXT
- Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。

2. NUXT环境初始化

下载压缩包
- https://github.com/nuxt-community/starter-template/archive/master.zip
解压
- 将template中的内容复制到 vue-front
安装ESLint
- 将vue-admin项目下的.eslintrc.js配置文件复制到当前项目下
修改package.json
- name、description、author（必须修改这里，否则项目无法安装）

 "name": "vue-front",
 "version": "1.0.0",
 "description": "小帽学堂前台网站",
 "author": "Alex",

修改nuxt.config.js
- 修改title: ‘{{ name }}’、content: ‘{{escape description }}’
- 这里的设置最后会显示在页面标题栏和meta数据中

head: {
    title: '小帽学堂 - Java视频|HTML5视频|前端视频|Python视频|大数据视频-自学拿1万+月薪的IT在线视频课程，谷粉力挺，老学员为你推荐',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'keywords', name: 'keywords', content: '小帽学堂,IT在线视频教程,Java视频,HTML5视频,前端视频,Python视频,大数据视频' },
      { hid: 'description', name: 'description', content: '小帽学堂是国内领先的IT在线视频学习平台、职业教育平台。截止目前,谷粒学院线上、线下学习人次数以万计！会同上百个知名开发团队联合制定的Java、HTML5前端、大数据、Python等视频课程，被广大学习者及IT工程师誉为：业界最适合自学、代码量最大、案例最多、实战性最强、技术最前沿的IT系列视频课程！' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
},

在命令提示终端中进入项目目录
安装依赖 npm install
测试运行 npm run dev
NUXT目录结构
- 资源目录 assets
  - 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。
- 组件目录 components
  - 用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性。
- 布局目录 layouts
  - 用于组织应用的布局组件。
- 页面目录 pages
  - 用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。
- 插件目录 plugins
  - 用于组织那些需要在根vue.js应用实例化之前需要运行的 Javascript 插件。
- nuxt.config.js 文件
  - nuxt.config.js 文件用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。

标签：十一,name,渲染,学堂,js,content,小帽,视频,页面
来源： https://blog.csdn.net/sgsgkxkx/article/details/123098533

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

【项目】小帽学堂（十一）

小帽学堂

十七、搭建项目前台环境

1. 服务端渲染技术NUXT

2. NUXT环境初始化