nuxt引入js_Nuxt.js使用笔记

Cap1 前言

目前使用Nuxt.js框架做了几个项目，不得不说对比与Vue-CLI，Nuxt.js实在是懒人必备框架，什么东西都帮你配置好了。所以多少对它有点了解，所以有了这个笔记。希望未来再做类似的地方有个能够参考的笔记。

Cap2 目录结构

/assets # 能被webpack处理的项目资源

/components # 项目组件

/layouts # 项目布局

/middleware # 项目中间件

/pages # 项目页面 页面路由自动生成

/plugins # 项目插件

/static # 不被webpack处理的静态资源

/store # Vuex状态管理目录

nuxt.config.js # Nuxt.js配置文件

package.json # npm包管理器文件

/assets：这个目录可以存放字体，样式，图片等，这些资源将会被WebPack处理器编译最终形态文件。

/components：存放Vue.js组件目录，如果Nuxt.js特征方法是不能在该目录下使用的。

/layouts：存放项目布局组件，在不同的页面展示双栏或者单栏布局。

/middleware：放置项目中间件应用，例如路由鉴权等功能。

/pages：放置项目视图和路由。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。

/plugins：放置声明Vue插件或者一些JavaScript插件配置文件。

/static：放置静态资源目录，可以启动后直接访问资源。

/store：Vuex状态树管理配置文件。

nuxt.config.js：用于Nuxt.js配置，覆盖默认设置。

除了上面默认的文件夹，我们可以自己额外添加文件：

/api：存放项目接口文件。

/utils：项目工具类。

/test：单元测试类。

Cap3 单应用和seo优化

现在绝大项目都是前后端分离的项目，所以纯粹作为静态页面来编写，打开nuxt.config.js修改其中的mode: 'spa'即可。然后将package.json中的dev启动方式修改成"dev": "nuxt --spa"加快启动编译项目。

SPA：没有服务器端渲染(只有客户端路由导航等)

Universal ：同构应用程序(服务器端呈现+客户端路由导航等)

Nuxt.js的SEO优化还算可以，需要注意header设置meta设置，Nuxt.js使用的是Vue-Meta，可以到它文档查看相关设置：

export default {

/*

** Headers of the page

*/

head: {

htmlAttrs: {

lang: 'zh-CN',

},

title: `淮城一只猫`,

meta: [

{ charset: 'utf-8' },

{ name: 'apple-mobile-web-app-capable', content: 'yes' }, // iOS浏览器禁止缩放

{ name: 'viewport', content: 'width=device-width, initial-scale=1.0, shrink-to-fit=no, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no' },

{ hid: 'keywords', name: 'keywords', content: 'keywords' },

{ hid: 'description', name: 'description', content: 'description' },

{ name: 'renderer', content: 'webkit' }, // 强制让360浏览器使用Webkit内核

{ 'http-equiv': 'X-UA-Compatible', content: 'IE=edge' },

],

script: [],

link: []

},

}

然后在pages每个页面设置：

export default {

head() {

return {

title: "淮城一只猫 - 首页"

};

}

}

如果能力有条件的可以尝试Nuxt PWA，这里就不再详细描述了。

服务端渲染

如果在前端展示的时候，给搜索引擎爬虫抓取页面需要注意更好的SEO展示，那么就需要服务器端渲染了(SSR)，具体内容可以查看官网文档：为什么使用服务器端渲染 (SSR)？

主要博主做的项目大部分都是后端界面，所以对此也不是太熟，故这里就不再描述了。

Cap4 样式预处理器

配置样式预处理器也很简单，Nuxt.js有自己封装的包：Nuxt Style Resources，支持sass、less、stylus。现在项目用sass处理器比较多，就以它为例：

yarn add sass-loader node-sass # 安装SASS预处理器

yarn add @nuxtjs/style-resources # 安装nuxt.js 样式模块

在nuxt.config.js添加：

export default {

modules: [

'@nuxtjs/style-resources', // 导入模块

],

/*

** Sass module

*/

styleResources: {

// your settings here