{"id":17034004,"url":"https://github.com/yisibell/nuxt-cmsify-pwa-template","last_synced_at":"2026-04-28T21:34:48.750Z","repository":{"id":108780761,"uuid":"326651682","full_name":"yisibell/nuxt-cmsify-pwa-template","owner":"yisibell","description":"A Progressive Web App based on Nuxt.js","archived":false,"fork":false,"pushed_at":"2021-01-25T03:47:55.000Z","size":186,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-04T18:47:07.217Z","etag":null,"topics":["cms","i18n","koa","nuxtjs","pwa","vue","vue-composition-api","vuetify"],"latest_commit_sha":null,"homepage":"nuxt-cmsify-pwa-template.yisibell.vercel.app","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yisibell.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-01-04T10:45:25.000Z","updated_at":"2021-01-25T03:47:58.000Z","dependencies_parsed_at":"2023-03-06T19:01:23.133Z","dependency_job_id":null,"html_url":"https://github.com/yisibell/nuxt-cmsify-pwa-template","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/yisibell/nuxt-cmsify-pwa-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yisibell%2Fnuxt-cmsify-pwa-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yisibell%2Fnuxt-cmsify-pwa-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yisibell%2Fnuxt-cmsify-pwa-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yisibell%2Fnuxt-cmsify-pwa-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yisibell","download_url":"https://codeload.github.com/yisibell/nuxt-cmsify-pwa-template/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yisibell%2Fnuxt-cmsify-pwa-template/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32400867,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-28T19:38:08.556Z","status":"ssl_error","status_checked_at":"2026-04-28T19:37:55.688Z","response_time":56,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cms","i18n","koa","nuxtjs","pwa","vue","vue-composition-api","vuetify"],"created_at":"2024-10-14T08:37:03.373Z","updated_at":"2026-04-28T21:34:48.732Z","avatar_url":"https://github.com/yisibell.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# nuxt-cmsify-pwa-template\n\nA Progressive Web App based on Nuxt.js.\n\n# Build Setup\n\n```bash\n# install dependencies\n$ npm install\n```\n\n## 开发模式\n\n``` bash\n# 带热更新\n# 可修改命令参数\n# --theme=shein 来变更开发当前皮肤类型，默认为 default\n# --env=ft 来使当前皮肤应用 .env.ft 环境变量，默认使用 .env.development 环境变量\n$ npm run dev\n```\n\n打开浏览器预览：**127.0.0.1:3002/**。\n\n## 皮肤构建\n\n``` bash\n# 可用于构建单个皮肤或 \n# --theme 构建指定皮肤\n$ npm run build\n\n# 构建 themes 目录下的全部皮肤\n$ npm run build:all\n```\n\n## 启动应用\n\n``` bash\n# 两种方式启动\n# 1. 无托管\n$ npm start\n\n# 2. 使用 pm2 启动\n$ npm run pm2:start\n```\n\n**注：** 在执行启动应用目录之前，需优先执行构建皮肤命令。如果你期望对所有皮肤进行联合测试，请先执行 `npm run build:all`，否则执行单个皮肤构建 `npm run build`。\n\n# Used Technologies\n\n- **nuxt.js**\n- **@nuxtjs/pwa**\n- **@nuxtjs/composition-api**\n- **axios**\n- **@nuxtjs/dotenv**\n- **@nuxtjs/vuetify**\n- **scss**\n- **vue-toasted**\n\n# Features\n\n## 支持响应式\n\n**状态：** :heavy_check_mark:\n\n## 支持多语言\n\n**状态：** :heavy_check_mark:\n\n## 支持以 cms 的方式自定义页面内容\n\n**状态：** :heavy_check_mark:\n\n## 渐进式 Web 应用\n\n**状态：** :heavy_check_mark:\n\n## 皮肤系统\n\n**状态：** :heavy_check_mark:\n\n## 用户跟踪\n\n**状态：** :x:\n\n## 公共 package 抽取\n\n**状态：** :x:\n\n1. `nuxt-module` 将公共插件体系以 `nuxt module` 的形式封装独立。供各个皮肤使用。\n\n内容将包括如下：\n\n- **api 仓库** 数据接口定义及 `request` 工具。统一接口请求入口。\n- **composables 仓库** 组合式业务逻辑。\n- **sprite svg icon** `svg` 图标。\n- **toast** `toast` 提示工具。\n- **cms** `cms` 渲染组件。\n- **i18n** 本地语言包。\n\n\n## 友好的 `vue3 composition api` 过渡方案。\n\n**状态：** :heavy_check_mark:\n\n基于 `@nuxtjs/composition-api` 管理。\n\n## 友好的**开发**、**正式生产** 和 **测试生产** 环境区分，基于 `@nuxtjs/dotenv` 设计。\n\n**状态：** :heavy_check_mark:\n\n在项目根目录下，有 3 个 `env` 文件，分别为：\n\n`.env.development` 开发模式下的环境变量文件。\n`.env.ft` **ft** 测试环境下的环境变量文件。\n`.env.production` 正式环境下的环境变量文件。\n\n你可以在不同的环境变量文件中设置一些某个环境特定的变量，比如，数据接口的主机地址 `NUXT_APP_BASE_API`。\n\n在测试环境下，她长这样：\n\n``` shell\n# development env\n\n# 请求基地址\nNUXT_APP_BASE_API = 'http://ft-some-host.com/api'\n```\n\n在正式环境下，变成这样：\n\n``` shell\n# production env\n\n# 请求基地址\nNUXT_APP_BASE_API = 'http://some-host.com/api'\n```\n\n这样配置后，当前环境下的所有环境变量都会被设置到 **nuxt 应用** 的 `context.env` 对象下。\n\n这里的 `NUXT_APP_BASE_API` 就被应用为 `@nuxtjs/axios` 实例的 `baseURL`。具体可查看 `~/plugins/request.js` 中的实现。\n\n## 组织清晰的 `api` 接口封装，基于 `@nuxtjs/axios` 设计。\n\n为了方便的在项目中调用 `api` 接口，并且方便维护，该模板设计，封装了 `api` 目录和 `request` 插件。\n\n### **api目录**\n\n1. `~/api/modules` 数据接口模块，该文件夹下存放按模块划分的数据接口定义。\n\n例：`~/api/modules/user.js`\n\n``` js\n// 用户模块\n\nexport default (request) =\u003e ({\n  // 获取用户列表\n  index(params) {\n    return request({\n      url: `/user`,\n      method: 'get',\n      params,\n    })\n  },\n  // 新建用户\n  create(data) {\n    return request({\n      url: `/user`,\n      method: 'post',\n      data,\n    })\n  },\n  // 删除用户\n  del(id) {\n    return request({\n      url: `/user/${id}`,\n      method: 'delete',\n    })\n  },\n  // 修改用户\n  update(id, data) {\n    return request({\n      url: `/user/${id}`,\n      method: 'put',\n      data,\n    })\n  },\n})\n```\n\n如上所示，`user.js` 模块默认导出一个函数，该函数接收一个 `request` 参数 （在 `~/plugins/request.js` 中被传入）。\n然后，需要导出一个对象，该对象内就是该数据模块的各类接口定义。\n\n\n2. `~/api/index.js` 数据接口仓库整合导出。\n\n例：\n\n``` js\nimport user from './modules/user'\nimport email from './modules/email'\n\nexport default (request) =\u003e ({\n  user: user(request),\n  email: email(request),\n})\n```\n\n### **request插件**\n\n`~/plugins/request.js` 全局数据接口调用方式封装。\n\n**特性：**\n\n- 拥有 `请求拦截` 、`响应拦截` 、`请求错误处理` 和 `响应错误处理`。\n\n- 不同环境下，拥有不同的请求基地址 `baseURL`。\n\n- 扩展了请求方法的 **第二配置**。\n\n例：\n\n``` js\n// 正常的 axios 请求调用\naxios({\n  url: '/some/path',\n  method: 'get'\n})\n\n// 封装过后的 request 请求调用\n\n// 发送 formData 格式数据\nrequest({\n  url: '/some/path',\n  method: 'post'，\n  data: {\n    name: 'elenh',\n    age: 18\n  }\n}, {\n  dataType: 'formData'\n})\n\n// 发送含文件的 formData 格式数据\nconst data = new FormData()\nconst file = null // 文件\n\ndata.append('file' file)\ndata.append('other', 'test')\n\nrequest({\n  url: '/some/path',\n  method: 'post'，\n  data\n}, {\n  dataType: 'formData2'\n})\n\n// 使用 mock 接口\n// 将 mock 设置为 true 后，将使用当前环境 .env.* 文件设置的 NUXT_APP_MOCK_API 值作为请求基地址\n// 可配合像 yapi 这样的接口 mock 服务使用\nrequest({\n  url: '/some/path',\n  method: 'post'，\n  data\n}, {\n  mock: true\n})\n\n```\n\n- 一次注入，随处可用\n\n我们把 **api仓库** 以 `api` 为键名注入到了 **nuxt** 应用中。\n\n``` js\n// ~/plugins/request.js\n\n// api 仓库\nimport apiRespository from '~/api'\n\n// 忽略其他 ...\n\nexport default (ctx, inject) =\u003e {\n  const { $axios, redirect, store, env } = ctx\n  const { NUXT_APP_BASE_API } = env\n\n  const axiosInstance = $axios.create({\n    baseURL: NUXT_APP_BASE_API,\n    timeout: 50000,\n  })\n\n  // ...\n\n  // 二次包装请求方法\n  const service = createService(axiosInstance, ctx)\n\n  // 依赖注入\n  inject('api', apiRespository(service))\n}\n```\n\n然后，我们可以在 **.vue** 文件中这样使用：\n\n``` js\nexport default {\n  name: 'Test',\n  async asyncData({ app }) {\n    const { code, data } = await app.$api.user.index()\n    if (code === 200) {\n      return {\n        data\n      }\n    }\n  },\n  async mounted() {\n    const res = await this.$api.user.index()\n    console.log(res)\n  }\n}\n```\n\n在 **store** 中的 `actions` 中这样使用：\n\n``` js\n// ~/store/user.js\n\nexport const actions = {\n  async getUserList() {\n    const { code, data } = await this.$api.user.index()\n    if (code === 200) {\n      return data\n    }\n    return []\n  }\n}\n```\n\n\u003e 注：当然你也可以在 **mutations** 中访问到 `this.$api`，但不建议将异步处理放置在 **mutations** 中。\n\n## vue-toasted 插件封装\n\n**状态：** :heavy_check_mark:\n\n该模板封装了 `vue-toasted` 插件，方便使用，且易于扩展其配置。定义文件位于 `~/plugins/vue-toasted.js`。\n\n你可以在 `*.vue` 或 `store` 中的 `mutations` 、`actions` 中使用 `$toast`。\n\n**1.使用方式示例：**\n\n``` js\nexport default {\n  mounted() {\n    this.$toast.global.info('this is a info msg...')\n    this.$toast.global.success('this is a success msg...')\n    this.$toast.global.warning('this is a warning msg...')\n    this.$toast.global.error('this is a error msg...')\n    this.$toast.show('this is a default msg...', { duration: 4000 })\n  }\n}\n```\n\n**2.自定义 vue-toasted 样式：**\n\n可在 `~/assets/styles/modules/vue-toasted-custom.scss` 中修改 `vue-toasted` 的相关样式。\n\n## sprite svg icon\n\n**状态：** :heavy_check_mark:\n\n你可以在项目中很方便的使用自己的 `svg` 图标。\n\n使用方式：\n\n1. 将制作好的 `svg` 图标放置到 `~/assets/icons/svg` 文件夹下，推荐使用阿里的 `iconfont`。\n2. 然后，你可以在 `*.vue` 的模板中这样用\n\n``` html\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003csvg-icon icon-class=\"star\" /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n这里的 `icon-class` 的值就是你放置在 `~/assets/icons/svg` 文件夹中的每个 `svg` 图标文件名。\n\n可参考 \u003ca href=\"https://github.com/yisibell/aidol-svg-icon\" target=\"_blank\"\u003e @aidol/svg-icon \u003c/a\u003e 的实现逻辑。\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyisibell%2Fnuxt-cmsify-pwa-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyisibell%2Fnuxt-cmsify-pwa-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyisibell%2Fnuxt-cmsify-pwa-template/lists"}