詳解使用vue-cli腳手架初始化Vue專案下的專案結構

這篇文章主要介紹了詳解使用vue-cli腳手架初始化Vue專案下的專案架構，現在分享給大家，也給大家做個參考。

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

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

1. vue-cli是一套成熟的Vue專案架構設計，會跟著Vue版本的更迭而更新 

2. vue-cli提供了一套本地的熱載入的測試伺服器 

3. vue-cli整合了一套打包上線的方案，可使用webpack或Browserify等建置工具

安裝

#下面來安裝vue-cli

# 必须全局安装vue-cli，否则无法使用vue命令
# 安装完成之后使用vue -V检查vue-cli是否安装成功及版本信息

$ npm install -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替換，因此不建議直接掛載實例到

100db36a723c770d327fc0aef2ce13b1 或6c04bd5ca3fcae76e30b72ad730ca86d 上。

[main.js]

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

'el'選項：提供一個在頁面上已存在的DOM元素作為Vue實例的掛載目標，這裡就是index.html中id為'app'的節點

'router'選項：將router實例注入到Vue根實例中，使它的每個子元件都可以存取$router (router實例)和$route (目前啟動的路由資訊物件)

'template'選項：以字串範本作為Vue 實例的識別使用

'components'：根元件

[App.vue]

專案的根元件，可以包含其他的子元件，從而組成元件樹

d477f9ce7bf77f53fbcf36bec1b69b7a21c97d3a051048b8e55e3c8f199a54b2只能包含一個子節點，也就是說頂層的p只能有一個（如圖，id為'app'的p元素沒有兄弟節點）

3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0通常用es6來寫，用export default導出

c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927中的樣式預設是影響全域的，如需定義作用域只在該元件下作用，需在標籤上加上scoped，30e8033e360bcffb1ce9b4703e10b64c531ac245ce3e4fe3d50054a55f265927

[router/index.js]

#路由設定文件，作用是將元件對應到路由，方便知道在哪裡渲染它們

 

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

解決Vue 透過下表修改數組,頁面不渲染的問題

vue2.0 axios跨域並渲染的問題解決方法

layui之select的option疊加問題的解決方法

以上是詳解使用vue-cli腳手架初始化Vue專案下的專案結構的詳細內容。更多資訊請關注PHP中文網其他相關文章！