普段はAngularなのですが、最近はVueがはやりなのでとりあえずインストールまでやってみました。
環境
| Package | バージョン |
|---|---|
| yarn | v1.15.2 |
| node.js | v12.3.1 |
| Vue CLI | 3.8.2 |
vue-cliのインストール
yarn
$ yarn global add @vue/cli
yarn global v1.15.2
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
warning Your current version of Yarn is out of date. The latest version is "1.16.0", while you're on "1.15.2".
info To upgrade, run the following command:
$ brew upgrade yarn
success Installed "@vue/cli@3.8.2" with binaries:
- vue
✨ Done in 21.92s.
vueプロジェクト作成
-
vue createでプロジェクト作成
vue-cli
vue create sample-vue-project
-
Manually select featuresを選択
vue-cli
Vue CLI v3.8.2
? Please pick a preset:
default (babel, eslint)
❯ Manually select features
- ここは欲しいものを自由に選択します。今回はPWAは使わないので、それ以外にチェック。
- JSはTypescriptで書きたい
- テストもやる
- 今回はPWAは使わない
vue-cli
? Check the features needed for your project:
◉ Babel
◉ TypeScript
◯ Progressive Web App (PWA) Support
◉ Router
◉ Vuex
◉ CSS Pre-processors
◉ Linter / Formatter
◉ Unit Testing
❯◉ E2E Testing
- Classシンタックスを使う場合は
Yを指定
vue-cli
? Use class-style component syntax? (Y/n) y
- TypeScriptとBabelを併用する場合は
Yを指定
vue-cli
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfi
lls, transpiling JSX)? (Y/n) y
- routerに履歴モードを使用する場合は
Yを指定
vue-cli
? Use history mode for router? (Requires proper server setup for index fallback
in production) (Y/n) y
- CSSの種類を指定する
vue-cli
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported
by default):
Sass/SCSS (with dart-sass)
❯ Sass/SCSS (with node-sass)
Less
Stylus
- TypeScriptを使うのでTSLintを指定する
vue-cli
? Pick a linter / formatter config: (Use arrow keys)
❯ TSLint
ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
- Lintを実行するタイミングを指定する
vue-cli
Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)
❯◉ Lint on save
◯ Lint and fix on commit
- Unitテスト用のPackageを選択
- 今回はMochaとChaiを指定
vue-cli
? Pick a unit testing solution:
❯ Mocha + Chai
Jest
- E2Eテスト用のPackageを選択
- 今回はchrome用のCypressを指定
vue-cli
? Pick a E2E testing solution:
❯ Cypress (Chrome only)
Nightwatch (Selenium-based)
- Babel、PostCSS、ESLintなどの設定をどこに書くかを指定。
- 今回は
package.jsonに残します。
- 今回は
vue-cli
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
In dedicated config files
❯ In package.json
- ここまでの設定を残す場合は
Yを指定して、設定に名前を付けます。
vue-cli
? Save this as a preset for future projects? Yes
? Save preset as: sample_project
- package managerはYarnを選択
vue-cli
? Pick the package manager to use when installing dependencies: (Use arrow keys)
❯ Use Yarn
Use NPM
- 選択が終わるとプロジェクトが作成される。
vue-cli
Vue CLI v3.8.2
✨ Creating project in /Users/******/vscode/sample-vue-project.
🗃 Initializing git repository...
⚙ Installing CLI plugins. This might take a while...
yarn install v1.15.2
info No lockfile found.
[1/4] 🔍 Resolving packages...
success Saved lockfile.
✨ Done in 59.59s.
🚀 Invoking generators...
📦 Installing additional dependencies...
[-/5] ⠁ waiting...
yarn install v1.15.2
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
✨ Done in 19.53s.
⚓ Running completion hooks...
📄 Generating README.md...
🎉 Successfully created project sample-vue-project.
👉 Get started with the following commands:
$ cd sample-vue-project
$ yarn serve
テスト実行
- プロジェクト内で
yarn serveを実行
vue-cli
$ yarn serve
yarn run v1.15.2
$ vue-cli-service serve
INFO Starting development server...
Starting type checking and linting service...
Using 1 worker with 2048MB memory limit
98% after emitting CopyPlugin
DONE Compiled successfully in 2404ms 15:04:13
Type checking and linting in progress...
App running at:
- Local: http://localhost:8081/
- Network: http://192.168.1.22:8081/
Note that the development build is not optimized.
To create a production build, run yarn build.
No type errors found
No lint errors found
Version: typescript 3.5.1, tslint 5.17.0
Time: 2896ms
-
http://localhost:8081/にアクセスして以下の画面が出たら完了
最終的なPackage.json
package.json
{
"name": "sample-vue-project",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:e2e": "vue-cli-service test:e2e",
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"core-js": "^2.6.5",
"vue": "^2.6.10",
"vue-class-component": "^7.0.2",
"vue-property-decorator": "^8.1.0",
"vue-router": "^3.0.3",
"vuex": "^3.0.1"
},
"devDependencies": {
"@types/chai": "^4.1.0",
"@types/mocha": "^5.2.4",
"@vue/cli-plugin-babel": "^3.8.0",
"@vue/cli-plugin-e2e-cypress": "^3.8.0",
"@vue/cli-plugin-typescript": "^3.8.0",
"@vue/cli-plugin-unit-mocha": "^3.8.0",
"@vue/cli-service": "^3.8.0",
"@vue/test-utils": "1.0.0-beta.29",
"chai": "^4.1.2",
"node-sass": "^4.9.0",
"sass-loader": "^7.1.0",
"typescript": "^3.4.3",
"vue-template-compiler": "^2.6.10"
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}