vue開發 —— CLI(開發環境)搭建

嘿,兄弟,請等等我

前序:

前提:

  • windos7及以上版本(linux或max環境下的,請自行找教程,大同小異)
  • vscode(當然記事本也可,版本不限,只是可能會與本文不太一樣,既然記事本都可以,那就不用多於關心這些了,只是可能開發效率沒有那麼高而已)
  • Vue CLI(當前版本 v3.8.2,特別要注意,若不是這個,慎重看此文)
  • Node.js (本文當前版本 v8.11.3,node的適用版本也需要注意)未安裝請看其他相關教程,此文默認已安裝

一:步驟:

前奏 —— 使用npm(依賴包管理工具)安裝 Vue CLI

      npm install -g @vue/cli

1 —— 命令行方式創建項目:

1.切換項目所在位置
     I:
     cd I:\VuePro
2.創建項目 (後綴帶上-n爲去掉git版本控制,默認以git爲版本,如果像我一樣是使用svn的就可以加上)
     vue create hello-world
     vue create hello-world -n
3.設置工具項(選擇Bable【兼容語法轉換器】、TypeScript【原生js的超集】、Router【vue路由】、Vuex【vue的組件間通信和狀態機制】、CSS【css轉譯工具】、Linter【代碼規範】)
13874176-de8681dcd81f5a94.png
vue配置工具項.png
4.選擇 URL路徑風格,yes的代表傳統的URL格式,False的則是每一個URL後面都帶有一個#符合(Y)
5.選擇 Less(根據個人所好選擇)
6.選擇 Eslint + Prettier(根據個人所好選擇)
7.選擇 Lint on save(保存即檢查代碼規範,不建議最後一項提交,可能有些認爲最終檢查會省事很多,這也是個人所好選擇)
8.選擇 配置文件的地方,選擇 In dedicated config files(當前版本2個選擇,第一選擇獨立配置,第二個統一在package.json裏面)第一行雖然導致配置文件過多,但是文件這種隔離比直接放在一個主文件要好很多,個人認爲,要是有些配置需要在某些場景下靈活組合加載,那麼此種方式可能最佳,但是不是說選擇這個就能完成上述工作
9.詢問是否保存作爲下次的默認配置,此處要是覺得自己選擇沒問題,下次不想這麼多步驟可以填(Y),但是我有自己的選擇,比如說TS或其他可能選項,故我填(N)(此處已結束,靜待文件生成)
10.上述步驟過程圖:
13874176-36446e5f43a33aa8.png
步驟圖.png

2 —— vue UI方式創建項目:

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章