Vue CLIで新規プロジェクト構築

Vue CLIを利用すると、Vue本体以外にも「Babel」や「ESLint」などフロント開発に必要な環境を手軽に構築できます。ここでは、Vue CLIを利用したプロジェクト環境構築方法を確認します。

Vue CLIをインストール

作業環境

OSはMacです。以下の環境で作業します。

$ node -v
v8.10.0
$ npm -v
5.6.0
$ yarn --version
1.12.3

インストール

Vue CLIをインストールします。

$ npm install -g @vue/cli

インストールできたか確認します。

$ vue --version
3.2.1

Vue CLIの使い方

vue --help で主な利用方法を確認できます。

$ vue --help
Usage: vue <command> [options]

Options:
  -V, --version                              output the version number
  -h, --help                                 output usage information

Commands:
  create [options] <app-name>                create a new project powered by vue-cli-service
  add [options] <plugin> [pluginOptions]     install a plugin and invoke its generator in an already created project
  invoke [options] <plugin> [pluginOptions]  invoke the generator of a plugin in an already created project
  inspect [options] [paths...]               inspect the webpack config in a project with vue-cli-service
  serve [options] [entry]                    serve a .js or .vue file in development mode with zero config
  build [options] [entry]                    build a .js or .vue file in production mode with zero config
  ui [options]                               start and open the vue-cli ui
  init [options] <template> <app-name>       generate a project from a remote template (legacy API, requires @vue/cli-init)
  config [options] [value]                   inspect and modify the config
  upgrade [semverLevel]                      upgrade vue cli service / plugins (default semverLevel: minor)
  info                                       print debugging information about your environment

  Run vue <command> --help for detailed usage of given command.

新規Vueプロジェクトを構築
( defaultの場合 )

CLI形式 でプロジェクトを構築してみます。
(Vue CLIは GUI形式 でプロジェクトを構築する方法も提供しています。)

vue create

vue create project-name の形式で新規プロジェクトを作成できます。

$ vue create wakuwaku-test

defaultManually select features を選択できます。
今回は、 default を選択してみます。

Vue CLI v3.2.1
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint)
  Manually select features

以下のように、パッケージのインストールが開始されました。

Vue CLI v3.2.1
✨  Creating project in /xxxx/wakuwaku-test.
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...

yarn install v1.12.3
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...
success Saved lockfile.
✨  Done in 71.80s.
🚀  Invoking generators...
📦  Installing additional dependencies...

yarn install v1.12.3
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...

success Saved lockfile.
✨  Done in 16.99s.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project wakuwaku-test.
👉  Get started with the following commands:

 $ cd wakuwaku-test
 $ yarn serve

default を選択した場合は、以上で作業完了です。

開発環境立ち上げ

作成した環境に移動して、開発環境を立ち上げてみます。

$ cd wakuwaku-test/
$
$ yarn serve
yarn run v1.12.3
$ vue-cli-service serve
 INFO  Starting development server...
 98% after emitting CopyPlugin

 DONE  Compiled successfully in 5101ms                                                                                               13:39:39


  App running at:
  - Local:   http://localhost:8081/
  - Network: http://192.168.1.43:8081/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

http://localhost:8081/ にアクセスしてみます。

496-vuejs-cli-basic-serve.png

開発環境が立ち上がったことを確認できました。

package.json

default を選択した場合、package.json は以下のようになっていました。

{
  "name": "wakuwaku-test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "vue": "^2.5.17"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.2.0",
    "@vue/cli-plugin-eslint": "^3.2.0",
    "@vue/cli-service": "^3.2.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0-0",
    "vue-template-compiler": "^2.5.17"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

新規Vueプロジェクトを構築
( Manually select featuresの場合 )

今度は、Manually select features を選択したときの動作を確認します。

Manually select features を選択すると以下のように、Router Vuex Test などの設定も行えます。

Vue CLI v3.2.1
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

以下のように設定する項目が多くなりますが、ある程度Vueの開発経験者であれば、こちらのほうが便利かと思います。

Vue CLI v3.2.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS
? Pick a linter / formatter config: TSLint
? 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 a E2E testing solution: Cypress
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json
? Save this as a preset for future projects? (y/N)

フォルダ構成

Manually select features で、Router Vuex Test など選択した状態で作成したプロジェクトのフォルダ構成は以下のようになっていました。

.
├── node_modules/
├── public/
│   ├── favicon.ico
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── views/          # 選択したオプションによって生成されるか決まる
│   ├── App.vue
│   ├── main.js
│   ├── router.js       # 選択したオプションによって生成されるか決まる
│   └── store.js        # 選択したオプションによって生成されるか決まる
├── tests/              # 選択したオプションによって生成されるか決まる
│   ├── e2e/
│   └── unit/
├── babel.config.js
├── cypress.json        # 選択したオプションによって生成されるか決まる
├── package.json
├── README.md
└── yarn.lock

vue-cliの2系のときには、buildフォルダ configフォルダ があり、そこでWebpackの各種設定を行なっていましたが、3系になりそれらのフォルダはなくなりました。

調整したい場合、vue.config.js というファイルを作成してそこで行うようです。

https://cli.vuejs.org/guide/webpack.html

また、ルーティングに対応するコンポーネントは以前だと pagesフォルダ だったかと思いますが、 viewsフォルダ になっていました。

参考