Nuxt(一) Nuxt初步认识

多数基于webpack构建的项目，编译出来的html文件，资源文件都被打包到js中，这样的页面不利于seo 搜索引擎优化（Search Engine Optimization）冰爷内容到达时间（time-to-content，或者称之为首屏渲染时长），也有很大的优化空间，引入Nuxt.js框架。

一、Nuxt简介

Nuxt.js是一个基于Vue.js的通用应用框架，通过客户端/服务端基础架构的抽象组织，Nuxt.js主要关注的是应用的UI渲染。

Nuxt.js预设了利用Vue.js开发服务daunt渲染的应用所需要的各种配置。

　　【nuxt generate】基于Vue.js的应用提供生成对应的静态站点的功能。

二、Nuxt.js特性

　　1.基于Vue.js；

　　2.自动代码分层；

　　3.服务端渲染；

　　4.强大的路由功能。支持异步数据；

　　5.静态文件服务；

　　6.ES6/ES7语法支持；

　　7.打包和压缩JS和CSS；

　　8.HTML头部标签管理；

　　9.本地开发支持热加载；

　　10.集成ESLint；

　　11.支持各种样式预处理器：SASS、LESS、Stylus等

三、使用

1.安装，starter模板

vue init nuxt/starter <project-name>

如果没有安装vue-cli，需要先安装

npm install -g vue-cli

然后进入到项目文件夹

cd <project-name>

安装依赖

npm install

运行项目

npm run dev

注： Nuxt.js会监听pages目录中的文件变更并自动重启更新。

特别注意：node的版本（>7）不能太低，尽量高版本。

打开页面localhost:3000可以看到

在coding之前先了解项目的结构

对结构目录的说明（下面红色的标记的表示文件夹的名称不可更改）

　　资源目录assets 用于组织编译静态资源如LESS、SASS或者JavaScript.

　　组件目录components用于组织应用的Vue.js组件。Nuxt.js不会扩展增强该目录下的Vue.js组件，即这些组件不会像页面组件那样拥有asyncData方法的特性

　　布局目录layouts用于组织应用的布局组件。

　　中间件目录middleware用于存放应用的中间件。

　　页面目录pages用于组织应用的路由及视图。Nuxt.js框架读取该目录下所有的.vue文件并自动生成对应的路由配置。

　　插件目录plugins用于组织那些需要在根vue.js应用实例化之前需要运行的JavaScript插件。

　　静态文件目录 static用于存放应用的静态文件，此类文件不会被Nuxt.js调用Webpack进行构建编译处理。服务器启动的时候，该目录下的文件会被映射至应用的根路径 /下。

　　Store目录store用于组织应用的Vuex文件。Nuxt.js框架集成了Vuex状态树的相关功能配置，在store目录下创建一个index.js文件可激活这些配置。

　　nuxt.config.js文件用于组织Nuxt.js应用的个性化配置，以便覆盖默认配置

　　package.json 文件用于描述应用的依赖关系和对外暴露的脚本接口

转载于:https://www.cnblogs.com/fanlina/p/8309146.html

Nuxt(一) Nuxt初步认识相关推荐

[Nuxt.js]Nuxt项目启动如何跳过“Are you interested in participation?”
每次运行Nuxt项目都会提示"Are you interested in participation?(Y/n)" 真的是有够讨厌的呐,怎么办??? 第一种方法nuxt.confi ...
[Nuxt.js]Nuxt项目启动跳过“Are you interested in participation?”
nuxt.config.js的module.exports = {}中添加 telemetry:false,
imchat视频聊天室 linux,基于Nuxt+Vant聊天模板|nuxt.js仿微信界面|红包|朋友圈
项目说明 > [NuxtIMChat项目]是基于vue.js+nuxt.js+vuex+webpack+vant-ui开发的仿微信聊天实例.实现了消息发送.图片/视频预览.下拉刷新/长按弹窗.朋 ...
pm2 管理nuxt
1.Node环境搭建安装之后通过命令node -v来检查node是否安装成功,通过命令npm -v来检查npm是否安装成功. 2. A.全局安装pm2 执行命令: npm i pm2 -g 或者 B ...
全局安装nuxt_Nuxt项目搭建到Nuxt项目部署
a.为什么? Vue.js原来是开发SPA(单页应用)的,但很多人想用Vue开发多页应用(有利于SEO操作),并在服务端完成渲染,于是Nuxt.js框架出生了,可实现用命令把vue项目生成为静态htm ...
基于vue-cli，做个nuxt脚手架～
参考了nuxt的项目模版改了了下,可以省点事情- 主要集成了iview,@nuxtjs/axios,eslint(airbnb),一些兼容的polyfill,pm2配置文件 element-ui用法没 ...
nuxt.js的核心代码_Nuxt.js中的通用应用程序代码结构
nuxt.js的核心代码 by Krutie Patel 通过克鲁蒂·帕特尔(Krutie Patel) Nuxt.js中的通用应用程序代码结构 (Universal application code ...
nuxt项目打包上线之二
之前写过一篇nuxt打包上线的文章,请看这里:https://www.cnblogs.com/daisygogogo/p/11218809.html 上一篇文章的部署流程有点不好的地方,就是它适用于只 ...
服务器ssr进程启动怎么运行,要SSR? NUXT项目从初始化到部署服务器流程全记录
首先,简单介绍一下, nuxt.js 是什么 Nuxt.js 是一个 Vue.js的SSR通用框架,最常用的就是用来作SSR(服务器端渲染). 首先说下 SSR,最近很热的词,意为 Server Si ...

Nuxt(一) Nuxt初步认识

Nuxt(一) Nuxt初步认识相关推荐

最新文章

热门文章