快捷導(dǎo)航

詳解使用vue-cli腳手架初始化Vue項(xiàng)目下的項(xiàng)目結(jié)構(gòu)

更新時(shí)間：2018年03月08日 09:21:29 作者：沉江、小魚(yú)

這篇文章主要介紹了詳解使用vue-cli腳手架初始化Vue項(xiàng)目下的項(xiàng)目結(jié)構(gòu)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

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

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

vue-cli是一套成熟的Vue項(xiàng)目架構(gòu)設(shè)計(jì)，會(huì)跟著Vue版本的更迭而更新
vue-cli提供了一套本地的熱加載的測(cè)試服務(wù)器
vue-cli集成了一套打包上線的方案，可使用webpack或Browserify等構(gòu)建工具

安裝

下面來(lái)安裝vue-cli

# 必須全局安裝vue-cli，否則無(wú)法使用vue命令
# 安裝完成之后使用vue -V檢查vue-cli是否安裝成功及版本信息

$ npm install -g vue-cli
$ vue -V

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

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

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

$ 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)容都通過(guò)vue組件來(lái)填充，由于所有的掛載元素會(huì)被Vue生成的DOM替換，因此不推薦直接掛載實(shí)例到 <html> 或者 <body> 上。