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 相关文章推荐
对 jQuery 中 data 方法的误解分析
Jun 18 Javascript
jQuery实现HTML表格单元格的合并功能
Apr 06 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
May 31 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
Jun 23 Javascript
谈谈对JavaScript原生拖放的深入理解
Sep 20 Javascript
ES6新特性之变量和字符串用法示例
Apr 01 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
Jun 05 Javascript
详解如何构建Angular项目目录结构
Jul 13 Javascript
Vue.js弹出模态框组件开发的示例代码
Jul 26 Javascript
微信小程序实现折叠展开效果
Jul 19 Javascript
微信小程序开发实现的IP地址查询功能示例
Mar 28 Javascript
原生JS实现列表内容自动向上滚动效果
May 22 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
PHP 第二节 数据类型之转换
2012/04/28 PHP
PHP函数microtime()用法与说明
2013/12/04 PHP
php中header跳转使用include包含解决参数丢失问题
2015/05/08 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
JQuery 无废话系列教程(一) jquery入门 [推荐]
2009/06/23 Javascript
动态样式类封装JS代码
2009/09/02 Javascript
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
2013/04/26 Javascript
JS替换文本域内的回车示例
2014/02/18 Javascript
seaJs的模块定义和模块加载浅析
2014/06/06 Javascript
javascript获取当前鼠标坐标的方法
2015/01/10 Javascript
基于jQuery实现的菜单切换效果
2015/10/16 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
2016/08/11 Javascript
js如何找出字符串中的最长回文串
2018/06/04 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
基于layui内置模块(element常用元素的操作)
2019/09/20 Javascript
JavaScript 严格模式(use strict)用法实例分析
2020/03/04 Javascript
es6函数之严格模式用法实例分析
2020/03/17 Javascript
JavaScript计算出两个数的差值
2020/03/19 Javascript
javascript 函数的暂停和恢复实例详解
2020/04/25 Javascript
在Python中操作列表之List.append()方法的使用
2015/05/20 Python
Python 给某个文件名添加时间戳的方法
2018/10/16 Python
Python下简易的单例模式详解
2019/04/08 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
python空元组在all中返回结果详解
2020/12/15 Python
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
2013/02/07 HTML / CSS
HTML 5.1来了 9月份正式发布 更新内容预览
2016/04/26 HTML / CSS
小米乌克兰网上商店:Xiaomi.UA
2019/10/29 全球购物
销售行业个人求职自荐信
2013/09/25 职场文书
应届生幼儿园求职信
2013/11/12 职场文书
上课睡觉检讨书
2014/01/28 职场文书
放飞梦想演讲稿600字
2014/08/26 职场文书
2014年职称评定工作总结
2014/11/26 职场文书
签订劳动合同通知书
2015/04/16 职场文书
莫言诺贝尔获奖感言(全文)
2015/07/31 职场文书
用Python的绘图库(matplotlib)绘制小波能量谱
2021/04/17 Python