史诗级Nust详解

什么是Nuxt.js Nuxt.js 是一个基于 Vue.js 的通用应用框架。

Nuxt支持vue的所有功能，此类内容为前端客户端内容。 Nuxt特有的内容，都是前端服务端内容。 通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI 渲染。

Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。

2 入门案例 2.1 create-nuxt-app 介绍 Nuxt.js 提供了脚手架工具 create-nuxt-app

create-nuxt-app 需要使用 npx

npx 命令为 NPM版本5.2.0默认安装组件

2.2 安装 npx create-nuxt-app 例如 npx create-nuxt-app demo_nuxt02

nuxtjs改善

2.3 启动 npm run dev

2.4 访问 http://localhost:3000

3. 目录结构 3.1 目录 目录名称 描述 assets 资源目录，用于存放需要编译的静态资源。例如：LESS、SASS等 默认情况下，Nuxt使用Webpack若干加载器处理目录中的文件 components vue组件目录，Nuxt.js 不会增强该目录，及不支持SSR layouts 布局组件目录 pages 页面目录，所有的vue视图，nuxt根据目录结构自动生成对应的路由。 plugins 插件目录 static 静态文件目录，不需要编译的文件 store vuex目录 nuxt.config.js nuxt个性化配置文件，内容将覆盖默认 package.json 项目配置文件

3.2 别名 assets 资源的引用：~ 或 @

// HTML 标签

// CSS background-image: url(assets/13.jpg); background-image: url(/assets/13.jpg); background-image: url(@/assets/13.jpg);

static 目录资源的引用：/ 直接引用

//html标签

//css background-image: url(/12.jpg);

实例

.img1 { height: 100px; width: 100px; background-image: url(~assets/13.jpg); background-size: 100px 100px; display: inline-block; } .img2 { height: 100px; width: 100px; background-image: url(/12.jpg); background-size: 100px 100px; display: inline-block; }

4 路由 4.1 路由概述 Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。 要在页面之间切换路由，我们建议使用 标签。 标签名 描述 nuxt.js中切换路由 nuxt.js的路由视图 vue默认切换路由 vue默认路由视图 4.2 基础路由 自动生成基础路由规则 路径 组件位置及其名称 规则 / pages/index.vue 默认文件 index.vue /user pages/user/index.vue 默认文件 index.vue /user/one pages/user/one.vue 指定文件 实例

情况1：访问路径，由pages目录资源的名称组成（目录名称、文件的名称）

• 资源位置： ~/pages/user/one.vue
• 访问路径：http://localhost:3000/user/one

情况2：每一个目录下，都有一个默认文件 index.vue

• 资源位置： ~/pages/user/index.vue
• 访问路径：http://localhost:3000/user

8 思考：/user 可以匹配几种文件？

pages/user.vue 文件 【优先级高】 pages/user/index.vue 文件 4.3 动态路由 在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。 路由中路径匹配 组件位置及其名称 / pages/index.vue /user/:id pages/user/_id.vue /:slug pages/_slug/index.vue /:slug/comments pages/_slug/comments.vue 实例1：获得id值，创建资源 user/_id.vue

4.4 动态命名路由 路径 /news/123 匹配_id.vue还是_name.vue ？

我们可以使用解决以上问题

通过name 确定组件名称：“xxx-yyy” 通过params 给对应的参数传递值 第2新闻 第3新闻 1 2 4.5 默认路由 路径 组件位置及其名称 不匹配的路径 pages/_.vue 404页面，可以采用 _.vue进行处理 4.6 嵌套路由(懂就👌) 创建嵌套子路由，你需要添加一个 父组件Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。

要求：父组件 使用 显示子视图内容 pages/ --| book/ //同名文件夹 -----| _id.vue -----| index.vue --| book.vue //父组件

步骤1：编写父组件 pages/child/book.vue

步骤2：编写子组件 pages/child/book/list.vue

步骤3：编写子组件 pages/child/book/_id.vue

4.7 过渡动效（了解就👌） 4.7.1 全局过渡动效设置 Nuxt.js 默认使用的过渡效果名称为 page

.page-enter-active样式表示进入的过渡效果。 .page-leave-active样式表示离开的过渡效果。 步骤1：创建 assets/main.css，编写如下内容：

.page-enter-active, .page-leave-active { transition: opacity .5s; } .page-enter, .page-leave-active { opacity: 0; }

步骤2：nuxt.config.js 引入main.css文件

module.exports = { css: [ 'assets/main.css' ] }

4.7.1 自定义动画 如果想给某个页面自定义过渡特效的话，只要在该页面组件中配置 transition 字段即可：

步骤1：在全局样式 assets/main.css 中添加名称为test的过渡效果

