溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關(guān)如何使用vue-cli腳手架初始化Vue項(xiàng)目下的項(xiàng)目結(jié)構(gòu)的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
vue-cli是Vue 提供的一個官方命令行工具，可用于快速搭建大型單頁應(yīng)用。該工具提供開箱即用的構(gòu)建工具配置，帶來現(xiàn)代化的前端開發(fā)流程。只需幾分鐘即可創(chuàng)建并啟動一個帶熱重載、保存時(shí)靜態(tài)檢查以及可用于生產(chǎn)環(huán)境的構(gòu)建配置的項(xiàng)目。
使用vue-cli有以下幾大優(yōu)勢：
vue-cli是一套成熟的Vue項(xiàng)目架構(gòu)設(shè)計(jì)，會跟著Vue版本的更迭而更新
vue-cli提供了一套本地的熱加載的測試服務(wù)器
vue-cli集成了一套打包上線的方案，可使用webpack或Browserify等構(gòu)建工具
安裝
下面來安裝vue-cli
# 必須全局安裝vue-cli，否則無法使用vue命令 # 安裝完成之后使用vue -V檢查vue-cli是否安裝成功及版本信息 $ npm install -g vue-cli $ vue -V
創(chuàng)建項(xiàng)目
接下來使用vue-cli創(chuàng)建一個新的Vue項(xiàng)目
# 項(xiàng)目創(chuàng)建完之后需要執(zhí)行npm install安裝依賴 $ vue init webpack vuedemo $ npm install
創(chuàng)建的vuedemo文件夾所包含的文件如下：
[index.html]
index.html和其他html文件一樣，但一般只定義一個空的根節(jié)點(diǎn)，在main.js里面定義的實(shí)例將掛載在根節(jié)點(diǎn)下，內(nèi)容都通過vue組件來填充，由于所有的掛載元素會被Vue生成的DOM替換，因此不推薦直接掛載實(shí)例到 <html> 或者 <body> 上。
[main.js]
是Vue應(yīng)用的入口文件，用來創(chuàng)建一個新的Vue實(shí)例，并將這個實(shí)例掛載在根節(jié)點(diǎn)下，同時(shí)也可以用來引入Vue插件
‘el'選項(xiàng)：提供一個在頁面上已存在的DOM元素作為Vue實(shí)例的掛載目標(biāo)，這里就是index.html中id為‘a(chǎn)pp'的節(jié)點(diǎn)
‘router'選項(xiàng)：將router實(shí)例注入到Vue根實(shí)例中，使它的每個子組件都可以訪問$router (router實(shí)例)和$route (當(dāng)前激活的路由信息對象)
‘template'選項(xiàng)：以一個字符串模板作為 Vue 實(shí)例的標(biāo)識使用
‘components'：根組件
[App.vue]
項(xiàng)目的根組件，可以包含其他的子組件，從而組成組件樹
<template></template>只能包含一個子節(jié)點(diǎn)，也就是說頂層的div只能有一個（如圖，id為‘a(chǎn)pp'的div元素沒有兄弟節(jié)點(diǎn)）
<script></script>通常用es6來寫，用export default導(dǎo)出
<style></style>中的樣式默認(rèn)是影響全局的，如需定義作用域只在該組件下起作用，需在標(biāo)簽上加scoped，<style scoped></style>
[router/index.js]
路由配置文件，作用是將組件映射到路由，方便知道在哪里渲染它們
感謝各位的閱讀！關(guān)于“如何使用vue-cli腳手架初始化Vue項(xiàng)目下的項(xiàng)目結(jié)構(gòu)”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼
