小編給大家分享一下淺談vue-cli初始化Vue項(xiàng)目的項(xiàng)目結(jié)構(gòu)，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊(cè)、虛擬空間、營銷軟件、網(wǎng)站建設(shè)、新樂網(wǎng)站維護(hù)、網(wǎng)站推廣。

概述

vue-cli是Vue 提供的一個(gè)官方命令行工具，可用于快速搭建大型單頁應(yīng)用。該工具提供開箱即用的構(gòu)建工具配置，帶來現(xiàn)代化的前端開發(fā)流程。只需幾分鐘即可創(chuàng)建并啟動(dòng)一個(gè)帶熱重載、保存時(shí)靜態(tài)檢查以及可用于生產(chǎn)環(huán)境的構(gòu)建配置的項(xiàng)目。

使用vue-cli有以下幾大優(yōu)勢(shì)：

1. vue-cli是一套成熟的Vue項(xiàng)目架構(gòu)設(shè)計(jì)，會(huì)跟著Vue版本的更迭而更新

2. vue-cli提供了一套本地的熱加載的測(cè)試服務(wù)器

3. vue-cli集成了一套打包上線的方案，可使用webpack或Browserify等構(gòu)建工具

安裝

下面來安裝vue-cli

# 必須全局安裝vue--g vue-cli
$ vue -V

創(chuàng)建項(xiàng)目

接下來使用vue-cli創(chuàng)建一個(gè)新的Vue項(xiàng)目

# 項(xiàng)目創(chuàng)建完之后需要執(zhí)行npm install安裝依賴

$ vue init webpack vuedemo$ npm install

創(chuàng)建的vuedemo文件夾所包含的文件如下：

[index.html]

index.html和其他html文件一樣，但一般只定義一個(gè)空的根節(jié)點(diǎn)，在main.js里面定義的實(shí)例將掛載在根節(jié)點(diǎn)下，內(nèi)容都通過vue組件來填充，由于所有的掛載元素會(huì)被Vue生成的DOM替換，因此不推薦直接掛載實(shí)例到或者上。

[main.js]

是Vue應(yīng)用的入口文件，用來創(chuàng)建一個(gè)新的Vue實(shí)例，并將這個(gè)實(shí)例掛載在根節(jié)點(diǎn)下，同時(shí)也可以用來引入Vue插件

‘el’選項(xiàng)：提供一個(gè)在頁面上已存在的DOM元素作為Vue實(shí)例的掛載目標(biāo)，這里就是index.html中id為 ‘a(chǎn)pp’ 的節(jié)點(diǎn)

‘router’選項(xiàng)：將router實(shí)例注入到Vue根實(shí)例中，使它的每個(gè)子組件都可以訪問$router (router實(shí)例)和$route (當(dāng)前激活的路由信息對(duì)象)

‘template’選項(xiàng)：以一個(gè)字符串模板作為Vue實(shí)例的標(biāo)識(shí)使用。它會(huì)替換掛載的元素，也就是用這個(gè)組件替換 ’el‘ 選項(xiàng)指定的id為 ’app‘ 的節(jié)點(diǎn)

‘components’：局部注冊(cè)組件，在前面通過import引入的是的選項(xiàng)對(duì)象，只要有了選項(xiàng)對(duì)象，就可以在這里將它注冊(cè)為一個(gè)Vue實(shí)例

[App.vue]

項(xiàng)目的根組件，可以包含其他的子組件，從而組成組件樹，由于使用了vue-loader，它會(huì)將這個(gè)格式編寫的單文件 Vue 組件轉(zhuǎn)換為 JavaScript 模塊

只能包含一個(gè)子節(jié)點(diǎn)，也就是說頂層的p只能有一個(gè)（如圖，id為‘a(chǎn)pp’的p元素沒有兄弟節(jié)點(diǎn)），內(nèi)容將被提取為字符串，將編譯并用作 Vue 組件的 template選項(xiàng)

通常用es6來寫，用export default導(dǎo)出

中的樣式默認(rèn)是影響全局的，如需定義作用域只在該組件下起作用，需在標(biāo)簽上加scoped屬性，

[router/index.js]

路由配置文件，作用是將組件映射到路由，方便知道在哪里渲染它們

運(yùn)行項(xiàng)目

接下來，輸入下列命令運(yùn)行項(xiàng)目

$ npm run dev

意思是運(yùn)行package.json中"script"腳本下的dev指代的程序，即：

項(xiàng)目部署

最后，輸入下列命令部署項(xiàng)目

$ npm run build

生成的dist目錄，就是打包構(gòu)建后的項(xiàng)目目錄

以上是“淺談vue-cli初始化Vue項(xiàng)目的項(xiàng)目結(jié)構(gòu)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁標(biāo)題：淺談vue-cli初始化Vue項(xiàng)目的項(xiàng)目結(jié)構(gòu)-創(chuàng)新互聯(lián)
路徑分享：http://weahome.cn/article/csgcjs.html