vue-cli3.0 腳手架搭建項(xiàng)目的過程詳解
1.安裝vue-cli 3.0
npm install -g @vue/cli # or yarn global add @vue/cli
安裝成功后查看版本：vue -V(大寫的V)
2.命令變化
vue create --help
用法：create [options] <app-name>
創(chuàng)建一個由 `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> 在安裝依賴時使用指定的 npm 客戶端
-r, --registry <url> 在安裝依賴時使用指定的 npm registry (僅用于 npm 客戶端)
-g, --git [message] 強(qiáng)制 / 跳過 git 初始化，并可選的指定初始化提交信息
-n, --no-git 跳過 git 初始化
-f, --force 覆寫目標(biāo)目錄可能存在的配置
-c, --clone 使用 git clone 獲取遠(yuǎn)程預(yù)設(shè)選項(xiàng)
-x, --proxy 使用指定的代理創(chuàng)建項(xiàng)目
-b, --bare 創(chuàng)建項(xiàng)目時省略默認(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 是 我原來保存好的模板；
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.語法檢測工具，這里我選擇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.選擇語法檢查方式，這里我選擇保存就檢測
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 // 保存就檢測 ( ) Lint and fix on commit // fix和commit時候檢查
8.接下來會問你把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.瀏覽器打開 http://localhost:8080
總結(jié)
以上所述是小編給大家介紹的vue-cli3.0 腳手架搭建項(xiàng)目的過程詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
vue項(xiàng)目使用定時器每隔幾秒運(yùn)行一次某方法代碼實(shí)例
有時候在項(xiàng)目中我們經(jīng)常需要設(shè)置簡單的倒計時功能,這個可以通過定時器來實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目使用定時器每隔幾秒運(yùn)行一次某方法的相關(guān)資料,需要的朋友可以參考下2023-04-04
vue 父組件獲取子組件里面的data數(shù)據(jù)(實(shí)現(xiàn)步驟)
在Vue中,父組件可以通過`ref`引用子組件,并通過`$refs`屬性來訪問子組件的數(shù)據(jù),下面分步驟給大家介紹vue 父組件獲取子組件里面的data數(shù)據(jù),感興趣的朋友一起看看吧2024-06-06
vue等兩個接口都返回結(jié)果再執(zhí)行下一步的實(shí)例
這篇文章主要介紹了vue等兩個接口都返回結(jié)果再執(zhí)行下一步的實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)九宮格圖片展示模塊，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了vue 實(shí)現(xiàn)無規(guī)則截圖的方法，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04
這篇文章主要介紹了Vue如何獲取元素高度總是不準(zhǔn)確的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家詳細(xì)介紹了vue自定義全局組件實(shí)現(xiàn)彈框案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
Vuex子模塊調(diào)用子模塊的actions或mutations實(shí)現(xiàn)方式
這篇文章主要介紹了Vuex子模塊調(diào)用子模塊的actions或mutations實(shí)現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue3實(shí)現(xiàn)動態(tài)路由與手動導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了如何在?Vue?3?中實(shí)現(xiàn)動態(tài)路由注冊和手動導(dǎo)航,確保用戶訪問的頁面與權(quán)限對應(yīng),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-12-12
Vuejs 頁面的區(qū)域化與組件封裝的實(shí)現(xiàn)
本篇文章主要介紹了Vuejs 頁面的區(qū)域化與組件封裝的實(shí)現(xiàn)。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09