使用Nuxt.js和Vuetify创建一个Hello World页面

8 月 ago
雅, 悟
2 minutes

我是合同会社kumanote的田中。

我最近通过使用Google Drive API，开发了一个让Google Drive文档可视化的工具。

我用Nuxt.js和FastAPI（据说是性能出色的Python web框架）制作了这个项目。因此，为了能够分享给大家，我决定公开制作的方法。

ここで連載しています。

githubにも連載に合わせてソースコードをアップして行っています。

在这里，我也会介绍如何在Nuxt.js中引入Vuetify插件，并编写Hello world的部分。

顺带一提，Vuetify是一个遵循Google开发的Material Design设计理念的框架，类似于基于Material Design的Bootstrap版本的概念。

项目的目录结构

这次开发的应用的目录结构如下。

大致上会如下所述。

gdrive-manager
├── client
│   ├── README.md
│   ├── assets
│   ├── components
│   ├── layouts
│   ├── nuxt.config.js
│   ├── package.json
│   ├── pages
│   ├── plugins
│   ├── static
│   └── store
└── server
    ├── README.md
    ├── alembic
    ├── alembic.ini
    ├── app
    │   └── api
    │       └── v1
    │           └── endpoints
    └── pyproject.toml
    • 一番topのディレクトリ（gdrive-manager）の下に client と server のディレクトリを作成します。

clientディレクトリの中には Nuxt.js のアプリ関係のファイルを配置します。
serverディレクトリの中には FastAPI のアプリ関係のファイルを配置します。

serverディレクトリの中にはもっと多くのディレクトリができますが、今回は省略しています。

事前准备

引言

    私はMac OSX Catalinaで作業しています。WindowsやLinuxユーザーの方はコマンドを適時読み替えてください。

安装Node.js/Yarn

推荐的安装方法

我推荐使用nodenv这个工具。
nodenv适合用于对每个目录管理nodejs的版本。

比如说，在项目A中，假设我们使用v12的nodejs来在项目B中使用v10。那么，如果在电脑上安装v10，当我们想要进行项目B的工作时，就需要卸载v10并安装v12，这样会产生一些额外的工作。
因此，一般的做法是将v10和v12分别安装在不同的目录中，并重新设置PATH环境变量，但把这个过程工具化的产物就是nodenv。

这个 nodenv 是一个用于管理 nodejs 的工具，但也有其他针对不同语言的工具，比如 pyenv (用于 Python) 和 rbenv (用于 Ruby)。有一个叫 anyenv 的工具可以管理这些 XXenv 工具，我也在用它。使用 anyenv，可以使用其命令来安装 nodenv、pyenv等工具。

此外，在nodenv中，如果安装了特定版本的node，还有一个工具叫nodenv-yarn-install会自动安装yarn（nodejs的包管理器），我也在这里使用它，非常方便。

总结起来大致如下。

    1. 为了安装（管理）nodenv，需要首先安装anyenv

 

    1. 使用anyenv来安装nodenv

 

    1. 安装nodenv-yarn-install

 

    1. 使用nodenv来安装特定的nodejs版本

 

    使用nodenv来固定本项目的nodejs版本

因为这与本文的主旨无关，所以我将省略每个工具的安装方法。请基本按照GitHub的Readme中所写的内容进行安装。

安装Node.js

请安装Node.js。我已经安装了版本v13.12。
尽管我没有进行过测试，但我认为它可以在稍有不同的版本上运行。

当然可以从Node.js官方网站进行安装，而不仅仅是推荐的安装方式。

% node -v
v13.12.0

安装yarn

即使不是推荐安装方式，当然也可以通过此网站进行安装。

% yarn -v
1.22.4

你好，世界。

话虽有点长，但我们马上开始开发Nuxt.js应用。

创建TOP目录

首先，创建项目的顶级目录。以名称为”gdrive-manager”的方式创建。（名称可以随意。）

% mkdir gdrive-manager

制作应用程序的模板

接下来，切换到TOP目录，并执行创建Nuxt.js应用的命令。

% cd gdrive-manager
% yarn create nuxt-app client
yarn create v1.22.4
[1/4] ?  Resolving packages...
[2/4] ?  Fetching packages...
[3/4] ?  Linking dependencies...
[4/4] ?  Building fresh packages...
success Installed "create-nuxt-app@2.15.0" with binaries:
      - create-nuxt-app
[###################################################################################################################################################] 339/339
create-nuxt-app v2.15.0
✨  Generating Nuxt.js project in client
? Project name gdrive-manager-client
? Project description gdrive-manager nuxt.js based client app 
? Author name Hiroki Tanaka
? Choose programming language JavaScript
? Choose the package manager Yarn
? Choose UI framework Vuetify.js
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules Axios, Progressive Web App (PWA) Support, DotEnv
? Choose linting tools ESLint, Prettier, Lint staged files, StyleLint
? Choose test framework None
? Choose rendering mode Universal (SSR)
? Choose development tools Semantic Pull Requests
yarn run v1.22.4
$ eslint --ext .js,.vue --ignore-path .gitignore . --fix
✨  Done in 1.90s.

?  Successfully created project gdrive-manager-client

  To get started:

    cd client
    yarn dev

  To build & start for production:

    cd client
    yarn build
    yarn start

✨  Done in 152.84s.

执行之后会出现几个选择题，根据以下方式进行选择。

項目名選択する内容メモProject namegdrive-manager-clientNuxt.jsアプリの名前、適当でOKProject descriptiongdrive-manager nuxt.js based client appNuxt.jsアプリの詳細、適当でOKAuthor nameHiroki Tanaka制作者の名前、適当でOKprogramming languageJavaScriptTypeScriptというのも選べるけれど、難しいので、JavaScriptにしましたthe package managerYarn
UI frameworkVuetify.jsMaterial Designベースのフレームワークです。かなりオススメcustom server frameworkNone (Recommended)
Nuxt.js modules　Axios, Progressive Web App (PWA) Support, DotEnvスペースキーを使って全部選択linting toolsESLint, Prettier, Lint staged files, StyleLintスペースキーを使って全部選択test frameworkNoneUnit Testは今回使わないですrendering modeUniversal (SSR)Server Side Renderingを指定しましょうdevelopment toolsSemantic Pull Requests任意です。選んでおくと、gitのコメントに気をつけるようになります。

当执行此命令时，会在TOP目录下创建一个名为client的文件夹。文件夹中会自动生成Nuxt.js模板项目的文件。

首次启动

现在，已经准备好启动Nuxt.js应用程序了。

让我们进入创建的客户端目录，并执行以下内容。

% yarn run dev
yarn run v1.22.4
$ nuxt

   ╭─────────────────────────────────────────────╮
   │                                             │
   │   Nuxt.js v2.12.2                           │
   │   Running in development mode (universal)   │
   │                                             │
   │   Listening on: http://localhost:3000/      │
   │                                             │
   ╰─────────────────────────────────────────────╯

执行后会显示一个消息，内容是正在http://localhost:3000/上启动，请使用浏览器访问http://localhost:3000/。

如果能看到以下屏幕，就表示成功了。

97b0876e9ca711ea9ad24201c0a80102_hello-world-min.png

以上就是。