一，vue的簡單介紹
1. vue的官網地址 - https://cn.vuejs.org
2. 什麼是vue？
vue是一套用於構建數據驅動用戶界面的漸進式框架(js庫)。Vue是建立於 Angular和React的基礎之上，基於MVVM設計模式,保留了Angular和React的優點並添加了自己的獨特成分，讓框架的使用變得更加簡單。
3. vue的特點：
輕量：Vue庫的體積非常小的，並且不依賴其他基礎庫。
數據綁定：對於一些富交互、狀態機類似的前端UI界面，數據綁定非常簡單、方便。
指令：內置指令統一爲(v—*)，也可以自定義指令，通過對應表達值的變化就可以修改對應的DOM。
插件化：Vue.js核心不包含Router、AJAX、表單驗證等功能，但是可以非常方便地根據需要加載對應插件。
組件化：組件可以擴展 HTML 元素，封裝可重用的代碼。允許我們使用小型、自包含和通常可複用的組件構建大型應用
二，腳手架搭建項目
基於node環境
1.全局安裝腳手架 - yarn global add @vue/cli / npm i @vue/cli -g
卸載命令- npm uninstall -g @vue/cli
2.檢查是否安裝完成 (查看版本號)- vue --version
3.進行項目創建- vue create 項目名 (注意項目名不能大寫)
4.進入項目- cd 項目名
5.項目啓動 - yarn serve
vue項目的目錄頁具體詳解
node_modules // 依賴的第三方模塊
public // vue服務器靜態文件目錄，只有唯一的一個index.html
src // 我們的開發目錄，最重要的目錄，源文件（我們寫的代碼）目錄
二級目錄
assets // 靜態資源 css img font
components // 組件,是.vue的文件,主要是公用的小組件
views // 頁面級別的組件
App.vue // 整個應用的頂級組件.
main.js // 入口文件
.gitignore // git忽略列表
babel.config.js // es6編譯配置
package-lock.json // 包描述文件（記錄更詳細，記住當時的版本信息）
package.json // 包描述文件
README.md // 說明文檔
三，組件
1.單文件組件
理解： 都是以vue結尾的文件
組成： 三部分
<template>
<div></div>//所有標籤只能有一個父級標籤
</template>
<script>
//默認暴露對象
export default{}
</script>
<style lang="less" scoped>
//scoped - 樣式只能在當前文件使用 -局部作用域
</style>
2.單文件的使用
(1)引入組件 import 組件名 from '組件路徑'
(2)註冊子組件
export default {
components:{
組件名,
組件名
}
}
(3)使用： <組件名/>
template>
<div id="app">
<Hello>用子</Hello>
</div>
</template>
<script>
//引子
import Hello from './components/Hello.vue'
export default {
components: {
Hello //注子
}
}
</script>