欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-07 15:02:20
对于react,vue构建的单页面应用老说,seo是一个众所周知的问题。服务端渲染(ssr-server side render)是目前看来最好的解决办法。react应用有...

对于react,vue构建的单页面应用老说,seo是一个众所周知的问题。服务端渲染(ssr-server side render)是目前看来最好的解决办法。react应用有next.js,对应vue的解决方案就是nuxt.js。

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

1.简介

官网:

github:

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代码检测。今天先介绍到这里,其他深入的用饭请参考官方网站。

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