LoginSignup
0
0

More than 1 year has passed since last update.

@ssugimoto(すぎもと)

RealWorldその２（フロントエンド）「Vue admin template」を動かしてみる

Last updated at Posted at 2021-12-02

はじめに

  • 前回の記事( https://qiita.com/ssugimoto/items/5bf561debe87843eb32c ) で紹介した 「Vue admin template （Vue2 + TypeScript + element-ui + vue-router ・・・）」をローカル環境で動かしてみます。

  • ローカルの開発環境に、Node等をインストールするのは手間なのでコンテナ（リモートコンテナ）を使います。

  • 動かすフレームワーク・ライブラリのバージョンの一部

"vue": "^2.6.12",
"vue-router": "^3.5.1",
"element-ui": "^2.15.1",

前提

  • Windowsであれば WSL2 が使える環境であること
  • VSCodeがインストールされており使ったことがあること
  • Docker Desktop（もしくは代替のPodman / Mnikube / lima）でコンテナが動かせること

リモートコンテナを使えるようにする

  • git cloneしても良いですが、独自のカスタマイズをする場合はzipダウンロードが良いです
  • リモートコンテナは、 Git リポジトリ https://github.com/ssugimoto/aws-amplify-typescript-local-container にあるものを 使います。 そのGit リポジトリはAWS Amplify を動かすことができるものをベースにしているため、不要なものがインストールされます。不要なものはDockerfileとdevcontainer.jsonから削ってください（Java, aws cli, amplify cli を削ると軽量化できます）。
  1. GitHub → Code → Download ZIP → 「aws-amplify-typescript-local-container-main.zip」を任意のディレクトリに置き、展開する
  2. README.mdの説明を確認
    • VSCode で（plugin 「Remote - ContainersPreview」 と 「Remote - WSLPreview」をインストールする）
  3. VSCode → ファイル → フォルダを開く 、ローカルを表示し、「aws-amplify-typescript-local-container-main.zip」を展開したディレクトリを開く
  4. 信頼性を確認が表示されたら「はい」を選び
  5. VSCoddの右下あたりに「ReOpen in container」のボタンを押す
  6. コンテナのビルドがされます、約５分あればコンテナが使えます
  7. VSCode内でコンテナが使えるようになる

コンテナ内からVueのソースを取得

  • Git clone または ZIPダウンロードで取得します

Git cloneの場合

  1. コンテナ内のターミナルで

    cd /workspaces/
mkdir vue

  2. GithubにSSH接続できるようにssh key等の設定

  3. Git クローンする

    git clone git@github.com:Armour/vue-typescript-admin-template.git

    ZIPダウンロードの場合

  4. コンテナ内のターミナルで

    cd /workspaces/
mkdir vue
cd /workspaces/vue

  5. wgetでzipファイルを取得

    wget https://github.com/Armour/vue-typescript-admin-template/archive/refs/heads/master.zip

    master.zip がダウンロードできる

    unzip master.zip

    vue-typescript-admin-template-master に展開される

vueのプロジェクトがVSCodeリモートコンテナ内に配置されたのでアプリを動くようにする

実行するコマンド

cd /workspaces/vue/vue-typescript-admin-template
yarn install
yarn run serve

ここまでのコマンドで、リモートコンテナ内で ブラウザアクセス用のWebサーバ相当、
ブラウザからAPIリクエストを受けるモックサーバ相当が起動します。

  • yarn installする前のディレクトリの場合の例
root ➜ /workspaces/vue/vue-typescript-admin-template (master ✗) $ ls -l
total 1544
-rw-r--r--    1 root root    468 Nov 30 11:45 babel.config.js
drwxr-xr-x    2 root root   4096 Nov 30 11:45 demo
-rw-r--r--    1 root root     88 Nov 30 11:45 jest.config.js
-rw-r--r--    1 root root   1066 Nov 30 11:45 LICENSE
drwxr-xr-x    3 root root   4096 Nov 30 11:45 mock
-rw-r--r--    1 root root   4095 Nov 30 11:45 package.json
-rw-r--r--    1 root root     59 Nov 30 11:45 postcss.config.js
drwxr-xr-x    4 root root   4096 Nov 30 11:45 public
-rw-r--r--    1 root root   8454 Nov 30 11:45 README.md
-rw-r--r--    1 root root   8485 Nov 30 11:45 README-zh.md
drwxr-xr-x   16 root root   4096 Nov 30 11:45 src
drwxr-xr-x    3 root root   4096 Nov 30 11:45 tests
-rw-r--r--    1 root root    711 Nov 30 11:45 tsconfig.json
-rw-r--r--    1 root root   4120 Nov 30 11:45 vue.config.js
-rw-r--r--    1 root root 559790 Nov 30 11:45 yarn.lock
  • yarn run serve 実行時の例
root ➜ /workspaces/vue/vue-typescript-admin-template (master ✗) $ yarn run serve
yarn run v1.22.15
$ concurrently "npm:mock" "vue-cli-service serve"
[mock] npm WARN lifecycle The node binary used for scripts is /tmp/yarn--1638442498826-0.7553495223286655/node but npm is using /usr/local/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.
[mock] 
[mock] > vue-typescript-admin-template@1.0.0 mock /workspaces/vue/vue-typescript-admin-template
[mock] > cd mock && ts-node-dev mock-server.ts
[mock] 
[1] Browserslist: caniuse-lite is outdated. Please run:
[1] npx browserslist@latest --update-db
[1] 
[1] Why you should do it regularly:
[1] https://github.com/browserslist/browserslist#browsers-data-updating
[1]  INFO  Starting development server...
[mock] [INFO] 10:54:59 ts-node-dev ver. 1.1.6 (using ts-node ver. 9.1.1, typescript ver. 4.2.3)
[1] Starting type checking service...
[1] Using 1 worker with 2048MB memory limit
[mock] {
[mock]   info: {
[mock]     name: 'Mock API',
[mock]     description: 'Mock API for vue-typescript-admin-template.',
[mock]     version: '1.0.0'
[mock]   },
[mock]   paths: {
[mock]     get: [
[mock]       '/mock-api/v1/articles',
[mock]       '/mock-api/v1/articles/:id',
[mock]       '/mock-api/v1/pageviews',
[mock]       '/mock-api/v1/transactions',
[mock]       '/mock-api/v1/roles',
[mock]       '/mock-api/v1/routes',
[mock]       '/mock-api/v1/users',
[mock]       '/mock-api/v1/users/:username'
[mock]     ],
[mock]     post: [
[mock]       '/mock-api/v1/articles',
[mock]       '/mock-api/v1/roles',
[mock]       '/mock-api/v1/users/register',
[mock]       '/mock-api/v1/users/login',
[mock]       '/mock-api/v1/users/logout',
[mock]       '/mock-api/v1/users/info'
[mock]     ],
[mock]     put: [
[mock]       '/mock-api/v1/articles/:id',
[mock]       '/mock-api/v1/roles/:id',
[mock]       '/mock-api/v1/users/:username'
[mock]     ],
[mock]     delete: [
[mock]       '/mock-api/v1/articles/:id',
[mock]       '/mock-api/v1/roles/:id',
[mock]       '/mock-api/v1/users/:username'
[mock]     ]
[mock]   }
[mock] }
[mock] Mock server started on port 9528!

  • yarn run serveで起動できると、自動でアクティブのブラウザのタブで http://localhost:9527/#/login?redirect=%2Fdashboard が開く

  • ログイン画面が表示される

  • ログインボタン押すと、 ダッシュボード画面が表示されます
    http://localhost:9527/#/dashboard

  • 左のサイドメニューのリンクを押していくとモックAPIサーバ にリクエストされ画面が切り替わります

  • 動いているポート番号

以上で動かしてみる作業は完了です。
他の画面等もさわり、SPAとVue（＋ライブラリ）でできることを体感して見ましょう。

設定を見ておきましょう（時間があれば）

  • ファイル /workspaces/vue/vue-typescript-admin-template/vue.config.js が起点となるようなファイルです

  • process.env.XXX は環境用の設定です、nodeの場合によく使われれます。

yarn run serveで動く説明

npm run | yarn run では、 package.jsonの"scripts" に書かれているコマンドが実行されます。

package.json
  "scripts": {
    "serve": "concurrently \"npm:mock\" \"vue-cli-service serve\"",
    "test:unit": "jest --clearCache && vue-cli-service test:unit",
    "lint": "vue-cli-service lint",
    "build:prod": "vue-cli-service build",
    "build:stage": "vue-cli-service build --mode staging",
    "svg": "vsvg -s ./src/icons/svg -t ./src/icons/components --ext ts --es6",
    "mock": "cd mock && ts-node-dev mock-server.ts"
  },

  • yarn run serve |npm run serve の場合は、「"concurrently \"npm:mock\" \"vue-cli-service serve\""」が動くので vue-cli-service serve が動くことになります。

  • npm:mock では、"mock": "cd mock && ts-node-dev mock-server.ts" が動きます

    • /workspaces/vue/vue-typescript-admin-template/mock/mock-server.ts が実行されるので、port 9528 でモックAPIサーバが動きます
    • concurrently は複数コマンドを実行できるようにするためのおまじない。https://shigekitakeguchi.com/2016/08/10/1.html の説明を見るとわかりやすいです。

ドキュメント

https://armour.github.io/vue-typescript-admin-docs/ に少しだけドキュメントがありますので参考に

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0