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


Posted in Javascript onDecember 25, 2017

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

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

Javascript 相关文章推荐
javascript 跳转代码集合
Dec 03 Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
Oct 29 Javascript
JS日期和时间选择控件升级版(自写)
Aug 02 Javascript
js获取select选中的option的text示例代码
Dec 19 Javascript
js兼容火狐显示上传图片预览效果的方法
May 21 Javascript
js设置document.domain实现跨域的注意点分析
May 21 Javascript
JS动态添加选项案例分析
Oct 17 Javascript
jQuery插件form-validation-engine正则表达式操作示例
Feb 09 Javascript
vue.js选中动态绑定的radio的指定项
Jun 02 Javascript
微信小程序 五星评分的实现实例
Aug 04 Javascript
Vue 创建组件的两种方法小结(必看)
Feb 23 Javascript
HTML+JavaScript实现扫雷小游戏
Sep 30 Javascript
微信小程序录音与播放录音功能
Dec 25 #Javascript
利用vue + element实现表格分页和前端搜索的方法
Dec 25 #Javascript
VueRouter导航守卫用法详解
Dec 25 #Javascript
基于zTree树形菜单的使用实例
Dec 25 #Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 #jQuery
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
Dec 25 #Javascript
详解vue-cli之webpack3构建全面提速优化
Dec 25 #Javascript
You might like
Smarty的配置与高级缓存技术分享
2012/06/05 PHP
PHP微信红包API接口
2015/12/05 PHP
浅谈PHP实现大流量下抢购方案
2017/12/15 PHP
javascript创建createXmlHttpRequest对象示例代码
2014/02/10 Javascript
js动态切换图片的方法
2015/01/20 Javascript
再JavaScript的jQuery库中编写动画效果的指南
2015/08/13 Javascript
jQuery Validate表单验证深入学习
2015/12/18 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
2016/07/08 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
2016/07/28 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
JS实现的表头列头固定页面功能示例
2017/01/10 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
2017/02/03 Javascript
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
vue.js响应式原理解析与实现
2020/06/22 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
2019/04/20 Javascript
vue中uni-app 实现小程序登录注册功能
2019/10/12 Javascript
node 版本切换的实现
2020/02/02 Javascript
python使用正则表达式分析网页中的图片并进行替换的方法
2015/03/26 Python
详解python中sort排序使用
2019/03/23 Python
Python实现制度转换(货币,温度,长度)
2019/07/14 Python
使用selenium和pyquery爬取京东商品列表过程解析
2019/08/15 Python
Python中低维数组填充高维数组的实现
2019/12/02 Python
Python ADF 单位根检验 如何查看结果的实现
2020/06/03 Python
python实现斗地主分牌洗牌
2020/06/22 Python
Python 利用Entrez库筛选下载PubMed文献摘要的示例
2020/11/24 Python
基于html5 canvas做批改作业的小插件
2020/05/20 HTML / CSS
党员公开承诺事项
2014/03/25 职场文书
个人公开承诺书
2014/03/28 职场文书
初中国旗下的演讲稿
2014/08/28 职场文书
2014校长四风问题对照检查材料思想汇报
2014/09/16 职场文书
故宫导游词
2015/01/31 职场文书
《鸟的天堂》教学反思
2016/02/19 职场文书
2021-4-5课程——SQL Server查询【3】
2021/04/05 SQL Server
星际争霸:毕姥爷vs解冻01
2022/04/01 星际争霸
《现实主义勇者的王国再建记》第三弹OST全曲试听片段公开
2022/04/04 日漫
开发微信小程序之WXSS样式教程
2022/04/18 HTML / CSS