Nuxt.js知识点

起源

最主要的原因时使用vue-cli搭建的SPA(单页应用)不利于搜索引擎的SEO操作。搜索引擎对SPA的抓取并不好,特别是百度根本没法抓取到SPA的内容页面,所以我们必须把我们的应用在服务端渲染成适合搜索引擎抓取的页面,再下载到客户端。

Nuxt.js是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染)。再直白点说,就是Vue.js原来是开发SPA(单页应用)的,但是随着技术的普及,很多人想用Vue开发多页应用,并在服务端完成渲染。这时候就出现了Nuxt.js这个框架,她简化了SSR的开发难度。还可以直接用命令把我们制作的vue项目生成为静态html。

首先说下 SSR,最近很热的词,意为 Server Side Rendering(服务端渲染),目的是为了解决单页面应用的 SEO 的问题,对于一般网站影响不大,但是对于论坛类,内容类网站来说是致命的,搜索引擎无法抓取页面相关内容,也就是用户搜不到此网站的相关信息。

既然说到 SSR 可以解决 SEO 的问题,不难想到原理就是将我们的 html 在服务端渲染,合成完整的 html 文件再输出到浏览器。

第一章 Nuxt.js介绍

Nuxt.js 是一个基于 Vue.js 的通用应用框架。

通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI渲染。

优点:

  • 基于 Vue.js
  • 自动代码分层
  • 服务端渲染
  • 强大的路由功能,支持异步数据
  • 静态文件服务
  • ES6/ES7 语法支持
  • 打包和压缩 JS 和 CSS
  • HTML头部标签管理
  • 本地开发支持热加载
  • 集成ESLint
  • 支持各种样式预处理器: SASS、LESS、 Stylus等等

第二章 Nuxt.js环境搭建

Nuxt.js 团队提供了 vue-cli 的初始化模板。前提安装 vue-cli,安装过的忽略此步

首先,本机需要有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.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文件,写入

1 html {
2   padding: 0;
3   margin: 0;
4   color: red;
5 }

修改根目录下的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页面:

1 <template>
2   <section>
3     <div>
4       Index
5       <nuxt-link to="/news/list">news</nuxt-link>
6       <nuxt-link to="/product/list">product</nuxt-link>
7     </div>
8   </section>
9 </template>

/pages/news/list页面:

1 <template>
2   <section>
3     <div>
4       News/List
5       <nuxt-link to="/">index</nuxt-link>
6       <nuxt-link to="/news/detail">news detail</nuxt-link>
7     </div>
8   </section>
9 </template>

/pages/news/detail页面:

1 <template>
2   <section>
3     <div>
4       News/Detail
5       <nuxt-link to="/">index</nuxt-link>
6     </div>
7   </section>
8 </template>

/pages/product/list页面:

1 <template>
2   <section>
3     <div>
4       Product/List
5       <nuxt-link to="/">index</nuxt-link>
6       <nuxt-link to="/product/detail">product detail</nuxt-link>
7     </div>
8   </section>
9 </template>

/pages/product/detail页面:

1 <template>
2   <section>
3     <div>
4       Product/Detail
5       <nuxt-link to="/">index</nuxt-link>
6     </div>
7   </section>
8 </template>

页面填充完毕,这边使用的“nuxt-link”类似于“router-link”。点击链接即可实现跳转。

2.页面跳转传参

未完待续、、、

原文地址:https://www.cnblogs.com/Bkxk/p/10876303.html

时间: 2024-11-06 07:10:57

Nuxt.js知识点的相关文章

赵雅智:js知识点汇总

赵雅智:js知识点汇总,布布扣,bubuko.com

[Vue] Preload Data using Promises with Vue.js and Nuxt.js

Nuxt.js allows you to return a Promise from your data function so that you can asynchronously resolve data before displaying the page. This allows the server to fetch the data and render the page once it's ready. <template> <section class="c

Node.js知识点学习

Node.js知识点学习 一.基本概念 Node.js,或者 Node,是一个可以让 JavaScript 运行在服务器端的平台.可以说,Node.js开创了javascript模块化开发的先河,早期的javascript需求都很简单,基本都是写成函数的,然后是面向过程的写法,后来慢慢的引入面向对象开发思想,再后来就慢慢写成 类.最后node.js的出现才开始有了js模块化开发的概念,这使得臃肿的js代码免去了命名冲突等一系列开发难题. Node最大的特点就是采用了异步式I/O与事件驱动的架构设

[Vue] Build Vue.js Apps with the Vue-CLI and Nuxt.js

The vue-cli allows you to easily start up Vue projects from the command line while Nuxt.js enables a page-based routing system that follows your file structure. Combine these two projects and you'll have a Vue app created from scratch deployed in a m

nuxt.js express模板项目服务器部署

nuxt版本:0.10.6 技术栈:nuxt.js, express, pm2 部署环境:windows server 之前用nuxt.js 的express的模板项目在windows下用nginx进行代理访问,其实有点多余,直接用host文件就可以达到相同的效果,仅供娱乐吧,熟悉一下nginx的基本配置也是好的,其实这段时间研究nuxt.js比较多,主要还是想提高客户端访问首页更快一点. 之前使用nuxt.js generate直接生成对应的html静态文件,这个不需要服务器安装什么特殊的环境

Nuxt.js服务端渲染实践,从开发到部署

感悟 经过几个周六周日的尝试,终于解决了服务端渲染中的常见问题,也成功说服了公司新项目采用前后端分离的解决方案,当SEO不在是问题的时候,或许才是我们搞前端的真正的春天,其中也遇到了一些小坑,Nuxt.js官方还是很给力的,提issue后很积极的给予帮助,再次感谢Nuxt.js的开发团队. 解决的问题 路由鉴权 第一个拦路虎就是登陆时候的鉴权问题,如何把token保存到本地.官方使用express-session解决这个问题,但是这样做后端也需要使用nodejs,而我们公司使用的PHP.转念一想

nuxt.js 路由 , meta设置

Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置. 我做了一个小例子:大家看一下就明白了 <section class="container"> 路由传值可以通过 $route.params.id 来接收参数. <!-- 路由传值一个数组 idList : 首先声明一个数组[{name:'张三'},{name:'李四'},{name:'王五'}] 然后同级创建一个demo1.vue文件,里边内容自定义 --> <nu

nuxt.js里路径被占用,怎么修改当前路径

在package.json文件里面添加 "config":{ "nuxt":{ "host":"localhost",//可以为本地路径 "port":"3001"//自己定义 } }, 路径就变成http://localhost:3001 以下是示例 { "name": "nuxt-demo", "version": &quo

Nuxt.js(开启SSR渲染)

为什么要用Nuxt? 1.SEO 我们需要搜索引擎更多地抓取到我们的内容,更详细地认识到我们的网页结构,而不是仅对首页或特定静态页进行索引.再直白点说,就是Vue.js原来是开发SPA(单页应用)的,但是随着技术的普及,很多人想用Vue开发多页应用,并在服务端完成渲染.这时候就出现了Nuxt.js这个框架,她简化了SSR的开发难度.还可以直接用命令把我们制作的vue项目生成为静态html.  Nuxt.js适合作新闻.博客.电影.咨询这样的需要搜索引擎提供流量的项目.如果你要作移动端的项目,就没