使用Vue-cli 3.0搭建Vue項目的方法
1. 環(huán)境準(zhǔn)備
1.1. 安裝Node.js （建議使用LTS版本）
1.2. nrm安裝及npm registry設(shè)置
// use npm npm i nrm -g // use yarn yarn global add nrm
查看可用的npm源
nrm ls
nrm查看npm源.png
切換npm源(以使用taobao為例)
// 用法： nrm use *** nrm use taobao // 切換之后可用 nrm ls查看是否已經(jīng)切換了npm源
nrm切換npm源.png
1.3. 安裝yarn
npm i yarn -g
1.4. 安裝vue-cli 3.0
npm i @vue/cli -g
2. vue-cli搭建腳本文件
以搭建一個項目名稱為vue-test的Vue前端項目為例
在終端輸入以下命令
vue create vue-test
根據(jù)提示進行相應(yīng)的配置（以手動配置為例）：
2.1. 選擇Manually select features
vue-cli-0.png
2.2. 選擇項目需要的一些特性（此處我們選擇需要Babel編譯、使用Vue路由、Vue狀態(tài)管理器、CSS預(yù)處理器、代碼檢測和格式化、以及單元測試，暫時不考慮端到端測試(E2E Testing)）
vue-cli-1.png
2.3. 選擇CSS預(yù)處理器語言，此處選擇LESS
vue-cli-2.png
2.4. 選擇ESLint的代碼規(guī)范，此處使用 Standard代碼規(guī)范
vue-cli-3.png
2.5. 選擇何時進行代碼檢測，此處選擇在保存時進行檢測
vue-cli-4.png
2.6. 選擇單元測試解決方案，此處選擇 Jest
vue-cli-5.png
2.7. 選擇 Babel、PostCSS、ESLint等配置文件存放位置，此處選擇單獨保存在各自的配置文件中
vue-cli-6.png
2.8. 配置完成后等待Vue-cli完成初始化
vue-cli-7.png
2.9. vue-cli初始化完成后，根據(jù)提示，進入到vue-test項目中，并啟動項目
// 進入到vue-test項目 cd vue-test // - 啟動服務(wù) yarn serve // - 打包編譯 yarn build // - 執(zhí)行l(wèi)int yarn lint // - 執(zhí)行單元測試 yarn test:unit
3. vue.config.js配置 [TODO]
3.1 vue.config.js介紹
3.2. 配置代理
3.3. 配置Webpack其他選項
4. 升級已有項目到vue-cli 3.0版本 [TODO]
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue3哈希模式實現(xiàn)錨點導(dǎo)航方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要介紹了vue 自定義icon的圖標(biāo)的步驟，文中大概給大家分為兩步驟，通過實例圖文相結(jié)合給大家介紹的非常詳細(xì),需要的朋友可以參考下2021-08-08
今天小編就為大家分享一篇解決vue點擊控制單個樣式的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
一直對編譯原理的東西都有一種恐懼感，感覺太難了，看不懂，打開vue3源碼看到編譯相關(guān)的代碼，直接嚇退。不要擔(dān)心，小編今天帶你一文吃透Vue3編譯原理2023-02-02
Element基于el-input數(shù)字范圍輸入框的實現(xiàn)
本文主要介紹了?Element基于el-input數(shù)字范圍輸入框的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
在Vue 中,可以使用 props 向子組件傳遞數(shù)據(jù)，下面這篇文章主要給大家介紹了關(guān)于vue父組件通過props如何向子組件傳遞方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
如果我們在每個組件中去重復(fù)定義這些屬性和方法會使得項目出現(xiàn)代碼冗余并提高了維護難度，針對這種情況官方提供了Mixins特性，這時使用Vue mixins混入有很大好處，下面就介紹下Vue mixins混入使用方法，需要的朋友參考下吧2023-02-02
這篇文章主要介紹了Vue使用video.js的代碼詳解,包括在vue腳手架中引入video.js，實例化了視頻.js播放器，并在上銷毀了它，結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-03-03
看了一些 Vue3 的組件庫源碼,發(fā)現(xiàn)無一例外都使用的jsx/tsx來實現(xiàn),而且實現(xiàn)方式也各不相同,下面這篇文章主要給大家介紹了關(guān)于如何在vue3中優(yōu)雅的使用jsx/tsx的相關(guān)資料,需要的朋友可以參考下2022-10-10
Vue使用axios進行數(shù)據(jù)異步交互的方法
大家都知道在Vue里面有兩種出名的插件能夠支持發(fā)起異步數(shù)據(jù)傳輸和接口交互,分別是axios和vue-resource,同時vue更新到2.0之后,宣告不再對vue-resource更新,而是推薦的axios,今天就講一下怎么引入axios,需要的朋友可以參考下2024-01-01