nuxt学习之构建项目

构建项目

为了快速入门，Nuxt.js团队创建了脚手架工具 create-nuxt-app。

确保安装了npx（npx在NPM版本5.2.0默认安装了）：

1. npx create-nuxt-app <项目名>

npx create-nuxt-app <项目名>

或者用yarn ：

yarn create nuxt-app <项目名>

2. Project name (mynuxt) 确认项目名称，直接回车就行
3. Project description (My unreal Nuxt.js project) 输入项目描述，后回车
4. Author name (yaofeng) 确认作者，直接回车就行
5. Choose the package manager (Use arrow keys) 选择包管理器 因为我使用npm创建，所以此处选择npm

PS E:\mytest> npx create-nuxt-app mynuxt

create-nuxt-app v2.11.1
✨  Generating Nuxt.js project in mynuxt
? Project name mynuxt
? Project description "mynuxt"
? Author name yaofeng
? Choose the package manager
  Yarn
> Npm

6. Choose UI framework (Use arrow keys) 选择您喜欢的UI框架
   我没有喜欢的，所以选择 None (无)

PS E:\mytest> npx create-nuxt-app mynuxt

create-nuxt-app v2.11.1
✨  Generating Nuxt.js project in mynuxt
? Project name mynuxt
? Project description "mynuxt"
? Author name yaofeng
? Choose the package manager Npm
? Choose UI framework (Use arrow keys)
> None
  Ant Design Vue
  Bootstrap Vue
  Buefy
  Bulma
  Element
  Framevuerk
  iView
  Tachyons
  Tailwind CSS
  Vuetify.js

7. Choose custom server framework (Use arrow keys)
   在集成的服务器端框架之间进行选择: 此处选择默认 None (Nuxt默认服务器)

PS E:\mytest> npx create-nuxt-app mynuxt

create-nuxt-app v2.11.1
✨  Generating Nuxt.js project in mynuxt
? Project name mynuxt
? Project description "mynuxt"
? Author name yaofeng
? Choose the package manager Npm
? Choose UI framework None
? Choose custom server framework (Use arrow keys)
> None (Recommended)
  AdonisJs
  Express
  Fastify
  Feathers
  hapi
  Koa
  Micro

8. Choose Nuxt.js modules (Press to select, to toggle all, to invert selection)

添加 axios module 以轻松地将HTTP请求发送到您的应用程序中。

PS E:\mytest> npx create-nuxt-app mynuxt

create-nuxt-app v2.11.1
✨  Generating Nuxt.js project in mynuxt
? Project name mynuxt
? Project description "mynuxt"
? Author name yaofeng
? Choose the package manager Npm
? Choose UI framework None
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Axios
 ( ) Progressive Web App (PWA) Support

9. 添加 EsLint 以在保存时代码规范和错误检查您的代码。

PS E:\mytest> npx create-nuxt-app mynuxt

create-nuxt-app v2.11.1
✨  Generating Nuxt.js project in mynuxt
? Project name mynuxt
? Project description "mynuxt"
? Author name yaofeng
? Choose the package manager Npm
? Choose UI framework None
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) ESLint
 ( ) Prettier
 ( ) Lint staged files

10. 选择您喜欢的测试框架

None (随意添加一个)

PS E:\mytest> npx create-nuxt-app mynuxt

create-nuxt-app v2.11.1
✨  Generating Nuxt.js project in mynuxt
? Project name mynuxt
? Project description "mynuxt"
? Author name yaofeng
? Choose the package manager Npm
? Choose UI framework None
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose test framework (Use arrow keys)
> None 
  Jest 
  AVA

11. Choose rendering mode (Use arrow keys)
    选择你想要的Nuxt模式 (Universal or SPA)

PS E:\mytest> npx create-nuxt-app mynuxt

create-nuxt-app v2.11.1
✨  Generating Nuxt.js project in mynuxt
? Project name mynuxt
? Project description "mynuxt"
? Author name yaofeng
? Choose the package manager Npm
? Choose UI framework None
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose test framework None
? Choose rendering mode
> Universal (SSR)
  Single Page App

12. Choose development tools (Press to select, to toggle all, to invert selection)

选择开发工具，因为我用的是 VS Code ，所以本次选上

PS E:\mytest> npx create-nuxt-app mynuxt

create-nuxt-app v2.11.1
✨  Generating Nuxt.js project in mynuxt
? Project name mynuxt
? Project description "mynuxt"
? Author name yaofeng
? Choose the package manager Npm
? Choose UI framework None
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose test framework None
? Choose rendering mode Universal (SSR)
? Choose development tools 
>(*) jsconfig.json (Recommended for VS Code)