Vue-cli 3.0 是一個(gè)基於 Vue.js 的全新鷹架工具，它可以幫助我們快速創(chuàng)建一個(gè) Vue 專案並且提供了很多便捷的工具和配置。
下面我們就來(lái)一步一步介紹使用 Vue-cli 3.0 建立專案的步驟和流程。
安裝Vue-cli 3.0
首先需要全域安裝Vue-cli 3.0，可以透過(guò)npm 進(jìn)行安裝：
npm install -g @vue/cli
安裝完成後可以使用下列指令驗(yàn)證是否安裝成功：
vue -V
如果輸出了版本號(hào)，表示安裝成功。
建立一個(gè)Vue 專案
在命令列中執(zhí)行以下命令建立新的專案：
vue create my-project
其中"my-project" 即專案名稱，根據(jù)自己的需要進(jìn)行修改。
執(zhí)行指令後會(huì)出現(xiàn)一些專案設(shè)定選項(xiàng)，例如是否使用 Babel、是否使用 Vuex、是否使用 ESlint 等，視需要進(jìn)行選擇即可。如果不確定可以直接回車使用預(yù)設(shè)選項(xiàng)。
選擇完畢後會(huì)進(jìn)行專案安裝，可能需要一定的時(shí)間等待安裝完成。
運(yùn)行專案
專案安裝完成後，進(jìn)入專案資料夾內(nèi)使用以下命令進(jìn)行運(yùn)行：
cd my-project npm run serve
該命令會(huì)啟動(dòng)一個(gè)本機(jī)伺服器，可以透過(guò)瀏覽器訪問(wèn)http://localhost:8080 查看專案運(yùn)作效果。
專案目錄結(jié)構(gòu)
在使用Vue-cli 3.0 建立專案後，專案的目錄結(jié)構(gòu)如下：
|--node_modules // 存放項(xiàng)目運(yùn)行所需的模塊 |--public // 存放靜態(tài)資源文件 | |--favicon.ico // 網(wǎng)站圖標(biāo) | |--index.html // 網(wǎng)站入口文件 |--src // 存放項(xiàng)目源碼文件 | |--assets // 存放靜態(tài)資源文件 | |--components // 存放組件文件 | |--views // 存放頁(yè)面文件 | |--App.vue // 頁(yè)面入口文件 | |--main.js // 項(xiàng)目入口文件 |--.gitignore // Git 版本庫(kù)忽略文件列表 |--babel.config.js // Babel 配置文件 |--package.json // 項(xiàng)目配置文件 |--README.md // 項(xiàng)目說(shuō)明文件 |--vue.config.js // Vue 配置文件
其中，src 目錄下是專案的原始碼文件，public 目錄下是存放靜態(tài)資源的資料夾。 main.js 是專案的入口文件，App.vue 是頁(yè)面的入口文件。在 src 目錄下，assets 目錄存放的是靜態(tài)資源文件，例如圖片、樣式表等。在 src 目錄下，components 存放的是元件文件，views 目錄存放的是頁(yè)面檔案。
設(shè)定檔
在建立專案過(guò)程中，Vue-cli 3.0 同時(shí)也產(chǎn)生了一些預(yù)設(shè)的設(shè)定文件，它們都位於專案的根目錄下。其中，package.json 是專案的設(shè)定文件，它包含了專案所需的依賴、腳本命令等資訊的聲明。 babel.config.js 中包含了 Babel 的設(shè)定資訊。 vue.config.js 包含了 Vue 的設(shè)定資訊。
總結(jié)
Vue-cli 3.0 透過(guò)提供便利的工具和配置，讓我們?cè)诮?、開(kāi)發(fā)和維護(hù) Vue 專案時(shí)更有效率、更簡(jiǎn)單。以上就是使用 Vue-cli 3.0 建立 Vue 專案的步驟和流程，希望可以對(duì)大家有幫助。
以上是Vue-cli3.0鷹架建立Vue專案步驟與流程的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣圖片
Undresser.AI Undress
人工智慧驅(qū)動(dòng)的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費(fèi)的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門(mén)文章
熱工具
記事本++7.3.1
好用且免費(fèi)的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強(qiáng)大的PHP整合開(kāi)發(fā)環(huán)境
Dreamweaver CS6
視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具
SublimeText3 Mac版
神級(jí)程式碼編輯軟體(SublimeText3)
Vue-cli3.0鷹架建立Vue專案步驟與流程
Jun 09, 2023 pm 04:08 PM
Vue-cli3.0是一個(gè)基於Vue.js的全新鷹架工具，它可以幫助我們快速創(chuàng)建一個(gè)Vue專案並且提供了許多便捷的工具和配置。下面我們就來(lái)一步步驟介紹使用Vue-cli3.0建立專案的步驟和流程。安裝Vue-cli3.0首先需要全域安裝Vue-cli3.0，可以透過(guò)npm來(lái)安裝：npminstall-g@vue/cli安
Vue-cli腳手架的使用及其插件推薦
Jun 09, 2023 pm 04:11 PM
Vue-cli是Vue.js官方提供的搭建Vue專案的鷹架工具，透過(guò)使用Vue-cli可以快速搭建Vue專案的基本骨架，便於開(kāi)發(fā)人員將注意力集中在業(yè)務(wù)邏輯的實(shí)現(xiàn)上，而不用花費(fèi)大量時(shí)間來(lái)配置專案的基礎(chǔ)環(huán)境。本文將介紹Vue-cli的基本使用方法以及常用的插件推薦，旨在為初學(xué)者提供一份Vue-cli的使用指南。一、Vue-cli的基本使用方法安裝Vue-cli
ThinkPHP6鷹架使用指南：快速創(chuàng)建項(xiàng)目
Aug 12, 2023 am 10:00 AM
ThinkPHP6鷹架使用指南：快速創(chuàng)建專案引言：ThinkPHP是一款廣受歡迎的PHP開(kāi)發(fā)框架，它提供了豐富的功能和便利的開(kāi)發(fā)方式，使得我們可以更有效率地創(chuàng)建和開(kāi)發(fā)PHP專案。在最新的ThinkPHP6版本中，引入了腳手架工具，進(jìn)一步簡(jiǎn)化了專案的創(chuàng)建和配置流程，本文將為大家介紹如何使用ThinkPHP6腳手架快速創(chuàng)建專案。 I.安裝ThinkPHP6腳手
Vue-cli腳手架工具使用及專案設(shè)定說(shuō)明
Jun 09, 2023 pm 04:05 PM
Vue-cli腳手架工具使用及專案配置說(shuō)明隨著前端技術(shù)的不斷發(fā)展，前端框架也越來(lái)越受到開(kāi)發(fā)者的關(guān)注。 Vue.js作為前端框架的佼佼者，已被廣泛應(yīng)用於各種Web應(yīng)用的開(kāi)發(fā)中。 Vue-cli是Vue.js官方提供的一個(gè)基於命令列的腳手架，可以幫助開(kāi)發(fā)者快速初始化Vue.js專案結(jié)構(gòu)，讓我們能夠更專注於業(yè)務(wù)開(kāi)發(fā)。本文將介紹Vue-cli的安裝和
Vue 中 Vue-cli 的詳細(xì)使用方法指南
Jun 26, 2023 am 08:03 AM
Vue是一種流行的前端框架，它的靈活性和易用性受到了許多開(kāi)發(fā)者的青睞。為了更好的開(kāi)發(fā)Vue應(yīng)用程序，Vue團(tuán)隊(duì)開(kāi)發(fā)了一個(gè)強(qiáng)大的工具-Vue-cli，使得開(kāi)發(fā)Vue應(yīng)用程式變得更加容易。本文將為您詳細(xì)介紹Vue-cli的使用方法。一、安裝Vue-cli使用Vue-cli之前，需要先安裝它。首先，您需要確保已經(jīng)安裝了Node.js。然後，使用npm安裝Vue-c
Vue-cli中使用ESLint進(jìn)行程式碼規(guī)範(fàn)化和bug偵測(cè)
Jun 09, 2023 pm 04:13 PM
隨著前端技術(shù)的不斷發(fā)展，我們面臨的問(wèn)題也逐漸複雜了起來(lái)，不僅要求我們的程式碼結(jié)構(gòu)合理、模組化設(shè)計(jì)良好，更需要程式碼的可維護(hù)性和執(zhí)行效率。在這個(gè)過(guò)程中，如何保證程式碼的品質(zhì)和規(guī)範(fàn)性成為了一個(gè)難題。萬(wàn)幸的是，程式碼規(guī)範(fàn)化和bug檢測(cè)工具的出現(xiàn)，為我們提供了有效的解決方案。而在Vue.js框架中使用ESLint進(jìn)行程式碼規(guī)範(fàn)化和bug偵測(cè)已成為一種普遍選擇。一、ESLint
nginx怎麼部署存取vue-cli搭建的項(xiàng)目
May 15, 2023 pm 10:25 PM
具體做法如下：1、建立後臺(tái)伺服器物件upstreammixVueServer{serverbaidu.com;#這裡是自己伺服器網(wǎng)域}2、建立存取埠和反向代理程式規(guī)則server{listen8082;server_namelocalhost;location/{rootE:/mix_vue/dist;#定位到專案的目錄#indexindex.htmlindex.htm;try_files$uri$uri//index.html;#依照官網(wǎng)這規(guī)則配置}location~\.php${proxy_p
建構(gòu)vue-cli工程用到哪些技術(shù)
Jul 25, 2022 pm 04:53 PM
用到的技術(shù)：1、vue.js，vue-cli工程的核心，主要特點(diǎn)是雙向資料綁定和元件系統(tǒng)；2、vue-router，路由框架；3、vuex，vue應(yīng)用專案開(kāi)發(fā)的狀態(tài)管理器；4、axios，用於發(fā)起GET、或POST等http請(qǐng)求；5、vux，專為vue設(shè)計(jì)的行動(dòng)端UI元件庫(kù)；6、emit.js，用於vue事件機(jī)制的管理；7、webpack，模組載入和vue-cli工程打包器。
