vue-cli3.0 腳手架搭建項(xiàng)目的過(guò)程詳解
1.安裝vue-cli 3.0
npm install -g @vue/cli # or yarn global add @vue/cli
安裝成功后查看版本：vue -V(大寫(xiě)的V)
2.命令變化
vue create --help
用法：create [options] <app-name>
創(chuàng)建一個(gè)由 `vue-cli-service` 提供支持的新項(xiàng)目
選項(xiàng)：
-p, --preset <presetName> 忽略提示符并使用已保存的或遠(yuǎn)程的預(yù)設(shè)選項(xiàng)
-d, --default 忽略提示符并使用默認(rèn)預(yù)設(shè)選項(xiàng)
-i, --inlinePreset <json> 忽略提示符并使用內(nèi)聯(lián)的 JSON 字符串預(yù)設(shè)選項(xiàng)
-m, --packageManager <command> 在安裝依賴時(shí)使用指定的 npm 客戶端
-r, --registry <url> 在安裝依賴時(shí)使用指定的 npm registry (僅用于 npm 客戶端)
-g, --git [message] 強(qiáng)制 / 跳過(guò) git 初始化，并可選的指定初始化提交信息
-n, --no-git 跳過(guò) git 初始化
-f, --force 覆寫(xiě)目標(biāo)目錄可能存在的配置
-c, --clone 使用 git clone 獲取遠(yuǎn)程預(yù)設(shè)選項(xiàng)
-x, --proxy 使用指定的代理創(chuàng)建項(xiàng)目
-b, --bare 創(chuàng)建項(xiàng)目時(shí)省略默認(rèn)組件中的新手指導(dǎo)信息
-h, --help 輸出使用幫助信息
3.創(chuàng)建項(xiàng)目
去到指定目錄下創(chuàng)建項(xiàng)目（project-name：項(xiàng)目名稱）
vue create project-name
my-default 是 我原來(lái)保存好的模板；
default 是 使用默認(rèn)配置
Manually select features 是 自定義配置
4.選擇配置（自定義配置）
5.選擇css預(yù)編譯，這里我選擇less
Please pick a preset: Manually select features Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): SCSS/SASS > LESS Stylus
6.語(yǔ)法檢測(cè)工具，這里我選擇ESLint + Standard config
Please pick a preset: Manually select features Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus Pick a linter / formatter config: (Use arrow keys) ESLint with error prevention only ESLint + Airbnb config > ESLint + Standard config ESLint + Prettier
7.選擇語(yǔ)法檢查方式，這里我選擇保存就檢測(cè)
Please pick a preset: Manually select features Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus Pick a linter / formatter config: Prettier Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) >( ) Lint on save // 保存就檢測(cè) ( ) Lint and fix on commit // fix和commit時(shí)候檢查
8.接下來(lái)會(huì)問(wèn)你把babel,postcss,eslint這些配置文件放哪，這里隨便選，我選擇放在獨(dú)立文件夾
Please pick a preset: Manually select features Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus Pick a linter / formatter config: Prettier Pick additional lint features: Lint on save Pick a unit testing solution: Jest Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys) > In dedicated config files // 獨(dú)立文件放置 In package.json // 放package.json里
9.鍵入N不記錄，如果鍵入Y需要輸入保存名字，如第一步所看到的我保存的名字為my-default
Please pick a preset: Manually select features Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus Pick a linter / formatter config: Prettier Pick additional lint features: Lint on save Pick a unit testing solution: Jest Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files Save this as a preset for future projects? (Y/n) // 是否記錄一下以便下次繼續(xù)使用這套配置。
10.確定后，等待下載依賴模塊
11.項(xiàng)目創(chuàng)建好后
cd project-name // 進(jìn)入項(xiàng)目根目錄 run serve // 運(yùn)行項(xiàng)目
12.瀏覽器打開(kāi) http://localhost:8080
總結(jié)
以上所述是小編給大家介紹的vue-cli3.0 腳手架搭建項(xiàng)目的過(guò)程詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
下面小編就為大家分享一篇iview日期控件,雙向綁定日期格式的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
VUE2.0+Element-UI+Echarts封裝的組件實(shí)例
下面小編就為大家分享一篇VUE2.0+Element-UI+Echarts封裝的組件實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
Vue實(shí)現(xiàn)淘寶購(gòu)物車三級(jí)選中功能詳解
這篇文章主要介紹了通過(guò)Vue實(shí)現(xiàn)淘寶購(gòu)物車中三級(jí)選中的功能，文中的實(shí)現(xiàn)過(guò)程講解詳細(xì)，對(duì)我們學(xué)習(xí)Vue有一定的幫助，感興趣的可以了解一下2022-01-01
解決vue3項(xiàng)目打包發(fā)布到服務(wù)器后訪問(wèn)頁(yè)面顯示空白問(wèn)題
這篇文章主要介紹了解決vue3項(xiàng)目打包發(fā)布到服務(wù)器后訪問(wèn)頁(yè)面顯示空白問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
vue實(shí)現(xiàn)計(jì)數(shù)器簡(jiǎn)單制作
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)計(jì)數(shù)器簡(jiǎn)單制作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
Vue是可以自定義指令的,最近學(xué)習(xí)過(guò)程中遇見(jiàn)了一個(gè)需要懶加載的功能，發(fā)現(xiàn)網(wǎng)上這方面的資料較少，所以下面這篇文章主要給大家介紹了關(guān)于Vue.js如何實(shí)現(xiàn)路由懶加載的相關(guān)資料，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-08-08
Vue中代碼編輯器與實(shí)時(shí)預(yù)覽功能
CodeMirror提供了強(qiáng)大的代碼編輯功能,而Vue.js使得組件的創(chuàng)建和數(shù)據(jù)綁定變得非常簡(jiǎn)單,當(dāng)用戶編輯代碼時(shí),實(shí)時(shí)預(yù)覽會(huì)根據(jù)代碼的變化進(jìn)行更新,從而為用戶提供了一個(gè)交互式的編程環(huán)境,這篇文章主要介紹了Vue中如何進(jìn)行代碼編輯器與實(shí)時(shí)預(yù)覽,需要的朋友可以參考下2023-10-10
vue.js移動(dòng)端tab組件的封裝實(shí)踐實(shí)例
本篇文章主要介紹了vue.js移動(dòng)端tab的封裝實(shí)踐實(shí)例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
Vue3?響應(yīng)式高階用法之customRef()的使用
customRef()是Vue3的高級(jí)工具,允許開(kāi)發(fā)者創(chuàng)建具有復(fù)雜依賴跟蹤和自定義更新邏輯的ref對(duì)象,本文詳細(xì)介紹了customRef()的使用場(chǎng)景、基本用法、功能詳解以及最佳實(shí)踐,包括防抖、異步更新等用例,旨在幫助開(kāi)發(fā)者更好地理解和使用這一強(qiáng)大功能2024-09-09
這篇文章主要為大家詳細(xì)介紹了vue如何實(shí)現(xiàn)給特殊字段設(shè)置插槽,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以學(xué)習(xí)一下2023-09-09