Nuxt.js 学习笔记
起源
最主要的原因时使用vue-cli搭建的SPA(单页应用)不利于搜索引擎的SEO操作。搜索引擎对SPA的抓取并不好,特别是百度根本没法抓取到SPA的内容页面,所以我们必须把我们的应用在服务端渲染成适合搜索引擎抓取的页面,再下载到客户端。
Nuxt.js是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染)。再直白点说,就是Vue.js原来是开发SPA(单页应用)的,但是随着技术的普及,很多人想用Vue开发多页应用,并在服务端完成渲染。这时候就出现了Nuxt.js这个框架,她简化了SSR的开发难度。还可以直接用命令把我们制作的vue项目生成为静态html。
第一章 Nuxt.js介绍
Nuxt.js 是一个基于 Vue.js 的通用应用框架。
通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI渲染。
优点:
- 基于 Vue.js
- 自动代码分层
- 服务端渲染
- 强大的路由功能,支持异步数据
- 静态文件服务
- ES6/ES7 语法支持
- 打包和压缩 JS 和 CSS
- HTML头部标签管理
- 本地开发支持热加载
- 集成ESLint
- 支持各种样式预处理器: SASS、LESS、 Stylus等等
第二章 Nuxt.js环境搭建
首先,本机需要有node环境,这边不再阐述(均在命令行进行)。
1.安装vue-cli脚手架
npm install vue-cli -g
查看是否安装成功
vue -V
2.首先创建项目存放位置,即项目名称(盘符自选)
mkdir appName
3.进入项目目录,初始化Nuxt.js项目
cd appName
vue init nuxt/starter
会询问你项目的名称、作者之类的信息,自行填写。
4.安装依赖包
npm install
5.启动服务
npm run dev
6.此时,在浏览器输入localhost:3000,即可看到界面效果(如下图)。
现在,我们修改项目目录下的/pages/index.vue文件section里的内容为“HelloWorld”保存,浏览器中内容会热更新替换为“HelloWorld”。
第三章 Nuxt.js目录结构
|-- .nuxt // Nuxt自动生成,临时的用于编辑的文件,build
|-- assets // 用于组织未编译的静态资源入LESS、SASS 或 JavaScript
|-- components // 用于自己编写的Vue组件,比如滚动组件,日历组件,分页组件
|-- layouts // 布局目录,用于组织应用的布局组件,不可更改。
|-- middleware // 用于存放中间件
|-- pages // 用于存放写的页面,我们主要的工作区域
|-- plugins // 用于存放JavaScript插件的地方
|-- static // 用于存放静态资源文件,比如图片
|-- store // 用于组织应用的Vuex 状态管理。
|-- .editorconfig // 开发工具格式配置
|-- .eslintrc.js // ESLint的配置文件,用于检查代码格式
|-- .gitignore // 配置git不上传的文件
|-- nuxt.config.json // 用于组织Nuxt.js应用的个性化配置,已覆盖默认配置
|-- package-lock.json // npm自动生成,用于帮助package的统一性设置的,yarn也有相同的操作
|-- package-lock.json // npm自动生成,用于帮助package的统一性设置的,yarn也有相同的操作
|-- package.json // npm包管理配置文件
第四章 修改配置项
1.配置IP和端口号
修改项目根目录package.json文件(如下图)
注意:修改配置文件、新增页面必须重启服务
此时,在浏览器地址栏输入http://127.0.0.1:8888,即可预览项目。
2.配置全局css
在目录/assets下新建css文件夹、在css文件夹下新建reset.css文件,写入
html {
padding:;
margin:;
color: red;
}
修改根目录下的nuxt.config.js文件(如图):
修改完以后,保存,页面效果会跟着变化。
这时候省查元素,head标签里就会正常引入reset.css文件样式了。
更多配置参考Nuxt官网配置。
第五章 Nuxt的路由与传参
Nuxt.js对路由进行了封装,无需像vue一样配置route/index.js,是自动生成的在目录/.nuxt/router.js。
1.创建一个简单的路由
我们在/pages下创建两个文件夹news和product,在文件夹下分别创建两个页面list和detail(如图)。
当我们创建完页面,会发现目录/.nuxt/router.js文件已经自动生成路由。多级路由后面再说。
现在填充页面内容:
/pages/index页面:
<template>
<section>
<div>
Index
<nuxt-link to="/news/list">news</nuxt-link>
<nuxt-link to="/product/list">product</nuxt-link>
</div>
</section>
</template>
/pages/news/list页面:
<template>
<section>
<div>
News/List
<nuxt-link to="/">index</nuxt-link>
<nuxt-link to="/news/detail">news detail</nuxt-link>
</div>
</section>
</template>
/pages/news/detail页面:
<template>
<section>
<div>
News/Detail
<nuxt-link to="/">index</nuxt-link>
</div>
</section>
</template>
/pages/product/list页面:
<template>
<section>
<div>
Product/List
<nuxt-link to="/">index</nuxt-link>
<nuxt-link to="/product/detail">product detail</nuxt-link>
</div>
</section>
</template>
/pages/product/detail页面:
<template>
<section>
<div>
Product/Detail
<nuxt-link to="/">index</nuxt-link>
</div>
</section>
</template>
页面填充完毕,这边使用的“nuxt-link”类似于“router-link”。点击链接即可实现跳转。
2.页面跳转传参
未完待续、、、
Nuxt.js 学习笔记的更多相关文章
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- Vue.js学习笔记(2)vue-router
vue中vue-router的使用:
- JS 学习笔记--9---变量-作用域-内存相关
JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...
- WebGL three.js学习笔记 使用粒子系统模拟时空隧道(虫洞)
WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...
- WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法
WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...
- WebGL three.js学习笔记 创建three.js代码的基本框架
WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
- 2019-4-29 js学习笔记
js学习笔记一:js数据类型 1:基本数据类型 number类型(整数,小数) String类型 boolean类型 NaN类型其实是一个nu ...
- 一点感悟:《Node.js学习笔记》star数突破1000+
写作背景 笔者前年开始撰写的<Node.js学习笔记> github star 数突破了1000,算是个里程碑吧. 从第一次提交(2016.11.03)到现在,1年半过去了.突然有些感慨, ...
随机推荐
- java注解 @SuppressWarnings注解用法
@SuppressWarnings注解用法 @SuppressWarnings注解主要用在取消一些编译器产生的警告对代码工具左侧行列提示,但这种警告可以通过注释类型声明来取消 @SuppressWar ...
- nginx配置伪静态
最近做门户网站,使用了的nginx重写规则 项目目录下写好 nginx.conf文件 然后在打开nginx配置文件,在server引入对应的重写规则的文件就可以了 当然直接写在配置里面 locatio ...
- ASP.NET MVC学习(三)之过滤器Filter
http://www.cnblogs.com/yaopengfei/p/7910763.html
- MySQL记录异常实体类设计
public class LogInfo { /// <summary> /// 应用名 /// </summary> public string AppName { get; ...
- 【原创】express3.4.8源码解析之Express结构图
前记 最近为了能够更好的搭建博客,看了开源博客引擎ghost源代码,顺道更深入的去了解express这个出名的nodejs web framework. 所以接下来一段时间对expressjs做一个源 ...
- Sublime Text 2 绿化与汉化 [Windows篇]
其实 ST3 已经出了很久了,可是我这个人恋旧,一直钟爱 ST2,所以就选择她了.最近我的 ST2 越来越卡,甚至有时候输入都会延迟1秒,所以打算自己搞个绿化版. 打开 Sublime Text 官网 ...
- 前三章 man手册 查看文件
1 – 3章 1.1 man手册: 分1 - 9个区域,可以认为是一个一个小节 把man手册理解为一本书 第一节:可执行程序或shell命令 第二节:系统调用 第三节:库调用 第四节:特殊文件 第五节 ...
- 如何使用ASP.NET开发基于推技术的聊天室?
public class Content : System.Web.UI.Page{private void Page_Load(object sender, System.EventArgs e){ ...
- select & input的disabled属性及其向后台传值问题
1.select & input disabled属性 select & input 均具有disabled属性,设置该属性可禁止修改select / input 的文本内容,同时也会 ...
- 统一过程模型(RUP/UP)
http://blog.sina.com.cn/s/blog_6a06f1b7010121hz.html 统一过程(RUP/UP,Rational Unified Process)是一种以用例驱动.以 ...