长沙设计网站多少钱,wordpress列表页模板,网页设计实验报告怎么写,wordpress移动端音乐插件Vue.js是Web前端的一个框架#xff0c;用来快速开发单页面应用。当Vue.js开发变成主流的时候#xff0c;许多公司的技术团队都打算把下一个新项目换成用Vue.js来开发。但是当我们详细了解Vue.js以后#xff0c;会发现一个很尴尬的问题#xff0c;那就是Vue.js的页面是采用客…Vue.js是Web前端的一个框架用来快速开发单页面应用。当Vue.js开发变成主流的时候许多公司的技术团队都打算把下一个新项目换成用Vue.js来开发。但是当我们详细了解Vue.js以后会发现一个很尴尬的问题那就是Vue.js的页面是采用客户端渲染的它不像PHP、JSP那样是服务器端渲染搜索引擎无法收录网站的内容。那有没有办法既能用上Vue.js又能实现服务器端渲染呢不用担心Nuxt.js框架就是一个基于Vue.js的服务器端渲染方案。一、客户端渲染和服务器端渲染的区别两种渲染方式的区别在于首次加载出来的页面中是否含有数据。这里所说的数据是指页面中具体的文字内容。从下面这张图可以比较两种渲染方式的区别。1.客户端渲染客户端渲染的情况下浏览器首次加载出来的是空的网页模板和JavaScript程序这个页面是不包含数据的数据需要通过Ajax再次请求服务器获得。此时用户会看到一个Loading加载提示页或者是一个空白页等待数据加载完成后页面才会完整显示出来。2.服务器端渲染服务器端渲染时浏览器首次加载出来的就是一个包含数据的完整页面但这些数据并不是开发人员手动填进去的而是由服务器预先完成渲染也就是把数据填充到网页模板中把渲染结果返回给浏览器。这样用户会感觉到网页的打开速度很快搜索引擎也能正确识别网页中的数据。也就是说服务器端渲染并不是什么新技术以前的网页全都是服务器端渲染的只不过用前端技术实现服务器端渲染有点困难。有了Nuxt.js框架以后就很容易实现了。二、如何判断网页是不是服务器端渲染当我们在浏览器上打开网页后单击鼠标右键选择“查看网页源代码”然后看一下源代码中是否包含数据。如果源代码中有数据那么网页就是服务器端渲染的如果源代码中没有数据而页面中有数据的话那么数据就是通过Ajax异步加载出来的这样的网页就是客户端渲染。三、快速体验Nuxt.jsNuxt.js是工作在服务器端的它依赖于Node.js。我们先确保Node.js已经安装了然后我们使用npx命令来创建一个项目。这里我们假设安装到D:demo命令下创建一个nuxt-demo的项目。1使用VS Code打开D:demo目录。2打开终端执行命令创建项目npx create-nuxt-app nuxt-demo3在创建项目过程中会询问选择哪个包管理器在这里选择使用npm? Choose the package manager (Use arrow keys) Yarn Npm4询问选择哪个渲染模式在这里选择使用SSR代表服务器端渲染? Choose rendering mode (Use arrow keys) Universal (SSR) Single Page App5安装配置完成后启动项目命令如下cd nuxt-demonpm run dev6通过浏览器访问http://localhost:3000/查看启动后的项目。四、目录结构我们看一下Nuxt目录结构中的关键文件的作用assets存放待编译的静态资源如Less、Sass。static存放不需要webpack编译的静态文件服务器启动的时候该目录下的文件会映射至应用的根路径“/”下。components存放自己编写的Vue组件。layouts布局目录用于存放应用的布局组件。middleware用于存放中间件。pages用于存放应用的路由及视图Nuxt.js会根据该目录结构自动生成对应的路由配置。plugins用于存放需要在根Vue应用实例化之前需要运行的JavaScript插件。nuxt.config.js用于存放Nuxt.js应用的自定义配置以便覆盖默认配置。关于Nuxt.js的介绍就到这里了。其实Nuxt.js的使用还是非常简单的但是在面试中许多前端面试官都会提问这个技术点大家想要深入学习的话可以参考Nuxt.js的官方文档。
