使用vue cli4.x搭建vue項(xiàng)目的過(guò)程詳解
cli-4.x已經(jīng)發(fā)布好久了，斟酌了好久，還是決定將原來(lái)的cli-2.x升級(jí)到4.x,詳細(xì)的升級(jí)過(guò)程可以戳這里
1、創(chuàng)建項(xiàng)目 vue create vuetest
2、選擇配置方式
? Please pick a preset: (Use arrow keys) ☜(使用箭頭鍵) > default (babel, eslint) ☜(使用默認(rèn)的配置，會(huì)安裝babel和eslint) Manually select features ☜(手動(dòng)配置)
這里我選擇的是手動(dòng)配置（使用↑ ↓箭頭切換，Enter確認(rèn)，箭頭切換失效可以戳這里），當(dāng)然如果你之前有保存過(guò)配置模板的話，在這里還會(huì)有第三個(gè)選項(xiàng)就是你之前保存過(guò)的（下面會(huì)說(shuō)到），因?yàn)橄胂肱渲玫牟皇呛芏?，所以?xí)慣了每次都是手動(dòng)配置
3、手動(dòng)配置項(xiàng)選擇
通過(guò)↑ ↓ 箭頭選擇你要配置的項(xiàng)，按 空格 是選中，按 a 是全選，按 i 是反選 (以下是每一個(gè)選項(xiàng)的詳細(xì)解釋)
? Please pick a preset: Manually select features ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) >(*) Babel ☜(轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼) ( ) TypeScript ☜( js的超集，強(qiáng)類型語(yǔ)言) ( ) Progressive Web App (PWA) Support ☜(漸進(jìn)式Web應(yīng)用程序) ( ) Router ☜(vue-router（vue路由）) ( ) Vuex ☜(vuex（vue的狀態(tài)管理模式）) ( ) CSS Pre-processors ☜(CSS 預(yù)處理器（如：less、sass）) (*) Linter / Formatter ☜(代碼風(fēng)格檢查和格式化（如：ESlint）) ( ) Unit Testing ☜(單元測(cè)試) ( ) E2E Testing ☜(集成測(cè)試)
根據(jù)自己項(xiàng)目的實(shí)際需求選擇合適的配置
我這里是全選了 這里是后面會(huì)出現(xiàn)的配置詳細(xì)信息
?Use class-style component syntax? (Y/n)： ☜(是否使用babel做轉(zhuǎn)義) --------------------------------------------------------------------------------------- ?Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? ☜(使用Babel與TypeScript一起用于自動(dòng)檢測(cè)的填充) --------------------------------------------------------------------------------------- ?Use history mode for router? (Requires proper server setup for index fallback in production) ☜(路由模式) -------------------------------------------------------------------------------------- ?Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) ☜(CSS編譯器) > Sass/SCSS (with dart-sass) ☜(保存后編譯) Sass/SCSS (with node-sass) ☜(實(shí)時(shí)編譯) Less Stylus ---------------------------------------------------------------------------------------- ?Pick a linter / formatter config: (Use arrow keys) ☜(選擇語(yǔ)法檢查規(guī)范) > ESLint with error prevention only ☜(只進(jìn)行報(bào)錯(cuò)提醒) ESLint + Airbnb config ☜(不嚴(yán)謹(jǐn)模式) ESLint + Standard config ☜(正常模式) ESLint + Prettier ☜(嚴(yán)格模式) TSLint (deprecated) ☜(typescript格式驗(yàn)證工具) ---------------------------------------------------------------------------------------- ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) ☜(選擇什么時(shí)候進(jìn)行代碼規(guī)則檢測(cè)) >(*) Lint on save ☜(保存就檢測(cè)) ( ) Lint and fix on commit ☜(fix和commit時(shí)候檢測(cè)) ----------------------------------------------------------------------------------------- ? Pick a unit testing solution >(*) Mocha + Chai ☜(mocha靈活,只提供簡(jiǎn)單的測(cè)試結(jié)構(gòu)，如果需要其他功能需要添加其他庫(kù)/插件完成。必須在全局環(huán)境中安裝) ( ) Jest ☜(安裝配置簡(jiǎn)單，容易上手。內(nèi)置Istanbul，可以查看到測(cè)試覆蓋率，相較于Mocha:配置簡(jiǎn)潔、測(cè)試代碼簡(jiǎn)潔、易于和babel集成、內(nèi)置豐富的expect) ------------------------------------------------------------------------------------------ ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) ☜(選擇如何存放配置測(cè)) > In dedicated config files ☜(獨(dú)立文件放置) In package.json ☜(放package.json里) ----------------------------------------------------------------------------------------- ? Save this as a preset for future projects? (y/N) ☜(保存上述配置，保存后下一次可直接根據(jù)上述配置生成項(xiàng)目，就是上面提到的第三種情況)
到這里配置就基本完成了，等待項(xiàng)目加載各種包...
加載完成后，進(jìn)入項(xiàng)目， npm run serve 啟動(dòng)就可以了...
ps：下面看下vue-cli2.9.6升級(jí)vue-cli4.x相關(guān)問(wèn)題
最近公司想要進(jìn)行技術(shù)升級(jí)，因?yàn)橐咔榈脑颍以诩谊P(guān)了兩個(gè)多月（嗚嗚~），來(lái)公司他們都已經(jīng)工作有一段時(shí)間，于是我只能自己搞了，先看一下我的環(huán)境
他們說(shuō)新項(xiàng)目要求使用cli4.x,于是網(wǎng)上找了步驟執(zhí)行（建議看完再實(shí)際操作）
1、首先卸載
npm uninstall -g @vue-cli
執(zhí)行了之后使用 vue -V ,發(fā)現(xiàn)版本仍然是2.9.6，感覺(jué)沒(méi)卸載掉呀，不管，繼續(xù)按照網(wǎng)上的教程安裝
2、安裝
npm install -g @vue-cli
執(zhí)行完成之后發(fā)現(xiàn)查看版本出來(lái)的仍然是2.9.6，很煩，然后就去網(wǎng)上找了一大堆，發(fā)現(xiàn)發(fā)現(xiàn)都是互相copy的博客，怎么辦了，環(huán)境還是要繼續(xù)升級(jí)的呀，然后我就只能采用最原始的辦法 刪文件
1、命令行執(zhí)行 where vue
找到vue-cli文件夾，（不相信的話先備份一下）然后刪除
2、執(zhí)行 vue -V 這個(gè)時(shí)候應(yīng)該是看不到版本號(hào)了吧（看得到那就說(shuō)明你刪錯(cuò)地方了，不能怪我）
3、重新安裝
npm install -g @vue-cli
4、看一下版本號(hào)
總結(jié)
到此這篇關(guān)于使用vue cli4.x搭建vue項(xiàng)目的過(guò)程詳解的文章就介紹到這了,更多相關(guān)cli4.x搭建vue項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
虛擬列表是一種技術(shù)，它只渲染用戶當(dāng)前可見(jiàn)的列表項(xiàng)，而不是渲染整個(gè)列表，這篇文章主要來(lái)和大家聊聊虛擬列表的原理與實(shí)現(xiàn)，希望對(duì)大家有所幫助2023-05-05
vue+swiper實(shí)現(xiàn)組件化開(kāi)發(fā)的實(shí)例代碼
這篇文章主要介紹了vue+swiper實(shí)現(xiàn)組件化開(kāi)發(fā)的相關(guān)資料,需要的朋友可以參考下2017-10-10
深入淺出 Vue 系列 -- 數(shù)據(jù)劫持實(shí)現(xiàn)原理
深入淺出 Vue 系列 -- 數(shù)據(jù)劫持實(shí)現(xiàn)原理2019-04-04
keepalive?是?Vue?內(nèi)置的一個(gè)組件，可以使被包含的組件保留狀態(tài)，或避免重新渲染，也就是所謂的組件緩存，這篇文章主要介紹了說(shuō)說(shuō)你對(duì)Vue的keep-alive的理解,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了淺談vue首屏加載優(yōu)化，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
vue音樂(lè)播放器插件vue-aplayer的配置及其使用實(shí)例詳解
本篇文章主要介紹了vue音樂(lè)播放器插件vue-aplayer的配置及其使用實(shí)例詳解，具有一定的參考價(jià)值，有興趣的可以了解一下2017-07-07
v-model就是vue的雙向綁定的指令，能將頁(yè)面上控件輸入的值同步更新到相關(guān)綁定的data屬性，也會(huì)在更新data綁定屬性時(shí)候，更新頁(yè)面上輸入控件的值2022-09-09
基于axios封裝fetch方法及調(diào)用實(shí)例
下面小編就為大家分享一篇基于axios封裝fetch方法及調(diào)用實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
el-form組件清除校驗(yàn)提示正確方法(前端技能提升)
el-form組件提供了表單驗(yàn)證的功能,可以通過(guò)在el-form上綁定rules屬性,并在el-form-item上設(shè)置prop屬性來(lái)進(jìn)行校驗(yàn),這篇文章主要給大家介紹了關(guān)于el-form組件清除校驗(yàn)提示正確方法(前端技能提升)的相關(guān)資料,需要的朋友可以參考下2023-12-12
Vue狀態(tài)管理庫(kù)Vuex的入門(mén)使用教程
Vuex是一個(gè)專門(mén)為Vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理庫(kù)。它采用了一個(gè)集中式的架構(gòu)，將應(yīng)用程序的所有組件的狀態(tài)存儲(chǔ)在一個(gè)單獨(dú)的地方。這使得狀態(tài)的管理和維護(hù)變得更加容易2023-03-03