nuxt可以直接编译HTML标签,Nuxt

一.Nuxt概念

Nuxt.js简单的说是Vue.js的通用框架，最常用的就是用来作SSR(服务器端渲染)。

二.Nuxt优点

基于 Vue.js

自动代码分层

服务端渲染

强大的路由功能，支持异步数据

静态文件服务

ES6/ES7 语法支持

打包和压缩 JS 和 CSS

HTML头部标签管理

本地开发支持热加载

集成ESLint

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

三 .SSR

1.概念：SSR，即服务器渲染，就是在服务器端将对Vue页面进行渲染生成html文件，将html页面传递给浏览器。

2.SSR优点：

<1>有利于搜索引擎的SEO操作。SPA的HTML只有一个无实际内容的HTML和一个app.js，SSR生成的HTML是有内容的，这让搜索引擎能够索引到页面内容。

<2>更快内容到达时间。传统的SPA应用是将bundle.js从服务器获取，然后在客户端解析并挂载到dom。而SSR直接将HTML字符串传递给浏览器。大大加快了首屏加载时间。

四.nuxt.js的安装

1.确保已经安装Node到系统中。

2.用npm来安装vue-cli这个框架，如果你已经安装过了，可以省略这步。

npm install vue-cli -g

安装完成后可以使用vue -V 来测试是否安装成功。(注意：这里要使用大写的V，小写无效)。

3.使用vue安装 nuxt

安装好vue-cli后，就可以使用init命令来初始化Nuxt.js项目。

vue init nuxt/starter

这时候他会在github上下载模版，然后会询问你项目的名称叫什么，作者什么的，这些完全可以根据自己的爱好填写。

4.使用npm install安装依赖包

npm install

这个过程是要等一会的，如果你这个过程安装失败，也不要慌张，你可以直接诶删除项目中的node_modules文件夹后，重新npm install进行安装。

5.使用npm run dev 启动服务

npm run dev

6.在浏览器输入 localhost:3000,可以看到结果。

五.Nuxt项目目录

|-- .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包管理配置文件

六.Nuxt常用配置项

1.配置IP和端口：

/package.json

"config":{"nuxt":{"host":"127.0.0.1","port":"1818"}

},

2.配置全局CSS

/assets/css/normailze.css

html{

color:red;

}

/nuxt.config.js

css:[‘~assets/css/normailze.css‘],

3.配置webpack的loader

在nuxt.config.js里是可以对webpack的基本配置进行覆盖的