Nuxt

# 特性

• 基于 Vue.js
• 自动代码分层
• 服务端渲染(通过SSR)
• 单页应用程序 (SPA)
• 静态化 (预渲染)
• 强大的路由功能，支持异步数据
• 静态文件服务
• ES2015+ 语法支持
• 打包和压缩 JS 和 CSS
• HTML 头部标签管理
• 本地开发支持热加载
• 集成 ESLint
• 支持各种样式预处理器： SASS、LESS、 Stylus 等等
• 支持 HTTP/2 推送

# 模板结构

├── app.config.js  # 项目配置文件
├── assets         # 引用资源
├── components     # 通用组件或非页面级组件
├── layouts        # 个性化布局文件，参考：https://zh.nuxtjs.org/guide/views
├── middleware     # 中间件，https://zh.nuxtjs.org/guide/routing
├── mock           # 模拟数据
├── nuxt.config.js # Nuxt配置
├── package.json
├── pages          # 页面级组件
├── plugins        # 插件
├── static         # 静态资源
├── store          # Vuex store
└── styles         # 全局样式

# 定制特性

# 结构特性

• styles: src 目录下添加 styles 文件夹，存放全局样式；
• plugin：src 目录下添加 plugins 文件夹，存放全局功能扩展；
  • plugins/static.js 静态变量声明；
  • plugins/mock.js 配置和生成模拟数据

# 语言特性

• HTML：使用 pug；
• CSS：使用stylus。

# 功能特性

• 添加：mockjs 模拟接口数据;
• 添加：stylus 变量文件(src/styles/variable.styl)全局加载；
  • css中可直接使用变量并不用引入变量文件；
  • 配置项在nuxt.config.js 文件中。
• 添加：huskyGit操作钩子： ◦pre-commit 检查代码格式；
• commit-msg 检查提交信息是否规范。
• 预置(可选)：Mint UI 或 Element-UI；
• 预置(可选)：HTTP请求工具(xsy-plugins/fetch)；
• 预置(可选)：rem计算工具(xsy-plugins/utils)；
• 预置(可选)：通用过滤器(xsy-plugins/filters)；
• 预置(可选)：H5 模拟 Native 转场动画（使用route-transition）；

# 静态变量（static.js）

此文件包含的是前端使用的常量，字符串常量必须使用此文件定义

命名规则：

• 基础部分的为：BASE开头，e.g. BASE_URL；
• 全局统一的为：GLOBAL开头，e.g. GLOBAL_TOKEN；
• 某些功能的为：功能名称大写，e.g. USER_INFO。

// e.g.
export const BASE_URL = 'https://api.shinho.com'

# 数据模拟

• 启用：在浏览器 console 执行 localStorage.mock = true；
• 禁用：在浏览器 console 执行 localStorage.removeItem('mock')；
• 在mock文件夹中，增加文件，拦截请求并模拟数据，参照mock.js；
• 可在plugins/mock.js中调整mock的配置。

# 错误监控

需要在app.config.js中配置 fundebugApiKey。

详细信息请查阅：https://www.fundebug.com。

# 配置说明

关键配置在此说明，减少阅读官方文档的时间

• mode：此模板设置值为 spa（单页面应用）。SPA 模式不会使用服务端渲染，如果需要则使用 nuxt 的默认配置 universal。
• plugins：需要加载的 JS 插件列表，例如：UI组件库、工具类、HTTP请求工具、错误监控、vue自定义指令等需要在渲染页面前加载的JS。
• css：需要加载的 CSS 文件。例如：UI组件库的样式，全局通用样式。
• modules：Nuxt 扩展，增强nuxt的功能。例如：代理，可从官方社区寻找你所需要的扩展awesome-nuxt#modules。
• proxyTable：@gauseen/nuxt-proxy 代理扩展的配置。参考@gauseen/nuxt-proxy，主要在与后端联调时发挥作用。
• styleResources：@nuxtjs/style-resources 全局加载 CSS 变量配置。参考@nuxtjs/style-resources。
• router：router 属性让你可以个性化配置 Nuxt.js 应用的路由，参考链接Nuxt-router。
• transition：页面过渡效果。
  • 简单功能参考Nuxt-transition。
  • 定制化参考route-transition。

# 常见需求

# 使用REM

可使用xsy-plugins/utils中的rem函数。新建plugins/rem.js文件内容如下，并在nuxt.config.js/plugins下引入。

import { remSetting } from 'xsy-plugins/utils'

// 750为设计稿宽度
remSetting(750)

###自定义错误页面

参考链接：nuxt文档-layout

# 常用工具函数

参考链接：JS工具函数

# 调用原生功能

参考链接：JS调用原生