一、vue ui 元件
1: vue 當前很火前端框架vue 針對pc使用者
pc 端與移動端區別
(1)螢幕寬度:992px >
(2)操作方式:滑鼠 事件 手指:觸碰操作
-餓了麼:基於vue框架開發移動端元件庫 mint-ui
-mui :開源團隊 mui
-滴滴:
2: vue ui 元件mint-ui安裝與使用
配置 複雜配置
3: vue ui 元件mint-ui元件分類
-css components 元件
-js components 元件
-form components 元件
4: vue ui 元件mint-ui元件 toast 提示框
#html載入檔案順序先載入vue.js 再加mint.js
this.$toast("提示訊息");
this.$toast({})
message
提示性文字
postion
top;middle;bottom
duration
持續時間(毫秒) -1 不消失
classname
新增樣式名稱
close()
(關閉) 刪除提示訊息物件
4: vue ui 元件mint-ui元件 lazyload
#懶載入顯示樣式
img[lazy=loading]
5: vue ui 元件mint-ui元件 輪播圖
#注意:mint-ui 元件輪播圖預設高度0
6:vue cli 腳手架--學子**(vue ui版本)
6.1:完成學子**
(後端程式):node.js 伺服器 mysql資料庫
伺服器程式
node.js 非常高效 跑車
apache 穩定 家用轎車
nginx 高效 高檔家轎車
mysql 關係型開源免費資料庫 (網際網路產品)
redis 非關係型資料庫 (併發量高)
(前端程式):vue-cli 腳手架
6.3:完成學子**--vue cli 腳手架
專案為什麼用腳手架
(1)前端專案太複雜
(2)腳手架管理維護專案第三方庫
(3)熱部署
-src: 你建立程式目錄
main.js 入口檔案
作用:負責載入此次專案使用模組
負責配置模組
負責建立vue 例項物件
router.js 路由模組
作用:引入不同元件並且配置元件
訪問路徑
components 專案中開發元件
lib/mui/css mui庫使用樣式
/fonts 字型圖示
/js mui庫js
-node_modules 第三方模組
axios vue 傳送ajax請求第三方模組
mint-ui mint-ui 元件庫
#安裝第三方模板npm i 庫名稱;
-package.json 專案描述檔案和配置檔案
配置啟動腳手架命令 server
配置啟動腳手架埠號 8080
-啟動專案 npm run serve
#常規開發元件簡單工作流程
(1)需要哪些第三方元件在 main.js 載入配置
(2)在components目錄下建立你的元件
(3)在router.js 配置訪問路徑
6.4:完成學子**--vue cli 腳手架-建立測試元件
-main.js 載入需要第三方模組
-在components 建立自定義元件 exam01.vue
顯示資料與格式
完成業務功能
外觀樣式
-在router.js 配置如果訪問元件(訪問路徑)
引入元件
import 元件物件名稱 from "./components/exam01.vue"
配置元件訪問路徑
#注意:訪問路徑加 /
-訪問元件
元件訪問路徑 回車
練習:建立元件 list.vue
-顯示data中定義使用者列表資訊
-編號;名稱;位址 三個物件儲存陣列
常見錯誤:
(1)建立元件模板
- failed to compile 編譯出錯 標籤出錯
...-建立元件沒有顯示 元件訪問路徑缺少 /
-腳手架啟動失敗
npm err! code enoent
npm err! errno -4058
npm err! syscall open
原因:啟動腳手架位置不正確
原因:腳手架內容損壞
(1)package.json
- router.js 配置路徑出錯
* ./components/list01.vue in ./src/router.js
Vue ui常用元件庫整理
檢視全部整理內容 element 是由餓了麼ued設計 餓了麼大前端開發的一套基於 vue 2.0 的桌面端元件庫。這款是我用了很久的，比較適合開發後台管理系統，官方更新和維護也很負責，元件也能滿足大部分開發需求 文件官網 github 適合移動端 專案主頁 繼element之後嘗試的元件庫，個人感...
優秀的Vue UI元件庫推薦
可以注意下quasar，quasar功能比較全，下次用的話試下這個，bootstrap vue也同樣可以注意下 vue ui庫省了我們把元件封裝成vue元件的過程 當然也省了我找元件和調元件的過程 所以蠻可以節約開發效率16款優秀的vue ui元件庫推薦 vue 是乙個輕巧 高效能 可元件化的mvv...
16款優秀的Vue UI元件庫推薦
vue 是乙個輕巧 高效能 可元件化的mvvm庫，api簡潔明瞭，上手快。從vue推出以來，得到眾多web開發者的認可。在公司的web前端專案開發中，多個專案採用基於vue的ui元件框架開發，並投入正式使用。開發團隊在使用vue.js框架和ui元件庫以後，開發效率大大提高，自己寫的 也少了，很多介面...