淺談vue-cli初始化Vue專案的專案結構

概述

vue-cli是Vue 提供的官方命令列工具，可用來快速建立大型單頁應用。該工具提供開箱即用的建置工具配置，帶來現代化的前端開發流程。只需幾分鐘即可建立並啟動一個具有熱重載、保存時靜態檢查以及可用於生產環境的建置配置的專案。

使用vue-cli有以下幾大優點：

1.   vue-cli是一套成熟的Vue專案架構設計，會跟著Vue版本的更迭而更新
2. #  vue-cli提供了一套本地的熱加載的測試伺服器
3.   vue-cli整合了一套打包上線的方案，可使用webpack或Browserify等建構工具

#安裝

　　下面來安裝vue-cli

# 必须全局安装vue--g vue-cli
$ vue -V

建立專案

#　　接下來使用vue-cli建立一個新的Vue專案

# 项目创建完之后需要执行npm install安装依赖

$ vue init webpack vuedemo$ npm install

　　所建立的vuedemo資料夾所包含的檔案如下：

#[index.html]

　　index.html和其他html檔案一樣，但一般只定義一個空的根節點，在main.js裡面定義的實例將掛載在根節點下，內容都會透過vue元件來填充，由於所有的掛載元素會被Vue產生的DOM取代，因此不建議直接掛載實例到或 上。

[main.js]

#　　是Vue應用的入口文件，用來建立一個新的Vue實例，並將這個實例掛載在根節點下，同時也可以用來引入Vue外掛程式