一、環境搭建
1、安裝node.js
下載地址:https://nodejs.org/
安裝就下一步下一步就可以了(node8.9或以上版本)
安裝成功結束如何檢查是否安裝成功和版本
打開cmd 輸入 node –v
如果沒有出現,可以重啟電腦再試一下
2、全局安裝vue-cli3.0腳手架
卸載:如果已經全局安裝了舊版本的vue-cli(1.x 或 2.x),需要先卸載:npm uninstall vue-cli -g
安裝:也是在cmd中輸入命令 npm install -g @vue/cli
查看版本號:vue -V,(大寫的V)出現版本號即安裝成功。
3、安裝淘寶鏡像 cnpm (非必裝,網絡慢的情況可安裝)
npm install -g cnpm --registry=https://registry.npm.taobao.org
二、創建vue3.x項目
1、輸入命令 vue create projectname
注意:如果你想在某個目錄下創建項目,可以先打開這個文件夾,然后在文件夾地址欄輸入cmd 按回車鍵,彈出cmd窗口,輸入命令
2、輸入命令后會跳出選項
我們選最后一個 Manually select features
自定義創建,按回車鍵進入下一步
3、我們可以按上下鍵,然后按空格鍵選中需要的選項,最后按回車鍵進入下一步
>( ) 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) 測試
4、選擇要創建的vue的版本,我們選3.x
5、是否使用history
路由模式(不帶#號的),輸入 n
6、選擇css 模式,我們選擇 node-sass
css 預處理器,node-sass是自動編譯實時的,dart-sass需要保存后才會生效。
7、代碼驗證模式,我們選擇最后一個 ESLint + Prettier
8、熱更新模式,選 Lint on save
保存的時候就熱更新
9、配置文件存放在單獨的文件里 選 In dedicated config files
10、是否保存創建的選項,保存的話,下次創建也會按這個選擇來創建,我們先選擇 n 不保存
接下來就可以等待項目創建了
創建完成后的界面如下
我們可以輸入cd 命令 進入項目文件夾 cd oamyproject
,然后輸入 npm run serve
運行vue項目