vue 3.x 環境搭建及項目創建


一、環境搭建
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項目


免責聲明!

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



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