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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/547155.html
標籤：其他
上一篇：記錄--一種更現代的深淺拷貝方法
下一篇：從TMS逆向到 WMTS