.test-enter-active, .test-leave-active { transition: all 2s; font-size:12px; } .test-enter, .test-leave-active { opacity: 0; font-size:40px; }

步骤2：需要使用特效的vue页面编写如下：

export default { transition: 'test' } 1 2 3 5. 视图 5.1 默认模板（了解👌） 定制化默认的 html 模板，只需要在应用根目录下创建一个 app.html 的文件。

默认模板：

{{ HEAD }} {{ APP }} 1 2 3 4 5 6 7 8 9 修改模板，对低版本IE浏览器进行支持（兼容IE浏览器） {{ HEAD }} {{ APP }} 5.2 默认布局 5.2.1 布局概述 布局：Nuxt.js根据布局，将不同的组件进行组合。

模板：html页面，是布局后所有组件挂载的基础。

5.2.2 布局分析 layouts/default.vue 默认布局组件 访问路径根据路由，确定执行组件 组件具体显示的位置，有布局来确定

5.2.3 公共导航 修改 layouts/default.vue

5.3 自定义布局 在layouts目录下创建组件：layouts/blog.vue

19 在需要的视图中使用 blog布局

5.4 错误页面 编写layouts/error.vue页面，实现个性化错误页面

解决问题： 404 、500、连接超时（服务器关闭） 总结：所学习的技术中，有2种方式处理错误页面 方式1：默认路径，_.vue （先执行） 方式2：错误页面，~/layouts/error.vue 5.5 Nuxt组件特殊配置 页面组件实际上是 Vue 组件，只不过 Nuxt.js 为这些组件添加了一些特殊的配置项 特殊配置项 描述 asyncData SSR进行异步数据处理，也就是服务器端ajax操作区域。 fetch 在渲染页面之前获取数据填充应用的状态树（store） head 配置当前页面的 Meta 标签 layout 指定当前页面使用的布局 transition 指定页面切换的过渡动效 scrollToTop 布尔值，默认: false。 用于判定渲染页面前是否需要将当前页面滚动至顶部。 5.5.1 模板代码 .red { color: red; } 我是标题

通过nuxt提供head属性，可以给单个也是设置：标题、外部css、外部js 等内容。

.bg2 { background-image: url('~static/img/2.jpg'); width: 300px; height: 300px; background-size: 300px; }

以上就是文章的全部内容，为了文章内容的丰富性，再导入一篇文章《# nuxt服务端开发使用记录》 一、初始化项目 npx create-nuxt-app my-blog 1 使用sass 自动注入功能

npm install sass sass-loader @nuxtjs/style-resources 1 安装axios 和代理

npm install @nuxtjs/axios @nuxtjs/proxy -S 1 安装cookies插件

npm i cookie-universal-nuxt -S 1 二、项目整体结构 package.json

{ "name": "my-blog", "version": "1.0.0", "private": true, "scripts": { "dev": "nuxt", "build": "nuxt build", "start": "nuxt start", "generate": "nuxt generate", "push": "command-cli push" }, "dependencies": { "@nuxtjs/axios": "^5.12.5", "@nuxtjs/proxy": "^2.1.0", "cookie-universal-nuxt": "^2.1.4", "core-js": "^3.8.3", "element-ui": "^2.15.0", "font-awesome": "^4.7.0", "nuxt": "^2.14.12", "vue-simplemde": "^2.0.0" }, "devDependencies": { "@nuxtjs/style-resources": "^1.0.0", "sass": "^1.32.5", "sass-loader": "^10.1.1" } }

项目结构

layouts是页面模板 default.vue就是默认的

nuxt.config.js

export default { // Global page headers: go.nuxtjs.dev/config-head head: { // seo优化 title: 'zhufeng-blog', htmlAttrs: { lang: 'en' }, meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: '' } ], link: [ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } ] },

// Global CSS: https://go.nuxtjs.dev/config-css
css: [
    'element-ui/lib/theme-chalk/index.css', // 使用全局样式
    '@/assets/reset.css'
],

// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
    '@/plugins/element-ui', // 使用插件
    '@/plugins/axios'
],

// Auto import components: https://go.nuxtjs.dev/config-components
components: true,

// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [],

// Modules: https://go.nuxtjs.dev/config-modules
modules: [
    // https://go.nuxtjs.dev/axios   - axios  同构 支持客户端和服务端
    '@nuxtjs/axios', // context
    '@nuxtjs/proxy',
    '@nuxtjs/style-resources', // 使用自动注入功能
    '@nuxtjs/style-resources',
    'cookie-universal-nuxt' // app
],
styleResources: {
    scss: [
        '@/assets/_var.scss'
    ]
},
// Axios module configuration: https://go.nuxtjs.dev/config-axios
axios: {},

// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
    transpile: [/^element-ui/],
},
router:{
  middleware:'auth'
},
proxy:{ // 内置代理功能
    '/api/':{
        target:'http://localhost:7001/'
    }
}

}

三、页面开发 创建pages/index.vue nuxt自动会生成路由配置

div{ color:$color; }

nuxt-link 和router-link 组件一样

layouts/default.vue是模板

.header { display: flex; justify-content: space-between; height: 60px; align-items: center; .nav li{ display: inline-block; margin: 0 20px; font-weight: bold; } img { width: 150px; } }

类似于router-view index.vue的页面会渲染在Nuxt标签

页面请求后在 服务端直接就渲染了

nuxt会在.nuxt文件夹下生产路由文件

index 对应path = ‘/’

layouts/error.vue是配置的错误页面 比如404等原因导致打不开就会弹出error的页面 name: error

页面可以开多个layout 模板 pages里面的页面组件加个属性即可 比如layout: ‘manager’, // 用manager布局

admin.vue基于manager.vue布局去渲染

四、store处理 store/index.js nuxtServerInit 刷新页面 在服务端会执行 里面逻辑资讯处理 这里为了做cookies登录态的同步记录

export const actions = { // 这个函数刷新页面 在服务端执行一遍 nuxtServerInit(store, { $axios, app }) { // @nuxtjs/axios 同步数据到vuex中 // console.log(store); // app就是整个大对象 什么都能取 console看看就知

	// 获取到客户端请求传过来的cookies
	let userInfo = app.$cookies.get('user');
	// 设置cookie 每次访问服务器都会携带cookie ，但是localStorage不行
	// app.$cookies.remove('user');
	// 用token校验是否ok
	// $axios('/api/valdiate', userInfo); // 通过接口校验当前token是否正常
	if (userInfo) {
		if (true) {
			// nuxt服务会请求我的服务器 校验token的正确性，如果正确，会将最新的用户信息 放到vuex中
			store.commit('user/set_user', userInfo); // 把cookies的用户信息同步到vuex
		} else {
			app.$cookies.remove('user'); // 不正确就移除
		}
	}
}

};

五、plugins开发 axios.js插件处理 其实就是平时说的请求拦截器

export default function({ axios, app }) { axios.onRequest(config => { // 获取token 并且添加在请求上面头 let user = app.$cookies.get('user'); if (user && user.token) { // 每次请求都带上token config.headers.authorization = user.token; } });

$axios.onResponse(res => {
	if (res.data.err === 0) {
		return Promise.resolve(res.data.data);
	} else {
		return Promise.reject(res);
	}
});

}

nuxt.config.js 记得配上去@/plugins/axios

plugins: [ '@/plugins/element-ui', '@/plugins/axios' // 自定义出的插件 ],

六、中间件开发 middleware\auth.js 1 其实就是路由拦截处理

export default function(obj) { let { store, redirect, route } = obj; let username = store.state.user.username; if (route.path.startsWith('/admin')) { if (!username) { redirect('/login'); } } else { if (/login/.test(route.path)) { if (username) { redirect('/admin'); } } } }

nuxt.config.js配置

router: { middleware: 'auth' },

七、pm2 部署 根目录下新建 pm2.json

[ { "name": "demo", "script": "npm run start", "env_dev": { "NODE_ENV": "development" }, "env_production": { "NODE_ENV": "production" } } ]

1、 npm run build 打包 2、 把图中文件放到服务器 可以先压缩 再在服务器解压

static .nuxt nuxt.config.js package.json pm2.json 5个文件（夹子）压缩成一个文件夹 1

3、服务器提前全局装好pm2 、node等

npm install pm2 -g

执行以下命令启动
```javascript
 pm2 start pm2.json

pm2简单介绍：
pm2守护进程
对于线上项目，如果直接通过 node app来启动，如果报错了可能直接停止导致整个服务崩溃，我们可以使用pm2对node进程管理

pm2也可以可视化管理部署的项目

pm2特征：
内建负载均衡（使用 Node cluster 集群模块）
后台运行
0 秒停机重载
具有 Ubuntu 和 CentOS 的启动脚本
停止不稳定的进程（避免无限循环）
控制台检测
提供 HTTP API
远程控制和实时的接口 API（Nodejs 模块，允许和 PM2 进程管理器交互）

ps： jnekins也可以部署
核心shell


总结：
nuxt的大部分功能就是这样使用，其余就要看api文档了
原文链接
    https://blog.csdn.net/M_wzz/article/details/121914443
    https://blog.csdn.net/qq398577351/article/details/116978969