Edited at

【VueJS+yarn】Vue CLIを使ってvueプロジェクトの作成をする

普段は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/にアクセスして以下の画面が出たら完了

スクリーンショット 2019-06-03 15.03.38.png


最終的な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"
]
}