vue-cli3快速創(chuàng)建項目

文檔:https://cli.vuejs.org/zh/guide/
條件:
npm 更至最新
node >=8.9

1.全局安裝 npm install -g @vue/cli 或 yarn global add @vue/cli

2.查看版本/是否安裝成功 vue -V


image.png

3.在新文件夾下創(chuàng)建項目 vue create my-project


image.png

指向的vuecli3是因為上一次記錄過的cli3配置,第一次執(zhí)行create是沒有的
按鍵盤上下鍵可以選擇默認(default)還是手動(Manually),如果選擇default,一路回車執(zhí)行下去就行了
繼續(xù)手動一下


image.png

4.選擇配置,看個人項目需求
注意,空格鍵是選中與取消,A鍵是全選
TypeScript 支持使用 TypeScript 書寫源碼
Progressive Web App (PWA) Support PWA 支持。
Router 支持 vue-router 。
Vuex 支持 vuex 。
CSS Pre-processors 支持 CSS 預處理器。
Linter / Formatter 支持代碼風格檢查和格式化。
Unit Testing 支持單元測試。
E2E Testing 支持 E2E 測試。


image.png

5.css的預處理,我選擇的是stylus


image.png

6.我選擇的是ESLint + Prettier


image.png

7.選擇語法檢查方式,我自己選擇保存就檢測
第一個是保存檢測,第二個是fix和commit的時候檢測


image.png

8.單元測試,我選擇了Mocha


image.png

9.配置文件存放地方
第一個是獨立文件夾位置,第二個是在package.json文件里


image.png

10.詢問是否記錄這一次的配置,以便下次使用,如一開始的時候會顯示的vuecli3配置


image.png

11.回車確定等待下載


image.png

12.裝好后,啟動
cd my-project // 進入到項目根目錄
npm run serve // 啟動項目


image.png

image.png

13.3.0的目錄比2.0簡潔了很多,沒了build和config等目錄。若需要其他配置則需要自己手動配置了呢


image.png

基本就醬紫啦~

如果你仍然需要使用舊版本的 vue init 功能,你可以全局安裝一個橋接工具
npm install -g @vue/cli-init
vue init webpack my-project


image.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 為了便于 Vue 項目的管理, Vue 團隊官方開發(fā)了 vue-cli 工具。 本文將帶您使用 vue-cli 快...
    yibuyisheng閱讀 21,654評論 0 20
  • 目錄 UI組件 開發(fā)框架 實用庫 服務(wù)端 輔助工具 應(yīng)用實例 Demo示例 UI組件 element★13489 ...
    余生社會閱讀 20,513評論 7 233
  • 每次去曾老師那里,他都會催我們兩個去約會,要早點結(jié)婚,有時會提到二中的那位獨身的女老師——孫小華。 我不知...
    靜夢辰光閱讀 440評論 0 1
  • 嗨!你好: 在干嘛呢?是坐在辦公室翻閱文件嗎?哈哈……恭喜你,你終于安定下來了;如果真是這樣,那就太好了,我想...
    無聲silent閱讀 742評論 5 7
  • 01 38歲的琪和幾位新認識的朋友開玩笑說:“我就是那種從一而終的人……” 然后,搖搖頭,笑一笑說:“都奔四了,上...
    暖暖育兒家閱讀 1,688評論 30 58

友情鏈接更多精彩內(nèi)容