Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vue CLI v4

Avatar for Kaneko Takeshi Kaneko Takeshi
October 25, 2019
Technology
0
21

Vue CLI v4

Avatar for Kaneko Takeshi

Kaneko Takeshi

October 25, 2019
Tweet

More Decks by Kaneko Takeshi

See All by Kaneko Takeshi
オープンソースライセンスについて勉強する定期
Avatar for Kaneko Takeshi tkckaneko
0
31
Eye Tracking on the Browser
Avatar for Kaneko Takeshi tkckaneko
0
88
IEEE754を完全に理解した
Avatar for Kaneko Takeshi tkckaneko
1
76
CSSのトレンドをみんなで見よう -2021年-
Avatar for Kaneko Takeshi tkckaneko
0
93
多分これが一番早いと思います
Avatar for Kaneko Takeshi tkckaneko
0
27
暗黒面の話
Avatar for Kaneko Takeshi tkckaneko
0
25
CSR / SSR / SSG / JAMstack
Avatar for Kaneko Takeshi tkckaneko
0
73
BOLT
Avatar for Kaneko Takeshi tkckaneko
0
31
CSS Logical Properties and Values
Avatar for Kaneko Takeshi tkckaneko
0
36

Other Decks in Technology

See All in Technology
MCPでつなぐElasticsearchとLLM - 深夜の障害対応を楽にしたい / Bridging Elasticsearch and LLMs with MCP
Avatar for Sashimimochi sashimimochi
0
160
Contract One Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
13k
インフラエンジニア必見!Kubernetesを用いたクラウドネイティブ設計ポイント大全
Avatar for 高棹大樹 daitak
1
350
今日から始める Amazon Bedrock AgentCore
Avatar for Har1101 har1101
4
410
Ruby版 JSXのRuxが気になる
Avatar for SansanTech sansantech
PRO
0
150
ブロックテーマ、WordPress でウェブサイトをつくるということ / 2026.02.07 Gifu WordPress Meetup
Avatar for Toro_Unit (Hiroshi Urabe) torounit
0
180
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
10k
Greatest Disaster Hits in Web Performance
Avatar for Estela Franco guaca
0
210
OCI Database Management サービス詳細
Avatar for oracle4engineer oracle4engineer
PRO
1
7.4k
ブロックテーマでサイトをリニューアルした話 / 2026-01-31 Kansai WordPress Meetup
Avatar for Toro_Unit (Hiroshi Urabe) torounit
0
460
Codex 5.3 と Opus 4.6 にコーポレートサイトを作らせてみた / Codex 5.3 vs Opus 4.6
Avatar for ama-ch ama_ch
0
140
OpenShiftでllm-dを動かそう！
Avatar for jpishikawa jpishikawa
0
100

Featured

See All Featured
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
21k
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.1k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
40k
Fireside Chat
Avatar for paigeccino paigeccino
41
3.8k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
62
49k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
0
140
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
1.7k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
8.6k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
340
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
1
1.6k
We Analyzed 250 Million AI Search Results: Here's What I Found
Avatar for Josh Blyskal joshbly
1
700
Claude Code のすすめ
Avatar for schroneko schroneko
67
210k

Transcript

  1. Vue CLI v4

  2. みんなが大好きVue CLIのversion 4がリリースされました

  3. Vue CLIはVue.jsでの開発環境を用意するためのツールです

  4. このバージョンでは細かく調整が入っているようです なかでも気になるところが Vue CLI v4 comes with greatly improved Nightwatch,

    Jest and PWA support, as well as many other small tweaks across all the core packages. です

  5. テストまわりとPWAのサポートが改善されたようです - UnitテストのJest - E2EテストのNightWatch - いつものPWA

  6. どこまで便利になったかご紹介します

  7. まず、Vue CLIのバージョンを上げます

  8. $ yarn global add @vue/cli ・・・ success Installed "@vue/[email protected]" with

    binaries: - vue ✨ Done in 62.80s.

  9. $ vue create my-project とすれば簡単にコマンドでVue.jsのプロジェクトが作れます

  10. $ vue ui おすすめはこちら

  11. では作っていきましょう

  12. まずプロジェクト名を決めて

  13. None

  14. プラグインを選びます

  15. None

  16. 忘れずにJest、NightWatch、PWAを入れましょう

  17. None

  18. デモ

  19. まとめ 何も設定することなく UnitテストもE2Eテストもできるようになりました ※おまけにPWAもできるよ