快捷導(dǎo)航

使用Vue-cli 3.0搭建Vue項(xiàng)目的方法

更新時(shí)間：2018年06月07日 13:46:17 作者：WHU_凌晨_Bin

這篇文章主要介紹了使用Vue-cli 3.0搭建Vue項(xiàng)目的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

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搭建腳本文件

以搭建一個(gè)項(xiàng)目名稱為vue-test的Vue前端項(xiàng)目為例

在終端輸入以下命令

vue create vue-test

根據(jù)提示進(jìn)行相應(yīng)的配置（以手動(dòng)配置為例）：

2.1. 選擇Manually select features

vue-cli-0.png

2.2. 選擇項(xiàng)目需要的一些特性（此處我們選擇需要Babel編譯、使用Vue路由、Vue狀態(tài)管理器、CSS預(yù)處理器、代碼檢測(cè)和格式化、以及單元測(cè)試，暫時(shí)不考慮端到端測(cè)試(E2E Testing)）

vue-cli-1.png

2.3. 選擇CSS預(yù)處理器語(yǔ)言，此處選擇LESS

vue-cli-2.png

2.4. 選擇ESLint的代碼規(guī)范，此處使用 Standard代碼規(guī)范

vue-cli-3.png

2.5. 選擇何時(shí)進(jìn)行代碼檢測(cè)，此處選擇在保存時(shí)進(jìn)行檢測(cè)

vue-cli-4.png

2.6. 選擇單元測(cè)試解決方案，此處選擇 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項(xiàng)目中，并啟動(dòng)項(xiàng)目

// 進(jìn)入到vue-test項(xiàng)目
cd vue-test
// - 啟動(dòng)服務(wù)
yarn serve
// - 打包編譯
yarn build
// - 執(zhí)行l(wèi)int
yarn lint
// - 執(zhí)行單元測(cè)試
yarn test:unit

3. vue.config.js配置 [TODO]

3.1 vue.config.js介紹

3.2. 配置代理

3.3. 配置Webpack其他選項(xiàng)

4. 升級(jí)已有項(xiàng)目到vue-cli 3.0版本 [TODO]

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Vue-cli
Vue

相關(guān)文章

Vue3哈希模式實(shí)現(xiàn)錨點(diǎn)導(dǎo)航方式
這篇文章主要介紹了Vue3哈希模式實(shí)現(xiàn)錨點(diǎn)導(dǎo)航方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-04-04
vue 自定義icon圖標(biāo)的步驟
這篇文章主要介紹了vue 自定義icon的圖標(biāo)的步驟，文中大概給大家分為兩步驟，通過(guò)實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì),需要的朋友可以參考下
2021-08-08
解決vue點(diǎn)擊控制單個(gè)樣式的問(wèn)題
今天小編就為大家分享一篇解決vue點(diǎn)擊控制單個(gè)樣式的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
一文帶你吃透Vue3編譯原理
一直對(duì)編譯原理的東西都有一種恐懼感，感覺(jué)太難了，看不懂，打開vue3源碼看到編譯相關(guān)的代碼，直接嚇退。不要擔(dān)心，小編今天帶你一文吃透Vue3編譯原理
2023-02-02
Element基于el-input數(shù)字范圍輸入框的實(shí)現(xiàn)
本文主要介紹了?Element基于el-input數(shù)字范圍輸入框的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
vue父組件通過(guò)props如何向子組件傳遞方法詳解
在Vue 中,可以使用 props 向子組件傳遞數(shù)據(jù)，下面這篇文章主要給大家介紹了關(guān)于vue父組件通過(guò)props如何向子組件傳遞方法的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。
2017-08-08
Vue mixins混入使用解析
如果我們?cè)诿總€(gè)組件中去重復(fù)定義這些屬性和方法會(huì)使得項(xiàng)目出現(xiàn)代碼冗余并提高了維護(hù)難度，針對(duì)這種情況官方提供了Mixins特性，這時(shí)使用Vue mixins混入有很大好處，下面就介紹下Vue mixins混入使用方法，需要的朋友參考下吧
2023-02-02
Vue使用video.js的代碼詳解
這篇文章主要介紹了Vue使用video.js的代碼詳解,包括在vue腳手架中引入video.js，實(shí)例化了視頻.js播放器，并在上銷毀了它，結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2022-03-03
如何在vue3中優(yōu)雅的使用jsx/tsx詳解
看了一些 Vue3 的組件庫(kù)源碼,發(fā)現(xiàn)無(wú)一例外都使用的jsx/tsx來(lái)實(shí)現(xiàn),而且實(shí)現(xiàn)方式也各不相同,下面這篇文章主要給大家介紹了關(guān)于如何在vue3中優(yōu)雅的使用jsx/tsx的相關(guān)資料,需要的朋友可以參考下
2022-10-10
Vue使用axios進(jìn)行數(shù)據(jù)異步交互的方法
大家都知道在Vue里面有兩種出名的插件能夠支持發(fā)起異步數(shù)據(jù)傳輸和接口交互,分別是axios和vue-resource,同時(shí)vue更新到2.0之后,宣告不再對(duì)vue-resource更新,而是推薦的axios,今天就講一下怎么引入axios,需要的朋友可以參考下
2024-01-01