腳本之家服務器常用軟件

快捷導航

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

更新時間：2018年03月08日 09:21:29 作者：沉江、小魚

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

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

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

安裝

下面來安裝vue-cli

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

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

創(chuàng)建項目

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

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

$ vue init webpack vuedemo
$ npm install

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

[index.html]

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

[main.js]

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

‘el'選項：提供一個在頁面上已存在的DOM元素作為Vue實例的掛載目標，這里就是index.html中id為‘a(chǎn)pp'的節(jié)點

‘router'選項：將router實例注入到Vue根實例中，使它的每個子組件都可以訪問$router (router實例)和$route (當前激活的路由信息對象)

‘template'選項：以一個字符串模板作為 Vue 實例的標識使用

‘components'：根組件

[App.vue]

項目的根組件，可以包含其他的子組件，從而組成組件樹

<template></template>只能包含一個子節(jié)點，也就是說頂層的div只能有一個（如圖，id為‘a(chǎn)pp'的div元素沒有兄弟節(jié)點）

[router/index.js]

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线