使用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ù)提示進(jìn)行相應(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. 選擇何時進(jìn)行代碼檢測，此處選擇在保存時進(jìn)行檢測
vue-cli-4.png
2.6. 選擇單元測試解決方案，此處選擇 Jest
vue-cli-5.png
2.7. 選擇 Babel、PostCSS、ESLint等配置文件存放位置，此處選擇單獨(dú)保存在各自的配置文件中
vue-cli-6.png
2.8. 配置完成后等待Vue-cli完成初始化
vue-cli-7.png
2.9. vue-cli初始化完成后，根據(jù)提示，進(jìn)入到vue-test項目中，并啟動項目
// 進(jìn)入到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)文章
使用element-ui +Vue 解決 table 里包含表單驗(yàn)證的問題
這篇文章主要介紹了使用element-ui +Vue 解決 table 里包含表單驗(yàn)證的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue是一個mvvm框架，即數(shù)據(jù)雙向綁定，即當(dāng)數(shù)據(jù)發(fā)生變化的時候，視圖也就發(fā)生變化，當(dāng)視圖發(fā)生變化的時候，數(shù)據(jù)也會跟著同步變化。本文將通過示例詳解其中原理，需要的可以參考一下2022-05-05
這篇文章主要給大家介紹了關(guān)于Vite內(nèi)網(wǎng)ip訪問的2種配置方式,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用Vite具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-07-07
解決echarts 一條柱狀圖顯示兩個值,類似進(jìn)度條的問題
這篇文章主要介紹了解決echarts 一條柱狀圖顯示兩個值,類似進(jìn)度條的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue中的事件修飾符once,prevent,stop,capture,self,passive
這篇文章主要介紹了vue中的事件修飾符once,prevent,stop,capture,self,passive，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vscode vue 文件模板的配置方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
vue3+ts+vite打包后靜態(tài)資源404無法加載js和css問題解決辦法
這篇文章主要給大家介紹了關(guān)于vue3+ts+vite打包后靜態(tài)資源404無法加載js和css問題的解決辦法,文中通過代碼以及圖文介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-04-04
Vue項目中實(shí)現(xiàn)描點(diǎn)跳轉(zhuǎn)scrollIntoView的案例
這篇文章主要介紹了Vue項目中實(shí)現(xiàn)描點(diǎn)跳轉(zhuǎn)scrollIntoView的案例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
基于vue+face-api.js實(shí)現(xiàn)前端人臉識別功能
基于face-api.js要實(shí)現(xiàn)人臉識別功能,首先要將自己需要的模型文件下載保存在靜態(tài)目錄下,可以通過cdn的方式在index.html中引入face-api.js,本文給大家介紹vue+face-api.js實(shí)現(xiàn)前端人臉識別功能,感興趣的朋友一起看看吧2023-12-12
關(guān)于vue.js彈窗組件的知識點(diǎn)總結(jié)
最近在開發(fā)過程對對于組件化的開發(fā)有一些感想，于是開始記錄下這些。彈窗組件一直是 web 開發(fā)中必備的，使用頻率相當(dāng)高，最常見的莫過于 alert，confirm和prompt這些,不同的組件庫對于彈窗的處理也是不一樣的，下面來一起看看吧。2016-09-09