五分鐘教你使用vue-cli3創(chuàng)建項目(新手入門)
一、搭建vue環(huán)境
安裝Nodejs 官網(wǎng)下載Nodejs，如果希望穩(wěn)定的開發(fā)環(huán)境則下LTS(Long Time Support)長期支持版，穩(wěn)定。
安裝好后cmd輸入node -v查詢是否安裝成功，如下出現(xiàn)版本號即為成功。
二、Vue腳手架工具
全局安裝vue-cli，命令行中輸入：
npm install --g vue-cli
國內(nèi)直接使用 npm 的官方鏡像是非常慢的，這里推薦使用淘寶鏡像或者yarn
淘寶鏡像的安裝如下
npm install -g cnpm --registry=https://registry.npm.taobao.org //安裝成功后 使用 cnpm i xxx 代替 npm install xxx
三、創(chuàng)建項目
vue create 項目名
vue create code //其中code為你的項目目錄名稱 (enter鍵確認(rèn),并進(jìn)入下一步)
最開始回車會出現(xiàn)下面兩項
Default (Vue 3) ([Vue 3] babel, eslint)(默認(rèn)配置 提供babel或者eslint支持)
Manually select features(手動選擇項目特性)
我們可以通過上下鍵，空格來選擇我們需要的，一般我們都會選擇手動配置
四、選擇manually select (enter鍵確認(rèn),并進(jìn)入下一步)
對于每一項的功能，王同學(xué)做一個簡單的描述：
- Babel 主要是對es6語法轉(zhuǎn)換成兼容的js （選上）
- TypeScript 支持使用TypeScript語法來編寫代碼
- Progressive Web App (PWA) Support [把網(wǎng)頁做的更像原生app]
- Router 支持vue路由配置插件（一般都會選擇）
- Vuex 支持vue程序狀態(tài)管理模式 (一般都會選擇)
- CSS Pre-processors 支持css預(yù)處理器 （一般都會選擇）
- Linter / Formatter 支持代碼風(fēng)格檢查和格式化 （選上）
- Unit Testing 單元測試
- E2E Testing E2E測試
常見的項目選擇如下
五、選擇完成之后回車 這里我們選擇3.x的
六、完成之后回車 出現(xiàn)以下界面
這里的意思是問你本次項目是否采用history模式，如果選擇Y,需要后臺配置具體看vueRouter官網(wǎng)解釋，這里我門選擇 n
七、回車 出現(xiàn)以下界面
這里的意思是問你選擇哪一種CSS預(yù)處理語言，我的項目中一般使用的是SCSS我選擇第一個
八、回車出現(xiàn)以下界面
這里的意思是選擇一種格式化代碼方式：我一般選擇 ESLint + Prettier
九、回車出現(xiàn)以下界面
這里的意思是問你什么時候進(jìn)行代碼規(guī)則檢測，我一般會選擇保存就檢測，也就是Lint on Save
十、回車出現(xiàn)以下界面
這里的意思是將Babel,PostCSS,ESLint這些配置文件放哪，通常我們會選擇放到獨立位置，讓package.json文件干凈點，所以選擇第一個
十一、回車出現(xiàn)以下界面
這里是問你是否記錄這次配置選擇，選擇之后會讓你為這次配置起一個名字，這樣下次可以直接快速配置選擇，最后回車后就會初始化項目了，完成后如下圖：
十二、根據(jù)提示，啟動項目
根據(jù)指令提示 我們先執(zhí)行cd code，然后執(zhí)行npm run serve
十三、當(dāng)我們需要自定義webpack相關(guān)配置的時候需要在項目根目錄中創(chuàng)建vue.config.js文件，它會被@vue/cli-server自動加載，相關(guān)配置內(nèi)容官網(wǎng)將的很詳細(xì)，大家可以自己去官網(wǎng)看 好了，今天的內(nèi)容就到這里了，本期結(jié)束 我們下期見?。。?/p>
到此這篇關(guān)于五分鐘教你使用vue-cli3創(chuàng)建項目(新手入門)的文章就介紹到這了,更多相關(guān)vue-cli3創(chuàng)建項目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
深入理解與使用keep-alive(配合router-view緩存整個路由頁面)
這篇文章主要介紹了深入理解與使用keep-alive(配合router-view緩存整個路由頁面)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue3使用深度選擇器修改樣式問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
本篇文章主要介紹了詳解用vue-cli來搭建vue項目和webpack，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
Vue transition實現(xiàn)點贊動畫效果的示例
點贊動畫是網(wǎng)頁評論中常見的功能，本文將介紹如何用vue實現(xiàn)這一效果。點贊時愛心縮小變大，變大時略微大一點再變正常，取消點贊時愛心無動畫，同時數(shù)字滾動，+1 時向上滾動，-1 時向下滾動2021-05-05
這篇文章主要為大家詳細(xì)介紹了vue右鍵菜單的簡單封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
Angular和Vue雙向數(shù)據(jù)綁定的實現(xiàn)原理(重點是vue的雙向綁定)
這篇文章主要介紹了Angular和Vue雙向數(shù)據(jù)綁定的實現(xiàn)原理(重點是vue的雙向綁定)，非常不錯，具有參考借鑒價值，感興趣的朋友一起看看吧2016-11-11
這篇文章主要給大家介紹了關(guān)于vue中實現(xiàn)div可編輯并插入指定元素與樣式的相關(guān)資料,文中通過代碼以及圖文將實現(xiàn)的方法介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Vue項目如何改變屏幕尺寸重新刷新頁面-計算頁面尺寸，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Element-UI控件Tree實現(xiàn)數(shù)據(jù)樹形結(jié)構(gòu)的方法
這篇文章主要介紹了Element-UI控件Tree實現(xiàn)數(shù)據(jù)樹形結(jié)構(gòu),本期介紹添加、修改等功能也比較簡單,可以通過element-ui的$prompt彈框控件來實現(xiàn),需要的朋友可以參考下2024-01-01
vue2使用ts?vue-class-component的過程
vue-property-decorator?是一個?Vue.js?的裝飾器庫,它提供了一些裝飾器來讓你在?Vue?組件中定義屬性、計算屬性、方法、事件等,本文給大家介紹vue2使用ts?vue-class-component的相關(guān)知識,感興趣的朋友一起看看吧2023-11-11