VS Code 用Vue Cli創建項目

一、安裝node.js 

 1）安裝

先去官網下載node.js ，找到對應的操作系統，下載對應的版本，下載完成后進行安裝

2）查看版本

打開vs code 的終端，輸入node -v 就可以查看node版本

 

 輸入 npm -v 查看npm版本

 

 

二、安裝CNPM 

1）安裝

有了npm為什么還要安裝cnpm呢？是因為在國內使用npm有時候會很慢，使用淘寶的cnpm下載會很快

在終端輸入npm install -g cnpm –registry=http://registry.npm.taobao.org

安裝成功后，就可以使用cnpm來執行命令

三、安裝vue-cli

1）安裝

在終端輸入cnpm install -g @vue/cli

等待安裝成功

2）查看版本

在終端輸入 vue -V

 

四、使用vue-cli創建項目

在終端輸入 vue create 項目名稱  這個項目名稱必須都是小寫字母，沒有深究是什么原因

 

 

選擇“Manually select features” 選擇這個選項

 

( ) 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） 測試

這是我的自定義選擇，對自己項目要求嚴格的可以加上，按箭頭上下選擇，按空格選中

Linter / Formatter // 代碼風格檢查和格式化（如：ESlint）

 

 然后選中vue版本

 

 我這里選中2.X版本

 

 

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

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

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

 

 選擇css預處理器，我選擇的是第一個

node-sass是自動編譯實時的，dart-sass需要保存后才會生效。sass 官方目前主力推dart-sass 最新的特性都會在這個上面先實現

選擇文件存放位置

 

 

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

個人比較懶，就選擇了package.json

 

 問你是否保存成模板，我選擇的n，看個人選擇

然后就開始創建項目了

 

 

創建成功后，首先切換文件路徑

 

 

在終端輸入 npm run serve  運行該項目

 

 

在瀏覽器輸入上面的地址 ，大功告成