vue-cli4.0 + TS 創建新項目


前言

科技總是在進步,技術也要往前走,所以這不是開始學習TS了,Java還在學習基礎中,前端真的是變化莫測,

所以開始吧新的學習路程:

 

第一步,如果你之前沒有裝vuecli,可以直接執行下面命令

npm install --global @vue/cli

注:這里我install 的時候不成,於是我用的是 cnpm install --global @vue/cli

如果之前裝了vuecli的版本的,操作第一步之前需要先uninstall之前的版本

cnpm uninstall vue-cli -g // 卸載

第二步,創建一個vue項目

vue create project-one

 

在Windows上到

 

上下箭頭不起左右的時候,你需要git 上配置

更改 git Bash 的配置,找到安裝git下面的etc下面的bash.bashrc

 

 

 打開,在文件最底部加上 alias vue='winpty vue.cmd' 這一行代碼就可以了

 

 

 

 保存,然后重新打開git Bash 這個時候再重新使用create 命令創建項目,發現上下箭頭的作用就正常了

 

我們這里選擇手動配置

按 ↓ 選擇“Manually select features”,再按 Enter

  

 選擇你需要的配置項

通過↑ ↓ 箭頭選擇你要配置的項,按 空格 是選中,按 a 是全選,按 i 是反選。具體每個配置項表示什么意思在下面會有說明。

 

 

 

 

 

 

 

 

 

 

 

 

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Babel //轉碼器,可以將ES6代碼轉為ES5代碼,從而在現有環境執行。 
( ) TypeScript// TypeScript是一個JavaScript(后綴.js)的超集(后綴.ts)包含並擴展了 JavaScript 的語法,需要被編譯輸出為 JavaScript在瀏覽器運行
( ) Progressive Web App (PWA) Support// 漸進式Web應用程序
( ) Router // vue-router(vue路由)
( ) Vuex // vuex(vue的狀態管理模式)
( ) CSS Pre-processors // CSS 預處理器(如:less、sass)
( ) Linter / Formatter // 代碼風格檢查和格式化(如:ESlint)
( ) Unit Testing // 單元測試(unit tests)
( ) E2E Testing // e2e(end to end) 測試

 

 選完之后按 Enter。分別選擇每個對應功能的具體包。選你擅長的,沒有擅長的,就選使用廣的

 

選擇是否使用history router

 

 

Vue-Router 利用了瀏覽器自身的hash 模式和 history 模式的特性來實現前端路由(通過調用瀏覽器提供的接口)。

  • 我這里建議選n。這樣打包出來丟到服務器上可以直接使用了,后期要用的話,也可以自己再開起來。
  • 選yes的話需要服務器那邊再進行設置。

    Use history mode for router? (Requires proper server setup for index fallback in production)

選擇css 預處理器

技術圖片

我選擇的是Sass/Scss(with dart-sass) 

node-sass是自動編譯實時的,dart-sass需要保存后才會生效。sass 官方目前主力推dart-sass 最新的特性都會在這個上面先實現。(該回答參考http://www.imooc.com/qadetail/318730

 

 選擇Eslint代碼驗證規則

提供一個插件化的javascript代碼檢測工具,ESLint + Prettier //使用較多

技術圖片

 

選擇什么時候進行代碼規則檢測

技術圖片

( ) Lint on save // 保存就檢測
( ) Lint and fix on commit // fix和commit時候檢查

建議選擇保存就檢測,等到commit的時候,問題可能都已經積累很多了。

 

 選擇如何存放配置

技術圖片

> In dedicated config files // 獨立文件放置
  In package.json // 放package.json里

如果是選擇 獨立文件放置,項目會有單獨如下圖所示的幾件文件。

技術圖片 

是否保存當前配置

技術圖片

鍵入N不記錄,如果鍵入Y需要輸入保存名字,如第2步所看到的我保存的名字為test。

 

等待創建項目

技術圖片 

5.執行它給出的命令,可以直接訪問了

技術圖片

到這里我們的項目就已搭建完成啦~~

 

多少啊

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM