Edited at

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

More than 1 year has passed since last update.

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