VUE_UI.UI组件和CLI脚手架

最新推荐文章于 2021-12-18 15:31:25 发布

原创最新推荐文章于 2021-12-18 15:31:25 发布 · 640 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#UI组件 #脚手架

Web前端基础知识同时被 2 个专栏收录

49 篇文章

订阅专栏

vue

9 篇文章

订阅专栏

本文介绍如何使用VUE框架与Mint-UI组件库进行移动端开发，包括安装配置、组件使用、轮播图、懒加载等功能实现，以及跨域访问、参数传递等高级技巧。

1 vue ui 组件

pc端与移动端区别：屏幕宽度992px、操作方式
基于VUE框架开发移动端组件库Mint-UI、MUI(dev.dcloud.cn/mui/)

1.1 mint-ui安装与使用

1）学习环境下载mint-ui js/css/font
2）生产环境下载安装(脚手架)npm i mint-ui

1.2 mint-ui组件分类

1）-css Components；
2）-js Components；
3）-Form Components；

1.3 mint-ui组件

1.3.1 Toast提示框

下载mint-ui js，mint css，vue.js
html先加载vue.js文件再加载mint.js
this.$toast(""); 或者 this.$toast({})

变量	值
message	提示性文字
position	top;middle;bottom
duration	持续时间ms，-1不消失
className	样式
close()	删除提示消息对象

1.3.2 lazyLoad懒加载

<img v-lazy=“x.png”>
显示样式img[lazy=loading]{}

1.3.3 mt-swipe轮播图

 <mt-swipe :auto="4000" :show-indicators="true">
  <mt-swipe-item>
     <img src="x.jpg" />
  </mt-swipe-item>
 </mt-swipe>

mint-ui组件轮播图默认高度为0，设置父元素高度

2 vue cli 脚手架

使用脚手架来完成复杂的前端项目、管理维护项目第三方库、热部署(保存的文件自动部署到服务器)

2.1 文件目录功能

src目录中：
main.js是入口文件，负责加载并配置项目使用的模块，同时创建Vue实例对象；
router.js是路由模块，引入不同组件并配置其访问路径；
App.vue根组件；
components是项目中开发的组件；
lib/mui/css(fonts/js)分别代表mui库使用样式、字体图标、mui库js

node_modules第三方模块目录中：
axios是vue发送ajax请求的第三方模块；
mint-ui是mint-ui 组件库
安装第三方模块的方法：npm i 库名称

package.json项目描述和配置文件：
根据scripts配置启动命令和端口号
npm run serve

2.2 开发流程

常规开发组件工作流程
(1)明确需要在 main.js 加载配置的第三方组件
(2)在components目录下创建组件

   <template></template>  显示数据与格式
   <script></script>        完成业务功能 
   <style></style>          外观样式

默认情况下，v-for生成时，vue对数据进行排序操作，需要指定属性:key=“item.id”，id不能重复
(3)在router.js 配置访问路径
引入组件
import 组件对象名称 from “./components/Exam01.vue”
配置组件访问路径
{path:"/访问路径",component:组件对象名称}
访问组件：http://127.0.0.1:8080/#组件访问路径

3 开发实例

3.1 Home-创建空组件

(1)创建空组件
src/components/tabbar/Home.vue
(2)配置访问路径 /Home
(3)测试 http://127.0.0.1:8080/#/Home
-顶部导航栏–mint-ui组件

3.2 Home-顶部导航条

mint-ui库创建顶部导航条
(1)下载mint-ui库到当前脚手架
npm i mint-ui
#如果下载成功 node_modules/mint-ui
(2)将mint-ui Header 组件引入脚手架 main.js
import {Header} from “mint-ui”
(3)将mint-ui Header 将Header 组件Vue实例对象main.js
Vue.component(组件标签名称,组件对象);
示例:
Vue.component(Header.name,Header);
(4)在指定组件Home.vue 使用Header
<mt-header title=“学子商城”>

3.3 Home-轮播

(1)下载不用
(2)引入组件
import {Header,Swipe,SwipeItem} from “mint-ui”
(3)注册组件
Vue.component(Swipe.name,Swipe);
Vue.component(SwipeItem.name,SwipeItem);
(4)在Home组件使用轮播

   <mt-swipe>
     <mt-swipe-item>
       <img src="" />
     </mt-swipe-item>
   </mt-swipe>

4 第三方组件库 mui

mui 库示例mui-master\examples\hello-mui\examples
mint-ui组件库基于vue框架
mui不是基于vue框架只是css/js文件
(1)官方网站下载安装包
(2)copy css js fonts[字体图标] src/lib/mui/…
(3)使用css文件 main.js再直接 import 引入任何组件即可以使用
引入 mui库样式文件
import ‘./lib/mui/css/mui.css’
import ‘./lib/mui/css/icons-extra.css’

4.1 九宫格 grid-default.html

图片大小-(重点)
前端设计(PS) 项目所有外观结果ps效果图
-物理像素:设计效果图片中像素 120px
-逻辑像素:程序中使用像素 60px
#智能手机:iphone4 技术参数标准
#iphone6 逻辑像素物理像素 2x dpr
#iphone6 plus 3x

4.2 底部导航条

mui 组件库中有 tabbar.html

4.3 轮播图

