{"id":20588744,"url":"https://github.com/xbmlz/starter-nuxt","last_synced_at":"2026-02-27T09:43:58.147Z","repository":{"id":40247765,"uuid":"493497686","full_name":"xbmlz/starter-nuxt","owner":"xbmlz","description":"⚡ A starter example with Nuxt3 + Windi CSS + Iconify + Element-plus + Pinia + Docker","archived":false,"fork":false,"pushed_at":"2022-05-24T08:00:15.000Z","size":586,"stargazers_count":16,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-14T21:54:32.884Z","etag":null,"topics":["docker","element-plus","iconify","nuxt3","pinia","windicss"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xbmlz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-05-18T03:40:09.000Z","updated_at":"2024-05-14T07:14:55.000Z","dependencies_parsed_at":"2022-08-24T14:33:36.547Z","dependency_job_id":null,"html_url":"https://github.com/xbmlz/starter-nuxt","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/xbmlz/starter-nuxt","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xbmlz%2Fstarter-nuxt","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xbmlz%2Fstarter-nuxt/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xbmlz%2Fstarter-nuxt/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xbmlz%2Fstarter-nuxt/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xbmlz","download_url":"https://codeload.github.com/xbmlz/starter-nuxt/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xbmlz%2Fstarter-nuxt/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29889852,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-27T08:34:21.514Z","status":"ssl_error","status_checked_at":"2026-02-27T08:32:38.035Z","response_time":57,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: 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":["docker","element-plus","iconify","nuxt3","pinia","windicss"],"created_at":"2024-11-16T07:26:16.155Z","updated_at":"2026-02-27T09:43:58.128Z","avatar_url":"https://github.com/xbmlz.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Nuxt3 + Windi CSS + iconify + element-plus\n\n[![GitHub Pages](https://github.com/xbmlz/nuxt-starter/actions/workflows/gh-pages.yml/badge.svg)](https://github.com/xbmlz/nuxt-starter/actions/workflows/gh-pages.yml)\n\n## 创建项目\n\n### 简介\n\n[Nuxt 3 - The Hybrid Vue Framework (nuxtjs.org)](https://v3.nuxtjs.org/)\n\nBuild your next application with Vue 3 and experience hybrid rendering, powerful data fetching and new features. Nuxt 3 is an open source framework making web development simple and powerful.\n\n- SPA应用：也就是单页应用，这些多是在客户端的应用，不能进行SEO优化（搜索引擎优化）。\n- SSR应用：在服务端进行渲染，渲染完成后返回给客户端，每个页面有独立的URL，对SEO友好。\n\n### 新特性\n\n- 更轻量：以现代浏览器为基础的情况下，服务器部署和客户端产物最多减小75倍。\n- 更快：用动态服务端代码来优化冷启动。\n- Hybird：增量动态生成和其他高级模式现在都成为可能。\n- Suspense: 导航前后可在任何组件中获取数据。\n- Composition API : 使用Composition API 和 Nuxt3的composables 实现真正的可复用性。\n- Nuxt CLI ： 权限的零依赖体验，助你轻松搭建项目和集成模块。\n- Nuxt Devtools ：专属调试工具，更多的信息和快速修复，在浏览器中高效工作。\n- Nuxt Kit ：全新的基于 TypeScript 和跨版本兼容的模块开发。\n- Webpack5 ： 更快的构建速度和更小的构建包，并且零配置。\n- Vite：用Vite作为你的打包器，体验轻量级的快速HMR。\n- Vue3 ： 完全支持Vue3语法，这一点特别关键。\n- TypeScript：由原生TypeScript和ESM构成，没有额外配置步骤。\n\n### 初始化项目\n\n```Bash\n# 初始化\nnpx nuxi init nuxt-starter\n\ncd nuxt-starter\n\n# 安装依赖\npnpm install --shamefully-hoist\n\n# 运行项目\npnpm run dev -- -o\n\n```\n\n![](https://secure2.wostatic.cn/static/xADygXjJk9Vdfo69NpCsa9/image.png)\n\n打开浏览器 [http://localhost:3000](http://localhost:3000)\n\n![](https://secure2.wostatic.cn/static/sCL9uZFGCP6oZkZeeoPpDK/image.png)\n\n### 目录结构\n\n默认目录结构\n\n```Bash\n- .nuxt               // 自动生成的目录，用于展示结果\n- node_modules        // 项目依赖包存放目录\n- .gitignore          // Git的配置目录，比如一些文件不用Git管理就可以在这个文件中配置\n- app.vue             // 项目入口文件，你可以在这里配置路由的出口\n- nuxt.config.ts      // nuxt项目的配置文件 ，这个里边可以配置Nuxt项目的方法面面\n- package-lock.json   // 锁定安装时包的版本，以保证其他人在 npm install时和你保持一致\n- package.json        // 包的配置文件和项目的启动调式命令配置\n- README.md           // 项目的说明文件\n- tsconfig.json       // TypeScript的配置文件\n\n```\n\n新增常用目录\n\n```Bash\n- pages               // 开发的页面目录\n- components          // 组件目录\n- assets              // 静态资源目录\n- layouts             // 项目布局目录\n```\n\n- **.nuxt**  执行`dev`时生成的目录\n- **.output** 执行`build`时生成的目录\n- **assets** 用户添加 webpack或者vite打包时得资源保健\n    - 样式文件（css、scss等等）\n    - 字体文件\n- **components** nuxt会自动导入此文件夹下的组件，在页面中可直接引用\n    - [https://v3.nuxtjs.org/guide/directory-structure/components](https://v3.nuxtjs.org/guide/directory-structure/components)\n- **composables** nuxt会自动导入vue中的组合式API\n    - [https://v3.nuxtjs.org/guide/directory-structure/composables](https://v3.nuxtjs.org/guide/directory-structure/composables)\n- **layouts** nuxt提供了一种可定制的布局框架\n    - [https://v3.nuxtjs.org/guide/directory-structure/layouts](https://v3.nuxtjs.org/guide/directory-structure/layouts)\n- **middleware** nuxt提供了一种可定制的路由中间件框架，可定制路由策略\n    - [https://v3.nuxtjs.org/guide/directory-structure/middleware](https://v3.nuxtjs.org/guide/directory-structure/middleware)\n- **pages** 文件路由，默认路由为index.vue，页面支持`.vue`,`.js`,`.jsx`or`.tsx`\n    - [https://v3.nuxtjs.org/guide/directory-structure/pages](https://v3.nuxtjs.org/guide/directory-structure/pages)\n- **plugins** 插件目录，nuxt将自动注册插件\n- **public** 网站根目录\n- **server** 服务端路由\n\n### 完善项目\n\n删除`app.vue` 中的`NuxtWelcome` 组件，新增 `\u003cNuxtPage /\u003e`\n\n```HTML\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cNuxtPage /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n```\n\n新增`pages/index.vue`\n\n```HTML\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003ch1\u003eIndex Page\u003c/h1\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport {} from \"vue\";\n\u003c/script\u003e\n\n\u003cstyle scoped\u003e\u003c/style\u003e\n\n```\n\n浏览器打开 [http://localhost:3000](http://localhost:3000)\n\n![](https://secure2.wostatic.cn/static/ajwCD9KdHXneVASW4mtKdM/image.png)\n\n## 集成 windicss\n\n### 介绍\n\n[https://windicss.org/](https://windicss.org/)\n\nNext generation utility-first CSS framework.\n\n### 安装\n\n```Bash\npnpm add -D nuxt-windicss @windicss/plugin-animations\n```\n\n### 使用\n\n修改`nuxt.config.ts`如下\n\n```TypeScript\nimport { defineNuxtConfig } from 'nuxt3'\n\nexport default defineNuxtConfig({\n  buildModules: [\n    'nuxt-windicss',\n  ],\n})\n```\n\n新增`windi.config.ts`文件\n\n```TypeScript\nimport { defineConfig } from \"windicss/helpers\";\n\nexport default defineConfig({\n  preflight: false,\n  extract: {\n    include: [\"**/*.{vue,html,jsx,tsx}\"],\n    exclude: [\"node_modules\", \".git\"],\n  },\n});\n\n```\n\n修改`pages/index.vue`如下\n\n```Vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003ch1 class=\"text-red-600\"\u003eIndex Page\u003c/h1\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport {} from \"vue\";\n\u003c/script\u003e\n\n\u003cstyle scoped\u003e\u003c/style\u003e\n\n```\n\n浏览器打开[http://localhost:3000/](http://localhost:3000/)，效果如下\n\n![](https://secure2.wostatic.cn/static/r5SqGUf2fCjKa2otrSUmqU/image.png)\n\n\n## 集成 iconify\n\n### 介绍\n\nUniversal icon framework. One syntax for FontAwesome, Material Design Icons, DashIcons, Feather Icons, EmojiOne, Noto Emoji and many other open source icon sets (100+ icon sets, 100,000+ icons). SVG framework, React, Vue and Svelte components!\n\n### 安装\n\n```Bash\npnpm add @iconify/vue -D\n```\n\n### 使用\n\n修改`pages/index.vue`如下\n\n```Vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003ch1 class=\"text-red-600\"\u003eIndex Page\u003c/h1\u003e\n    \u003cIcon icon=\"mdi-light:home\" /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { Icon } from \"@iconify/vue\";\n\u003c/script\u003e\n\n\u003cstyle scoped\u003e\u003c/style\u003e\n\n```\n\n浏览器打开 [http://localhost:3000/](http://localhost:3000/)\n\n![](https://secure2.wostatic.cn/static/cTEJgLfjR567xCBmQr13Y5/image.png)\n\n### 文档地址\n\n[https://icones.js.org/](https://icones.js.org/)\n\n## 集成element-plus\n\n### 安装\n\n```Bash\npnpm add -D sass element-plus @element-plus/icons-vue unplugin-vue-components unplugin-auto-import\n```\n\n### 使用\n\n新增`assets/scss/index.scss`文件，添加如下内容\n\n```Sass (scss) \n@use \"element-plus/dist/index.css\";\n```\n\n修改`nuxt.config.ts`如下\n\n```TypeScript\nimport { defineNuxtConfig } from \"nuxt\";\n\nconst lifecycle = process.env.npm_lifecycle_event;\n\n// https://v3.nuxtjs.org/api/configuration/nuxt.config\nexport default defineNuxtConfig({\n  //css\n  css: [\"~/assets/scss/index.scss\"],\n  // build\n  build: {\n    transpile: lifecycle === \"build\" ? [\"element-plus\"] : [],\n  },\n  // build modules\n  buildModules: [\"nuxt-windicss\"],\n});\n\n```\n\n修改`pages/index.vue`文件如下\n\n```Vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003ch1 class=\"text-red-600\"\u003eIndex Page\u003c/h1\u003e\n    \u003cIcon icon=\"mdi-light:home\" /\u003e\n    \u003cel-button class=\"m-4\" @click=\"hello\"\u003eHello\u003c/el-button\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { Icon } from \"@iconify/vue\";\nimport { ElButton } from \"element-plus\";\n\u003c/script\u003e\n\n\u003cstyle scoped\u003e\u003c/style\u003e\n\n```\n\n浏览器打开 [http://localhost:3000/](http://localhost:3000/)\n\n![](https://secure2.wostatic.cn/static/hFSKJt2VrkZzwU9NawNSQ8/image.png)\n\n## 集成pinia\n\n### 介绍\n\nThe Vue Store that you will enjoy using\n\n[https://pinia.vuejs.org/](https://pinia.vuejs.org/)\n\n### 安装\n\n```Bash\npnpm add -D pinia @pinia/nuxt @nuxtjs/composition-api\n```\n\n### 使用\n\n修改`nuxt.config.ts`中的`buildModules`内容如下\n\n```TypeScript\nimport { defineNuxtConfig } from \"nuxt\";\n\nconst lifecycle = process.env.npm_lifecycle_event;\n\n// https://v3.nuxtjs.org/api/configuration/nuxt.config\nexport default defineNuxtConfig({\n  //css\n  css: [\"~/assets/scss/index.scss\"],\n  // build\n  build: {\n    transpile: lifecycle === \"build\" ? [\"element-plus\"] : [],\n  },\n  // build modules\n  buildModules: [\"nuxt-windicss\", \"@pinia/nuxt\"],\n});\n\n```\n\n## 部署\n\n### 安装依赖\n\n```Bash\npnpm add -D cross-env\n```\n\n### 静态托管\n\n修改`package.json`,修改`generate`命令\n\n```JSON\n{\n  \"private\": true,\n  \"scripts\": {\n    \"build\": \"nuxt build\",\n    \"dev\": \"nuxt dev\",\n    \"generate\": \"nuxt generate\",\n    \"preview\": \"nuxt preview\"\n  },\n  \"devDependencies\": {\n    \"autoprefixer\": \"^10.4.7\",\n    \"eslint\": \"^8.15.0\",\n    \"eslint-config-standard\": \"^17.0.0\",\n    \"eslint-plugin-import\": \"^2.26.0\",\n    \"eslint-plugin-node\": \"^11.1.0\",\n    \"eslint-plugin-promise\": \"^6.0.0\",\n    \"nuxt\": \"3.0.0-rc.3\",\n    \"postcss\": \"^8.4.13\",\n    \"sass\": \"^1.51.0\",\n    \"tailwindcss\": \"^3.0.24\"\n  },\n  \"dependencies\": {\n    \"cross-env\": \"^7.0.3\",\n    \"element-plus\": \"^2.2.0\"\n  }\n}\n\n```\n\n### Docker部署\n\n新增`Dockerfile`文件如下\n\n```Docker\nFROM node:14-alpine\n\nRUN mkdir -p /usr/src/app\n\nWORKDIR /usr/src/app\n\nCOPY package.json pnpm-lock.yaml /usr/src/app/\n\nRUN RUN npm i -g pnpm --registry=https://registry.npm.taobao.org\n\nRUN pnpm install --shamefully-hoist\n\nRUN pnpm run build\n\nCOPY ./.output /usr/src/app/.output\n\nEXPOSE 9000\n\nENTRYPOINT [\"pnpm\", \"run\", \"start\"]\n```\n\n新增`docker-compose.yml`文件如下\n\n```YAML\nversion: \"3\"\nservices:\n  service_nuxt:\n    image: nuxtapp:0.0.0 \n    container_name: nuxtapp\n    build:\n      context: ./\n    ports:\n      - \"3000:3000\"\n    environment:\n      - TZ: Asia/Shanghai\n```\n\n启动容器\n\n```Bash\ndocker-compose up -d --build\n```\n\n停止容器\n\n```Bash\ndocker-compose stop\n```\n\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxbmlz%2Fstarter-nuxt","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxbmlz%2Fstarter-nuxt","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxbmlz%2Fstarter-nuxt/lists"}