NUXT框架

最新推荐文章于 2025-06-16 18:38:11 发布

虞姬匠

最新推荐文章于 2025-06-16 18:38:11 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/weixin_44415368/article/details/106465245

本文介绍了服务器端渲染的概念，对比了服务器端渲染与客户端渲染，并详细讲解了Vue.js框架下的Nuxt.js，包括Nuxt的安装、目录结构、配置、路由、异步数据处理和Vuex的使用。此外，还提到了Nuxt中插入链接、图片、代码片段、列表、表格等Markdown语法的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一. 什么是服务器端渲染

从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.price}}
         {{detail.descripttion}}
      </h2>
      
  </div>
</template>

 
export default {
  asyncData(){
    return axios.get('/data/test.json').then(res=>{
      console.log(res);
      return {
        detail:res.data
      }
    })
  },
    异步的方法
    export default {
  async asyncData(){
    const res=await axios.get('/data/test.json');
    console.log(res);
    return {
       detail:res.data
    }

  },

九.nuxt-vuex

设置
import Vue from 'vue';
import Vuex from "vuex";
Vue.use(Vuex);
const store=()=>new Vuex.store({
    state:{
        count:10
    },
    metations:{
        add(state){
            state.count++
        }
    }
})
export default store; 
调用
<div>
    <p>{{$store.state.count}}</p>
    <button @click="$store.commit('add')">+1</button>
  </div>
如果是两个文件js
index.js
export const state=()=>({
    count:1
})
export const mutations={
    add(state){
        state.count ++
    }
}

subcount.js
export const state=()=>({
    scount:0
})
export const mutations={
    addScount(state){
        state.scount+=2
    }
}
调用第二个的时候
 <div>
    <p>{{$store.state.subcount.scount}}</p>
    <button @click="$store.commit('subcount/addScount')">+1</button>
  </div>

撤销：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
标题：Ctrl/Command + Shift + H
无序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
检查列表：Ctrl/Command + Shift + C
插入代码：Ctrl/Command + Shift + K
插入链接：Ctrl/Command + Shift + L
插入图片：Ctrl/Command + Shift + G
查找：Ctrl/Command + F
替换：Ctrl/Command + G

强调文本 强调文本

加粗文本 加粗文本

标记文本

~~删除文本~~

引用文本

H₂O is是液体。

2¹⁰ 运算结果是 1024.

插入链接与图片

链接: link.

图片: Alt

带尺寸的图片:

居中的图片: Alt

居中并且带尺寸的图片:

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

如何插入一段漂亮的代码片

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

// An highlighted block
var foo = 'bar';

生成一个适合你的列表

项目
- 项目
  - 项目

项目1
项目2
项目3

计划任务
完成任务

创建一个表格

一个简单的表格是这么创建的：

项目	Value
电脑	$1600
手机	$12
导管	$1

设定内容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

第一列	第二列	第三列
第一列文本居中	第二列文本居右	第三列文本居左

SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

TYPE	ASCII	HTML
Single backticks	`'Isn't this fun?'`	‘Isn’t this fun?’
Quotes	`"Isn't this fun?"`	“Isn’t this fun?”
Dashes	`-- is en-dash, --- is em-dash`	– is en-dash, — is em-dash

创建一个自定义列表

Markdown

Text-to- HTML conversion tool

Authors

John

Luke

如何创建一个注脚

一个具有注脚的文本。¹

注释也是必不可少的

Markdown将文本转换为 HTML。

KaTeX数学公式

您可以使用渲染LaTeX数学表达式 KaTeX:

Gamma公式展示 $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ 是通过欧拉积分

$\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.$

你可以找到更多关于的信息 LaTeX 数学表达式here.

新的甘特图功能，丰富你的文章

关于 甘特图 语法，参考这儿,

UML 图表

可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图：

这将产生一个流程图。:

关于 Mermaid 语法，参考这儿,

FLowchart流程图

我们依旧会支持flowchart的流程图：

关于 Flowchart流程图 语法，参考这儿.

导出与导入

导出

如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ，生成一个.md文件或者.html文件进行本地保存。

导入

如果你想加载一篇你写过的.md文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，
继续你的创作。

注脚的解释 ↩︎