(1)图片保存服务器端文件夹 public/img/…
图片保存路径放在数据库中
http://127.0.0.1:3000/img/banner1.png
图片多;安全
(2)创建服务器
//服务器项目目录
vue_server
public/img/轮播图图片
pool.js 连接池
db.sql 数据库创建表脚手架
app.js 主程序
(3)通过脚手架使用ajax获取服务器端图片列表
axios 第三方组件与vue 关系
-下载 npm i axios
-main.js 引入axios 库
import axios from “axios”
-main.js 配置axios 库跨域访问保存session值
axios.defaults.withCredentials=true
-main.js 将axios 库配置Vue
Vue.prototype.axios = axios
-Home.vue
this.axios.get(url).then(result=>{ })

4.4 跨域访问

三种不同跨域访问方式
-访问域名不同 a.com/1.js -> b.com/2.js
-访问端口不同 a.com:8080/1.js ->a.com:3000/2.js
-访问协议不http://127.0.0.1/1.js https://127.0.0.1/2.js
解决跨域访问
-jsop 填充式json
-在服务器端程序配置允许那个域名下程序访问
nodejs 下载模块 cors
npm i cors
-在主程序 app.js

  const cors = require("cors"); #引入模块
  app.use(cors({     #允许那个域名程序跨域访问
   origin:["http://127.0.0.1:8080","http://localhost:8080"]
   ....
  }))
  app.get("/list"...)
 #注意:配置代码在所有请求之前添加

4.5 新闻列表

(1)分析新闻列表保存数据库表名列类型
vue_server_00/db.sql
(2)app.js 分页请求
(3)脚手架创建组件
- /home/NewsList.vue /NewsList.vue
-发送ajax请求获取新闻列表第一页数据
-使mui组件创建新闻列表
常见错误:
- net::ERR_CONNECTION_RESET
原因:服务器 node.js 出错并且停止工作
查看node.js 控制台出错消息
Table ‘xz.xz_news’ doesn’t exist 新闻表不存在

5 参数传递

5.1 参数

发送ajax请求 this.axios.get(“http://127.0.0.1:3000/list?id=9&age=19”)
接收参数
var id = parseInt(req.query.id);
var age = parseInt(req.query.age);

5.2 sql语句

由于node.js非阻塞,所以当功能需要严格的顺序执行,可在查询语句中函数内部加入另一查询语句

登录:
-参数:用户名密码 uname upwd
-sql:SELECT uname,upwd FROM xz_login
WHERE uname = ? AND upwd = md5(?)
用户名或密码错 result.length == 0
商品列表(分页):
-参数:pno 页码 pageSize 页大小
-sql SELECT id,img_url,price,title FROM xz_product LIMIT ?,?
? (pno-1)*pageSize
? pageSize
-sql SELECT count(id) FROM xz_product;
Math.ceil(20/pageSize); 向上取整
购物车:
(0)列表 SELECT id,name,price,title,count FROM xz_cart;
(1)添加
参数:pid 商品编号 price 商品价格 count 数量
-查询当前商品是否在购物车中
SELECT id FROM xz_cart WHERE pid = ?
-如果商品己经存在更新数量
UPDATE xz_cart SET count = ? WHERE id = ?
-如果商品不存在添加
INSERT INTO xz_cart VALUES(null,pid,price,count,now())
(2)计算合计脚手架计算属性
(3)修改(购物车中商品数量)
参数:id购物车项目id count 数量
sql:UPDATE xz_cart SET count = ? WHERE id = ?
(4)删除[多选]
参数:uid 谁的购物车 id=1,2,3
字符串拼接 1,2,3
sql:DELETE FROM xz_cart WHERE id IN (1,2,3)
(5)创建订单:
-参数:uid 购物车用户id
-查询购物车中数据 SELECT id,uid,price FROM xz_cart;
-添加订单表 INSERT INTO xz_order VALUES(?,?..)

6 常用方法

重定向{path:’/’,redirect:’/Home’}
创建按钮
-import {Button…} from “mint-ui”
-Vue.component(Button.name,Button);
var rows = this.list.concat(result.data.data);//加载更多
创建过滤器格式化日期对象创建全局过滤器
-创建过滤器main.js
Vue.filter(过滤器名称,function(val){
-依据参数创建日期对象
-年月日小时分钟秒
-返回字符串 Y-M-D h:mi:s
});
-调用过滤器组件模板
{{item.ctime | 过滤器名称}}
点击按钮 “加载更多…” 查看下一页
-为加载更多按钮绑定点击事件
-创建函数加载更多 {下一页}
-遇到问题:显示下一页内容上页内容覆盖
希望保存上一页内容
this.list = [];
this.list = result.data.data;
var rows = this.list.concat(result.data.data);
this.list = rows;
商品列表
分析查询表
-查询当前页内容
xz_laptop 商品表
xz_laptop_pic 商品图片表
商品编号商品标题商品价格商品图片
lid title price md
(1)查询表保存在 FROM后
(2)为每张表创建别名
(3)查找两张表哪列有关联的 = <= >=
SELECT l.lid,l.title,l.price,p.md
FROM xz_laptop l,xz_laptop_pic p
WHERE l.lid = p. laptop_id
GROUP BY l.lid
LIMIT ?,?;
app.js