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
86
IEEE754を完全に理解した
Avatar for Kaneko Takeshi tkckaneko
1
76
CSSのトレンドをみんなで見よう -2021年-
Avatar for Kaneko Takeshi tkckaneko
0
93
多分これが一番早いと思います
Avatar for Kaneko Takeshi tkckaneko
0
26
暗黒面の話
Avatar for Kaneko Takeshi tkckaneko
0
24
CSR / SSR / SSG / JAMstack
Avatar for Kaneko Takeshi tkckaneko
0
71
BOLT
Avatar for Kaneko Takeshi tkckaneko
0
30
CSS Logical Properties and Values
Avatar for Kaneko Takeshi tkckaneko
0
35

Other Decks in Technology

See All in Technology
AgentCore BrowserとClaude Codeスキルを活用した 『初手AI』を実現する業務自動化AIエージェント基盤
Avatar for Hirokatsu Endo ruzia
7
2.2k
AWS re:Invent2025最新動向まとめ（NRIグループre:Cap 2025）
Avatar for KoheiGamo gamogamo
0
140
20251222_サンフランシスコサバイバル術
Avatar for ponponmikan ponponmikankan
2
160
Microsoft Agent Frameworkの可観測性
Avatar for tomokusaba tomokusaba
1
120
AI との良い付き合い方を僕らは誰も知らない
Avatar for Asei Sugiyama asei
1
320
[Neurogica] 採用ポジション/ Recruitment Position
Avatar for Neurogica neurogica
1
140
Claude Skillsの テスト業務での活用事例
Avatar for Sammy(MoritaMasami) moritamasami
1
120
Oracle Database@Azure：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
3
240
202512_AIoT.pdf
Avatar for AIxIoTビジネス共創ラボ iotcomjpadmin
0
170
AIBuildersDay_track_A_iidaxs
Avatar for iidaxs iidaxs
4
1.7k
Directions Asia 2025 _ Let’s build my own secretary (AI Agent) Part 1 & 2
Avatar for Dynamics Ryo ryoheig0405
0
110
Kiro を用いたペアプロのススメ
Avatar for Taiki Sugawara taikis
4
2.1k

Featured

See All Featured
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
1
270
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
3
2k
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
5k
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
210
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9.4k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
69
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
0
190
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
1.7k
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
41
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
54
48k
First, design no harm
Avatar for Per Axbom axbom
PRO
1
1.1k
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
19k

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もできるよ