Vue框架快速上手 前端環境準備 編碼工具：VSCode 依賴管理：NPM 項目構建：VueCli Vue框架介紹 Vue是一套用於構建用戶界面的漸進式框架。 Vue.js提供了MVVM數據綁定和一個可組合的組件系統，具有簡單、靈活的API。 其目標是通過儘可能簡單的API實現響應式的數據綁定和可組 ...
Vue框架快速上手
前端環境準備
- 編碼工具：VSCode
- 依賴管理：NPM
- 項目構建：VueCli
Vue框架介紹
- Vue是一套用於構建用戶界面的漸進式框架。
- Vue.js提供了MVVM數據綁定和一個可組合的組件系統，具有簡單、靈活的API。
- 其目標是通過儘可能簡單的API實現響應式的數據綁定和可組合的視圖組件。
MVVM模式
- MVVM是Model-View-ViewModel的縮寫，它是基於一種前端開發的架構模式，其核心是提供對View和ViewModel的雙向數據綁定。
- Vue提供了MVVM風格的雙向數據綁定，核心是MVVM中的VM，也就是ViewModel，ViewModel負責連接View和Model，保證視圖的和數據的一致性。
Vue項目構建
-
vue-cli安裝：
npm install -g @vue/cli //-g代表全局安裝 -
npm設置淘寶鏡像加速：
npm config set registry http://registry.npm.taobao.org/ //換成原來的 npm config set registry https://registry.npmjs.org/ -
創建vue項目：
vue create 項目名稱vue -
運行vue項目：
cd 項目名 npm run serve -
安裝element-ui插件：
npm i element-ui -s // i是install的縮寫，S表示同時把安裝的東西記錄到package.json（記錄依賴的json文件）中 -
element官方文檔地址：組件 | Element
必須先安裝vue-cli腳手架才能創建vue項目！
創建流程：
- 輸入vue create 項目名稱
-
選擇手動選擇功能
-
把Linter/Formatter取消掉，按空格鍵取消，然後回車進入下一步
-
選擇2.x版本，可以聯合element-ui
-
選擇相關的依賴可以記錄到package.json中
-
選擇對於剛纔的選擇要不要存一個快照，利用這個快照可以快速創建項目，這裡選擇不存，輸入N
-
創建項目到本地
Vue組件化開發
- 組件(Component)是Vue.js最強大的功能之一。組件可以擴展HTML元素，封裝可重用的代碼。
- Vue的組件系統允許我們使用小型、獨立和通常可復用的組件構建大型應用。
組件的構成
- Vue中規定組件的尾碼名為.vue
- 每個Vue組件都由3部分組成，分別是
- template，組件的模板結構，可以包含HTML標簽及其他的組件；
- script，組件的JavaScript代碼；
- style，組件的樣式
組件的使用
- 首先得要在script標簽中導入: import 組件名 from 路徑
- 導入之後還需要註冊，也是在script標簽中，把組件名稱寫到component中，例如：
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
-
然後在template標簽中就可以使用這個組件了
-
註意在Vue2.x版本中，在template標簽里所有的組件只能被包含在一個父標簽下，即多個組件只能放在一個根組件下，例如
<template>
<div>
<h1>hello</h1>
<h1></h1>
</div>
</template>
