nuxt「建议收藏」
大家好，又见面了，我是你们的朋友全栈君。
Nuxt.js 是一个基于 Vue.js 的通用应用框架。
通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。
Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。
作为框架，Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性，例如异步数据加载、中间件支持、布局支持等。
特性
- 基于 Vue.js
- 自动代码分层
- 服务端渲染
- 强大的路由功能，支持异步数据
- 静态文件服务
- ES2015+ 语法支持
- 打包和压缩 JS 和 CSS
- HTML 头部标签管理
- 本地开发支持热加载
- 集成 ESLint
- 支持各种样式预处理器： SASS、LESS、 Stylus 等等
- 支持 HTTP/2 推送、
为了快速入门，Nuxt.js团队创建了脚手架工具 create-nuxt-app。
确保安装了npx（npx在NPM版本5.2.0默认安装了）：
npx create-nuxt-app <项目名>启动项目:
cd <project-name>
npm run dev- 别名
别名 | 目录 |
|---|---|
~ 或 @ | srcDir |
~~ 或 @@ | rootDir |
默认情况下，srcDir 和 rootDir 相同。
提示: 在您的 vue 模板中, 如果你需要引入 assets 或者 static 目录, 使用 ~/assets/your_image.png 和 ~/static/your_image.png方式。
nuxt.config.js 文件用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。路由
Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。要在页面之间使用路由，我们建议使用<nuxt-link> 标签。
假设 pages 的目录结构如下：
pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue那么，Nuxt.js 自动生成的路由配置如下：
router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'user',
path: '/user',
component: 'pages/user/index.vue'
},
{
name: 'user-one',
path: '/user/one',
component: 'pages/user/one.vue'
}
]
}动态路由
在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。路由参数校验
validate
嵌套路由
可以通过 vue-router 的子路由创建 Nuxt.js 应用的嵌套路由。
创建内嵌子路由，你需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。
Warning: 别忘了在父组件(.vue文件) 内增加 <nuxt-child/> 用于显示子视图内容。命名视图
要渲染命名视图，您可以在布局(layout) / 页面(page)中使用 <nuxt name="top"/> 或 <nuxt-child name="top"/> 组件。要指定页面的命名视图，我们需要在nuxt.config.js文件中扩展路由器配置：export default {
router: {
extendRoutes (routes, resolve) {
const index = routes.findIndex(route => route.name === 'main')
routes[index] = {
...routes[index],
components: {
default: routes[index].component,
top: resolve(__dirname, 'components/mainTop.vue')
},
chunkNames: {
top: 'components/mainTop'
}
}
}
}
}它需要使用两个属性 components 和 chunkNames 扩展路由。此配置示例中的命名视图名称为 top 。
中间件
中间件允许您定义一个自定义函数运行在一个页面或一组页面渲染之前。
每一个中间件应放置在 middleware/ 目录。文件名的名称将成为中间件名称(middleware/auth.js将成为 auth 中间件)。
一个中间件接收 context 作为第一个参数：
中间件执行流程顺序：
nuxt.config.js- 匹配布局
- 匹配页面
export default function(context) {}context是nuxt中最大的参数，可以获取所有的东西，请求参数，store
//应用场景：
/*
但凡的请求过程中需要的公共事务，就可以放在全局路由改变的中间件来完成
nuxt.config.js
*/
插件
axios
nuxt中使用axios
安装
npm i -S @nuxtjs/axios @nuxtjs/proxy
nuxt.config.js{
modules:[
'@nuxt/axios',
'@nuxt/proxy'
],
proxy:[//跨域代理
['/api/dog',{
target:'htts://dog.ceo/',
pathRewrite:{
'^/api/dog':'/api/breads/image/random'
}
}
]
]
} url-loader 小文件base-64化能有效减少HTTP请求数。
在任何 Vue 组件的生命周期内， 只有 beforeCreate 和 created 这两个方法会在 客户端和服务端被调用。其他生命周期函数仅在客户端被调用。
asyncData可以在服务器端使用，也可以在客户端使用，在客户端运行就相当于发送ajax请求，在服务端运行就发送服务端请求，
必须要与data属性一起使用，会自动合并与data的属性，相当与created
注意：由于asyncData方法是在组件 初始化 前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象。
在服务器端和客户端都可以使用生命周期钩子：created beforeCreated
nuxt默认服务器端渲染，可以配置spa的模式启动：
在package.json中scripts中添加：
'start-spa':'nuxt start --spa' npm run start-spa发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/168210.html原文链接：https://javaforall.cn
腾讯云开发者
