TypeScript
vue.js
vue-cli

ゼロから始めるvue-cliプロジェクト作成(Vue.js初心者用)

Vue.jsに関するものが一切無い状態からスタート。
初心者が踏み出した最初の一歩の軌跡。

vue-cliをインストール

yarn global add @vue/cli
  ・・・
success Installed "@vue/cli@3.0.0-beta.9" with binaries:
      - vue
✨  Done in 7.82s.

vue-cliでプロジェクト新規作成

vue create client

Vue CLI v3.0.0-beta.9
? Please pick a preset: Manually select features
? Check the features needed for your project: TS, PWA, Router, Vuex, CSS Pre-processors, Linter
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): SCSS/SASS
? Pick a linter / formatter config: TSLint
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? Yes
? Save preset as: ToDo
? Pick the package manager to use when installing dependencies: Yarn

  ・・・

success Saved lockfile.
✨  Done in 12.57s.

⚓  Running completion hooks...
[-/1] ⠈ waiting...
🎉  Successfully created project client.
👉  Get started with the following commands:

 $ yarn serve

出力されたソース

Screen Shot 2018-05-02 at 20.32.18.png

ソースを開いてみる

  • Visual Studio CodeのVeturというプラグインをインストール
  • *.vueがimportでTSLintエラー。なぜかモジュールが見つからない。これでも何故か動く。
  • ts-vue-pluginをインストールしても消えない。vue-cliバージョン3に上がって何かがバグってる?
  • よくわからないけど放置して先に進む。

Screen Shot 2018-05-02 at 21.13.19.png

ビルドしてWebサーバ起動

cd client
yarn serve

  ・・・

 DONE  Compiled successfully in 5096ms                                                                                                                                                                                                                              20:24:14

No type errors found
No lint errors found
Version: typescript 2.8.3, tslint 5.9.1
Time: 2448ms

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.0.4:8080/

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

ページを表示

http://localhost:8080/

Screen Shot 2018-05-02 at 20.25.21.png

本番環境ビルドしてみる

yarn build
yarn run v1.6.0
$ vue-cli-service build

⠙  Building for production...Starting type checking and linting service...
Using 1 worker with 2048MB memory limit
⠏  Building for production...

 DONE  Compiled successfully in 17072ms                                                                                                                                                                                                                             20:50:21

  File                                      Size             Gzipped

  dist/js/vendor.b8ff155e.js                130.46 kb        44.21 kb
  dist/js/app.ef8ba8ca.js                   14.72 kb         8.84 kb
  dist/service-worker.js                    0.94 kb          0.53 kb
  dist/precache-manifest.67d7c1149d8ee04    0.44 kb          0.22 kb
  53931a45949cb555f.js
  dist/css/app.fbae4076.css                 0.42 kb          0.26 kb

  Images and other types of assets omitted.

 DONE  Build complete. The dist directory is ready to be deployed.

ビルドで生成されたもの一式

Screen Shot 2018-05-02 at 21.04.51.png