首頁  >  文章  >  web前端  >  vue-cli腳手架初始化如何使用

vue-cli腳手架初始化如何使用

php中世界最好的语言
php中世界最好的语言原創
2018-03-28 14:59:011624瀏覽

這次帶給大家vue-cli腳手架初始化如何使用,使用vue-cli腳手架的注意事項有哪些,以下就是實戰案例,一起來看一下。

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取代,因此不建議直接掛載實例到<html> <body> 上。

[main.js]

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

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

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

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

' components':根元件

[App.vue]

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

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

<script></script>通常用es6來寫,用export default導出

中的樣式預設是影響全域的,如需定義作用域只在該組件下起作用,需在標籤上加上scoped,

[router/index.js]

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

 

##相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

vue.js中$set怎樣給陣列更新

基於webpack怎麼進行程式碼拆分
#

以上是vue-cli腳手架初始化如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn