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 查找select ,并触发事件的实现代码
Mar 30 Javascript
jQuery类选择器用法实例
Dec 23 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
Aug 06 Javascript
JavaScript+html5 canvas绘制的小人效果
Jan 27 Javascript
全面解析Bootstrap表单样式的使用
Sep 09 Javascript
从零学习node.js之express入门(六)
Feb 25 Javascript
ES6新特性八:async函数用法实例详解
Apr 21 Javascript
微信小程序与webview交互实现支付功能
Jun 07 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
Sep 02 Javascript
webpack5 联邦模块介绍详解
Jul 08 Javascript
在Vuex中Mutations修改状态操作
Jul 24 Javascript
JS实现京东商品分类侧边栏
Dec 11 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+Ajax实时自动检测是否联网的方法
2015/07/01 PHP
php上传图片并压缩的实现方法
2015/12/22 PHP
从sohu弄下来的flash中展示图片的代码
2007/04/27 Javascript
javascript脚本编程解决考试分数统计问题
2008/10/18 Javascript
jQuery列表拖动排列具体实现
2013/11/04 Javascript
jquery遍历select元素(实例讲解)
2013/12/31 Javascript
JavaScript实现查找字符串中第一个不重复的字符
2014/12/29 Javascript
jQuery中closest和parents的区别分析
2015/05/07 Javascript
javascript中的try catch异常捕获机制用法分析
2016/12/14 Javascript
jQuery插件Echarts实现的渐变色柱状图
2017/03/23 jQuery
Vue-Router模式和钩子的用法
2018/02/28 Javascript
vue添加class样式实例讲解
2019/02/12 Javascript
JavaScript实现美化滑块效果
2019/05/17 Javascript
Node.js API详解之 timer模块用法实例分析
2020/05/07 Javascript
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
分享Python文本生成二维码实例
2016/01/06 Python
Numpy掩码式数组详解
2018/04/17 Python
Python实现查找字符串数组最长公共前缀示例
2019/03/27 Python
Python3 批量扫描端口的例子
2019/07/25 Python
Python enumerate函数遍历数据对象组合过程解析
2019/12/11 Python
Window系统下Python如何安装OpenCV库
2020/03/05 Python
Python实现加密的RAR文件解压的方法(密码已知)
2020/09/11 Python
python Matplotlib数据可视化(2):详解三大容器对象与常用设置
2020/09/30 Python
scrapy-splash简单使用详解
2021/02/21 Python
Abe’s of Maine:自1979以来销售相机和电子产品
2016/11/21 全球购物
英国领先的NHS批准的在线药店:Pharmacy2U
2017/01/06 全球购物
Lookfantastic日本官网:英国知名护肤、化妆品和头发护理购物网站
2018/04/21 全球购物
MIS软件工程师的面试题
2016/04/22 面试题
小学英语教学反思
2014/01/30 职场文书
2015年销售员工作总结范文
2015/04/07 职场文书
Mysql MVCC机制原理详解
2021/04/20 MySQL
解决python绘图使用subplots出现标题重叠的问题
2021/04/30 Python
css display table 自适应高度、宽度问题的解决
2021/05/07 HTML / CSS
Redis数据结构之链表与字典的使用
2021/05/11 Redis
浅谈Redis中的RDB快照
2021/06/29 Redis
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS