首頁 > 開發者 > JavaScript
詳解使用vue-cli腳手架初始化Vue項目下的項目結構，vue-clivue
vue-cli是Vue 提供的一個官方命令列工具，可用於快速搭建大型單頁應用。該工具提供開箱即用的構建工具配置，帶來現代化的前端開發流程。只需幾分鐘即可建立並啟動一個帶熱重載、儲存時靜態檢查以及可用於生產環境的構建配置的項目。
使用vue-cli有以下幾大優勢：
安裝
下面來安裝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]
項目的根組件，可以包含其他的子組件，從而組成組件樹
<template></template>只能包含一個子節點，也就是說頂層的div只能有一個（，id為‘app'的div元素沒有兄弟節點）
<script></script>通常用es6來寫，用export default匯出
<style></style>中的樣式預設是影響全域的，如需定義範圍只在該組件下起作用，需在標籤上加scoped，<style scoped></style>
[router/index.js]
路由設定檔，作用是將組件映射到路由，方便知道在哪裡渲染它們
以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
