NUXT框架

一. 什么是服务器端渲染

从github下载开源项目 在cmd 输入：git clone 地址链接

1.服务端渲染

服务器端渲染：后端先调用数据库，获得数据之后，将数据和页面元素进行拼装，组合成完整的HTML页面，再直接返回给浏览器，以便用户浏览
例如：http://www.cnblogs.com/cate/design/

2. 什么是客户端渲染

客户端渲染：数据由浏览器通过ajax动态取得，在通过js将数据填充到dom元素上最终展示到网页中，这样的过程叫做客户端渲染。
例如：https://h5.ele.me/misite/

二. 服务器端渲染 vs客户端渲染

1.服务器端渲染需要消耗更多的服务器端资源（CPU，内存等）
2.客户端渲染可以将静态资源部署到cdc上，实现高并发
3.服务端渲染对seo更友好

三.vue服务器端的渲染的实现

网站：https://ssr.vuejs.org/zh/
1.安装依赖：
	npm install vue vue-server-renderer --save
2.编写代码：

	1.创建vue实例
	const vue=require('vue)
		const app=new vue({
   
		template:`<div>hello world</div>`
		})
	2.创建一个renderer
	const renderer=require('vue-server-render').createRenderer()
	3.将vue实例渲染为html
	renderer.renderTostring(app,(err,html)=>{
   
		<div data-server-renderered="true>hello world</div>
	})

四.nuxt安装

1.npx vreate-nuxt-app 项目名称
2.配置详解
? Project name nuxttest							//项目名称
? Project description My astounding Nuxt.js project		//项目描述
? Author name forever									//作者姓名
? Choose programming language JavaScript			//选择开发的语言 javascript or 			typescript
? Choose the package manager Yarn				//选择包管理的工具 npm or yarn
? Choose UI framework Element					//选择一个UI框架
? Choose custom server framework Express			//选择一种服务端框架
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection) //检查代码是否规范
? Choose test framework None						//选择一个测试框架
? Choose rendering mode Universal (SSR) 			//选择一种渲染模式 SSR or SPA
? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)

五.目录结构

六.nuxt配置

	1.css\
	npminstall--save-dev node-sass sass-loader
	modeule.exports={
   
	css:[
		'@assets/css/style.scss'
	]
}

注意配置文件中要写scss

七.nuxt路由

1.静态路由

<nuxt-link to="/user">首页</nuxt-link>
<nuxt-link to="{name:'user'}">首页</nuxt-link>

在pages 直接建立.vue文件 路由就是/home
如果写home home.vue 路由/home是找不到的 应该写/home-home
首先看下nuxt.js 路由的配置
2.动态路由

 
 路由配置修改
 routes: [{
   
    path: "/detail/detail/:id",
      }]
      标签跳转<nuxt-link :to="'/user/'+item.id">{
   {
   item.name}}</nuxt-link>
      接受：this.$route.params.id   name传参
    编译跳转
     routes: [{
   
    path: "/detail/detail",
    }]
    this.$router.push('/detail/detail?id='+val);
    接受：this.$route.query.id   参数直接？id
    

八.nuxt异步数据

<template>
  <div class="home">
      <h2>商品列表yong
         {
   {
   detail