DDR爱好者之家

Vue.js通用应用框架-Nuxt.js的上手教程
站长资源 2025/1/12 佚名
60 1538
DDR爱好者之家 Design By 杰米

对于React，Vue构建的单页面应用老说，SEO是一个众所周知的问题。服务端渲染(SSR-server Side Render)是目前看来最好的解决办法。React应用有Next.js，对应Vue的解决方案就是Nuxt.js。

Vue.js通用应用框架-Nuxt.js的上手教程

1.简介

官网：https://nuxtjs.org/

GitHub：https://github.com/nuxt/nuxt.js

Nuxt.js 是什么？

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

通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。

我们的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有 Node.js 项目中使用 Nuxt.js。

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

除此之外，我们还提供了一种命令叫：nuxt generate，为基于 Vue.js 的应用提供生成对应的静态站点的功能。

我们相信这个命令所提供的功能，是向开发集成各种微服务（microservices）的 Web 应用迈开的新一步。

作为框架，Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性，例如异步数据加载、中间件支持、布局支持等。

2.构建第一个Nuxt.js项目

推荐使用Nuxt提供的模板。假设你已经安装了vue-cli，如果没有安装请先执行npm install vue-cli -g来安装vue-cli。

$ vue init nuxt-community/starter-template <project-name>

进入到项目文件夹中安装依赖包。

cd <project-name>
npm install

启动项目。

npm run dev

打开浏览器，访问http://localhost:3000。就能看到Next渲染出来的页面了。

3.添加页面

新建完成的项目结构如下图所示：

Vue.js通用应用框架-Nuxt.js的上手教程

项目结构

Nuxt约定所有页面都放在pages文件夹下，Nuxt会根据目录结构自动生成对应的路由。

现在在pages下新建Vue文件test.vue，访问http://localhost:3000/test即可看到刚刚添加的页面。

4.引入第三方插件

通常情况下我们都需要引入第三方的插件，比如前段组件，日志等。
第一步当然是安装插件，此处以element-UI为例。

npm install element-ui

虽然下载了element-ui的包但是却不能像普通项目那样直接在Vue实例中import然后使用。Nuxt的内核项目都在.nuxt目录下，如果修改这下面的文件是不会生效的。因为每次编译都会重新生成文件，所以直接修改该项目文件是无效的。

Vue.js通用应用框架-Nuxt.js的上手教程

内核项目结构

虽然不能直接修改，但是Nuxt提供了特殊的方式引入第三方插件。

第一步，在pulgin文件夹下新建js文件element-ui.js。文件内容如下。

import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Element)

第二步，修改nuxt.config.js。添加plugins属性。

/**
   * include third-party plugin
   */
  plugins: ['~plugins/element-ui'] // element-ui.js文件地址

重新编译之后，Nuxt会编译该第三方插件并使用。此时在任何一个Vue文件中都能使用该第三方插件。

5.静态资源文件

你可以把静态资源文件放到static文件夹下，然后就可以使用http://localhost:3000/<文件名>来访问静态资源文件。

Nuxt提供的功能还有很多，比如动态路由，ESLint代码检测。今天先介绍到这里，其他深入的用饭请参考官方网站。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米