Nuxt

• nuxtjs 中文网
• nuxtjs 官网
• 在 Nuxt.js 中安装 Tailwind CSS

安装项目

• create-nuxt-app

当前使用的 nuxt 版本：2.15.8 ，根据提示进行配置选择：

• 1 在集成的服务器端框架之间进行选择
• 2 选择喜欢的 UI 框架
• 3 选择喜欢的测试框架
• 4 选择 Nuxt 模式 (Universal or SPA)
• 5 添加 axios module 以轻松地将 HTTP 请求发送到应用程序中
• 6 添加 EsLint、Prettier、StyleLint 等，保存时进行代码规范和错误检查、格式化代码

yarn

使用 yarn 安装项目

yarn create nuxt-app 项目名称

npx

使用 npx 安装项目（npx 在 npm >=5.2.0 默认安装了）

npx create-nuxt-app 项目名称

npm

npm init nuxt-app 项目名称

目录结构

创建一个 nuxt-app1 的 nuxt 项目

nuxt-app1
├── .editorconfig
├── .eslintcache
├── .eslintrc.js
├── .gitignore
├── .prettierignore
├── .prettierrc
├── README.md
├── components
| ├── NuxtLogo.vue
| └── Tutorial.vue
├── jsconfig.json
├── nuxt.config.js
├── package.json
├── pages
| └── index.vue
├── plugins
| └── element-ui.js
├── static
| └── favicon.ico
├── store
| └── README.md
├── stylelint.config.js
└── yarn.lock

路由

• nuxt 路由

Nuxt.js 会依据 pages 目录中的所有 *.vue 文件生成应用的路由配置

使用 Tailwindcss

• Tailwindcss
• 在 Nuxt.js 中安装 Tailwind CSS

yarn

yarn 安装相关依赖

yarn add @nuxtjs/tailwindcss tailwindcss@latest postcss@latest autoprefixer@latest -D

npm

npm 安装相关依赖

npm install @nuxtjs/tailwindcss tailwindcss@latest postcss@latest autoprefixer@latest -D