Vueのプロジェクトを作成してみるだけの記事

初めに

Vueのプロジェクト作成だけで躓いたを書いた際にそもそも古いバージョンのvue-cliを使っていたことを知り書き直しました。

VueJS触れるときのテンプレートとして作りました。
プロジェクト作成→ローカルでの実行→テストの実行 ができることを目標とします。

実施環境

$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.15.3
BuildVersion:	19D76

$ node -v
v13.9.0

$ npm -v
6.14.2

Vueを使えるようにするまで

npmを使ってVueCLIをインストールする

(今回はグローバルインストールしていない)

mkdir VueJsProjects
cd VueJsProjects
npm init -y
npm install @vue/cli

Vueのパスを通す

sed -i '' 's/\"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"/\"vue\": \"vue\"/g' package.json

プロジェクトを作成する

以下の設定でプロジェクトを作成していきます。

$ npm run vue create hogehoge
Vue CLI v4.2.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter, Unit, E2E
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Pick a unit testing solution: Jest
? Pick an E2E testing solution: Cypress
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? Yes
? Save preset as: hogehoge_preset
? Pick the package manager to use when installing dependencies: Yarn

...(中略)

🎉  Successfully created project portfolio.
👉  Get started with the following commands:

 $ cd hogehoge
 $ yarn serve

unittest参考：https://vue-test-utils.vuejs.org/ja/guides/choosing-a-test-runner.html
E2E参考：https://qiita.com/os1ma/items/5429cd8e12ac43a6a803

実行の前に

yarnを使っていないのでインストールから始めます。

$ brew install yarn
$ yarn --version
1.22.4

実行

cd hogehoge
yarn serve

Git管理

gitリポジトリは自動的に作成されている…。

$ git status
On branch master
nothing to commit, working tree clean

自動テスト

unittest

$ yarn test:unit
yarn run v1.22.4
$ vue-cli-service test:unit
 PASS  tests/unit/example.spec.js
  HelloWorld.vue
    ✓ renders props.msg when passed (29ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.007s
Ran all test suites.
✨  Done in 5.50s.

e2eテスト

$ yarn test:e2e

画面テスト自動化いいね！

後処理

pushするならする

git remote add origin [作成済みのリポジトリを使用]
git push -u origin master

まとめ

普通に、簡単に、VueJsのテスト実行までできました。
前回のようにバージョンミスとかで無駄に時間を取られないように注意していきたいですね。