<![CDATA[湖南长沙前端开发与培训－通途工作室 - VUE研究]]> http://blog.258754.cn/ zh-cn PBlog2 v2.4 湖南长沙前端开发与培训－通途工作室 http://blog.258754.cn/images/logos.gif http://blog.258754.cn/ 湖南长沙前端开发与培训－通途工作室 http://blog.258754.cn/article.asp?id=275 <![CDATA[vite2+vue2.6.12+vant2.12.12提速移动端开发]]> dudu@258754.cn(admin) Fri,25 Jun 2021 23:12:53 +0800 http://blog.258754.cn/default.asp?id=275  试着用网上的一个vite2的脚手架做了个移动端的尝试。vite最大的好处就是--真的快！也可能是我页面比较少，但是每次热更新，基本就是一存盘，浏览器就完成了变更，体验太好了。

换新脚手架，要把所有常用配置都验证一下，并且把原来webpack中的选项都做到在vite中等价实现。

包括：

* px2rem的解决方案，在postcss.config.js中配置，转化为vw单位，比rem方式要先进点。

* vant基础样式定义，在theme.less中。

* lodash及moment全局引入，在/index.html中直接用<script>标签引入的，在vue文件中和.js中直接可用，但是在.ts文件中，如果不做import，会有红色的错误波浪线出现，但不影响使用。

* import后缀为vue的组件时，必须带上vue后缀，但js/ts不用带后缀。

* 有时候大的变化要CTRL+F5强制刷新页面，热更新才会生效。

* 图片引入方式：

<img :src="require('@img/aaa.png')" />

background-image: url("@img/aaa.png");

* 静态资源在/public目录下，在页面中用/images这样的路径引入即可。

* webpack允许的require在此都不能用，要改为import。写法方面，@import "~@/assets/less/_variable.less" vite中要去掉~写成：@import "@/assets/less/_variable.less";

* 控制台过滤。vite会出现一些控制台输出，暂时没有配置方法屏蔽，折中办法，在控制台搜索框输入-vite,可以过滤掉这些输出。

* 运行命令与环境变量。跟webpack略有不同。运行方式看package.json就知道了。环境变量可放在.env.development这样的文件中，跟webpack一致。在所有代码中输出import.meta.env，可以看到环境变量的所有。具体看文档。

 

我本人对于vue3和ts不是很熟悉（学不动了），所以宁愿工作在vue2+js的环境中。在vite脚手架中，这两种方式是可以混用的。所以按自己合适的模式使用就行了。

 

放心去享受vite带来的快速体验吧！

]]> http://blog.258754.cn/article.asp?id=268 <![CDATA[可拖拽生成节点的组织结构图-vue+svg+betterscroll+原生js-drag]]> dudu@258754.cn(admin) Fri,30 Oct 2020 00:38:44 +0800 http://blog.258754.cn/default.asp?id=268  

查看案例请点击此处：

http://258754.cn/2020/vue_demo/#/demo/dtree
 
需要源码可联系站长本人。微信18975141930。
 
使用的技术框架：
1、原生Svg用来画线
2、原生js拖动dragover、dragleave、drop行为
3、betterscroll实现画布拖动
4、整个底层由vue-cli3实现

功能点：
1、图形与数组双向互动。树节点有单击、右键单击、删除等行为，可通过console.log查看。
2、左侧方案节点可以直接拖到右侧蓝色节点上，添加树节点
3、树节点变化后，会自动调整画面宽、高，并重绘线条
4、线条的柄长度、连接点位置，包括宽度、颜色，都已经用变量实现。
 
这个案例主要是用来测试JS与SVG的结合、拖动行为的基础实现。到具体项目中，是将树结构打包为一个dtree.vue的组件，对外暴露行为。本例只是一个雏形雏形，有了这套理论，可以实现更复杂的东西。比如在页面上任何DOM对象之间都可以连线，画图形标记，是不是想想都有点小激动？
 

 顺便提一下，这种连线可以跟动画相结合，参见我的另一个小例子：

http://blog.258754.cn/2016/svg/test_svg_2019.html

VUE+TWEENMAX+SVG动画，用来模拟流程控制

]]> http://blog.258754.cn/article.asp?id=258 <![CDATA[http-vue-loader插件让你无需使用webpack也能尝鲜.vue单文件组件]]> dudu@258754.cn(admin) Sun,25 Mar 2018 17:27:26 +0800 http://blog.258754.cn/default.asp?id=258 目前利用<script>方式，不使用webpack的开发人员还很多，我之前一直不知道，可以绕过webpack，直接尝鲜.vue的单文件组件方式，直到发现了这个组件。目前我已经在多个项目中使用。

这个插件的用法在百度上基本搜不到。具体使用方式可以看这个中文文档：

https://kuro.tw/posts/2017/07/11/%E4%B8%8D%E9%9C%80%E7%B7%A8%E8%AD%AF%E4%B9%9F%E8%83%BD%E8%BC%89%E5%85%A5-vue-%E5%85%83%E4%BB%B6%E6%AA%94-%E4%BD%BF%E7%94%A8-http-vue-loader/

也可以直接看github官网文档：

https://github.com/FranckFreiburger/http-vue-loader

 

另外，我按照官网方法配置scss语法支持，但我一直没有成功，老是报红色错误，在官网issue上看了，有人碰上同样错误，没有解决。
但我测试了LESS功能，是可以的，所以我就使用LESS算了。配置如下：
XML/HTML代码
  1. <script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.2/less.min.js"></script>  
  2. <script src="https://unpkg.com/http-vue-loader"></script>  
  3. <script src="./js/common.js"></script>  
 

Javascript代码
  1. //common.js  
  2. function less_init() {  
  3.     httpVueLoader.langProcessor.less = function (lessText) {  
  4.         return new Promise(function (resolve, reject) {  
  5.             less.render(lessText, {}, function (err, css) {  
  6.                 if (err) {  
  7.                     reject(err)  
  8.                 } else {  
  9.                     resolve(css.css);  
  10.                 }  
  11.             })  
  12.         })  
  13.     }  
  14. }  
  15.   
  16. less_init()  
  17.  
 

注意配置次序,less解释器必须在http-vue-loader初始化之后。

另外，官网上已经放出了最新的vue3-sfc-loader，我试用了一下，可支持vue3，也可以支持多层import语法。功能强大。
不过这种用法，不就跟vue-cli一样了么？不明白收益点在哪。
]]> http://blog.258754.cn/article.asp?id=252 <![CDATA[vue“作用域插槽”来制作通用列表组件]]> dudu@258754.cn(admin) Wed,13 Dec 2017 22:48:24 +0800 http://blog.258754.cn/default.asp?id=252  “作用域插槽”的官方定义是：作用域插槽是一种特殊类型的插槽，用作一个 (能被传递数据的) 可重用模板，来代替已经渲染好的元素。这VUE2.5提供的新功能，经我亲自测试，在2.2版本中并不好用。建议直接升到2.5。

官网文档地址：https://cn.vuejs.org/v2/guide/components.html#作用域插槽

典型运用就是列表。比如，在项目中有几种列表，他们除了item的格式不同，其它逻辑都类似，比如有类似的数据读取方式，有相同的页码逻辑，是否能写一个通用的组件，来加载这些列表，而不是写成多个列表组件？用作用域插槽实现如下。
 
父页面：
<infi data="/daily_work" class="infi1">
        <li slot="item" slot-scope="props">
               <span>{{ props.cont.pid }}</span>
               <span>{{ props.cont.tit }}</span>
        </li>
</infi>
props仅为一个变量，用来接收子组件传递过来的参数。
 
组件模板这样写：
<ul class="list">
        <slot v-for="(item,index) in list"
        name="item"
        :cont="item">
        </slot>
    </ul>
这样，把父组件中的一个<li>做为slot插槽放入子组件中，子组件的结构实际是由插槽提供的。
而子组件则负责列表的公有行为，比如<ul>“外壳”，用ajax获取数据，组织循环，甚至还要组织上滑滚动功能。
这样的组件，才称之为“灵活”！
]]> http://blog.258754.cn/article.asp?id=251 <![CDATA[vue+tweenmax实现手风琴导航效果]]> dudu@258754.cn(admin) Tue,14 Nov 2017 10:28:27 +0800 http://blog.258754.cn/default.asp?id=251 vue不擅长处理dom变化，因此常用的手风琴伸缩效果，不太好实现。顺手挂了个tweenmax实现了。107K的插件库。

其实用jquery也可以,jq的体积更小。

demo:

http://blog.258754.cn/2017/demo_vue_accordion.html

]]> http://blog.258754.cn/article.asp?id=250 <![CDATA[用VUE+localstorage+lodash.js实现购物车本地存储]]> dudu@258754.cn(admin) Thu,12 Oct 2017 01:11:23 +0800 http://blog.258754.cn/default.asp?id=250 在任何一个购物页面，只要购买了商品，就可以将购买量存储到缓存，实现跨页面共享数据。这个原理也可以用来管理其它较复杂的跨页面结构。

demo地址：

http://258754.cn/2017/jyg/shop.html
http://258754.cn/2017/jyg/sku_detail.html?id=1
 
几个技术要点：
  • 使用js-storage这个js库来实现对localstorage的读写及判断，比自己写原生要简单。因为localstorage默认存储是字符形式，如果要存储对象、数据这些，还要自己写转换，用库就简单得多了。另外还用isEmpty对“空结构”做判断。
  • 基于VUE做了一个单独的mixin_cart，要引入购物车的页面都可以使用这个mixin
  • 用一个数据结构(cart)来完整的映射“购物车”,针对它写了一些API:
    • init_cart----从local读数据来形成cart
    • get_cart_item_count----得到某件商品的购买量
    • write_cart------新建/改写商品数据
    • sum_cart-------汇总购买量
    • clear_cart------待加
  • 使用watch监听页面中的数据变化，一旦发生变化，就扫描数据结构，把购买量的变化使用write_cart映射到cart-->并存储到localstorage。注意watch监听数组或是对象这样的复杂结构，要使用handler+deep: true写法。
  • 一些算法使用了lodash.js，比如：
    • 查找符合条件的商品-- _.find
    • 从数组中删除商品---_.pull
    • 汇总商品购买量------_.sumBy
]]> http://blog.258754.cn/article.asp?id=249 <![CDATA[VUE中用refs实现父子通讯的新方法]]> dudu@258754.cn(admin) Sat,30 Sep 2017 16:27:30 +0800 http://blog.258754.cn/default.asp?id=249 例子：http://258754.cn/2017/read2/test_component.html 

用refs父子通讯的新方法，比用emit要方便。主要思路是用refs去读取子组件的内部值，调用内部函数。之前真不知道可以这样用，直到我读到这篇文章--Vue.js 组件样式指南（英文）：
https://github.com/pablohpsilva/vuejs-component-style-guide
]]> http://blog.258754.cn/article.asp?id=248 <![CDATA[近期VUE及周边笔记--YDUI框架]]> dudu@258754.cn(admin) Sun,24 Sep 2017 09:18:50 +0800 http://blog.258754.cn/default.asp?id=248  YDUI是基于vue2.0的一个功能齐全的UI框架，就我个人的应用范围来说，比element ui更适合我的需要。可能他的组件配置并没有ele那么强大而齐全，但是简练的风格反而更适合于中小移动端项目。

我主要使用这些组件：

  • flexible组件，用于rem-px单位转换，默认单位是10，好转脑子。
  • 弹窗，只有几个参数，适用于不复杂的情况。
  • 日期选择器，weui风格的，从底部向上弹出。
  • 滚动加载（yd-infinitescroll）
  • 数字动画 （CountUp）

其它的一些组件，别的库中也有，或是可以自己手写出来，并不是完全依赖。

要注意的事及BUG：

1、这个库的版本更新很快，如果发现参数无效等奇怪的情况，请先检查版本。比如yd-infinitescroll的不同版本写法就不一样。

2、flexible组件，对于窗口宽度的变化是有范围的。

Javascript代码
  1. //ydui.flexible.js，以下的11.2会在宽420像素以上停止变化，改为21.2后，会在768像素以上才停  
  2. return n.style.fontSize = 5 * Math.max(Math.min(t / 750 * 20, 21.2), 8.55) + "px", e  

3、ydui中把所有的链接都渲染为"router-link"的解决办法。查找ydui.js，把所有的"router-link"改为"a"

把所有的attrs:{to:改为attrs:{href:

4、一些bug可以到ydui的github去查找issue，说不定会有意外收获。

 

]]> http://blog.258754.cn/article.asp?id=247 <![CDATA[近期VUE及周边笔记--easy mock]]> dudu@258754.cn(admin) Sun,24 Sep 2017 08:53:29 +0800 http://blog.258754.cn/default.asp?id=247 easy mock(https://easy-mock.com/)平台的主要作用，是用来模拟生成json文件，在后端未到位的情况下，为前端调试提供数据。我的使用方法：

1、是在开发时将ajax请求，直接指向https://easy-mock.com/mock/59a578f77b7ac306cc2fa863/api这样的远程接口，进行调试。

2、等前后端联调结束后，通过修改axios的axios.defaults.baseURL参数，将数据接口指向真实ajax地址，完成切换。

easy平台提供了丰富的mock.js语法，也可以接收并request参数，模拟真实ajax情况很逼真。比如下面这个范式，就模拟了对”/list?page=*“这样的多页请求的情况：

Javascript代码
  1. {  
  2.   res_body: function({  
  3.     _req,  
  4.     Mock  
  5.   }) {  
  6.     //page小于3，每页给出20个随机数据  
  7.     if (_req.query.page < 3) {  
  8.       return Mock.mock({  
  9.         "page_num": 4,  
  10.         "list|20": [{  
  11.           "id": _req.query.page,  
  12.           "tt_amount": "@float(200, 2000, 2, 2)",  
  13.           "commission": "@float(200, 2000, 2, 2)",  
  14.           "final_amount": "@float(200, 2000, 2, 2)"  
  15.         }]  
  16.       })  
  17.   
  18.     }  
  19.   
  20.     //page==3，给出6个数据，模拟末页情况  
  21.     if (_req.query.page == 3) {  
  22.       return Mock.mock({  
  23.         "page_num": 4,  
  24.         "list|6": [{  
  25.           "id": _req.query.page,  
  26.           "tt_amount": "@float(200, 2000, 2, 2)",  
  27.           "commission": "@float(200, 2000, 2, 2)",  
  28.           "final_amount": "@float(200, 2000, 2, 2)"  
  29.         }]  
  30.       })  
  31.     }  
  32.   }  
  33. }  

 模拟身份验证

Javascript代码
  1. {  
  2.   res_flag: function({  
  3.     _req  
  4.   }) {  
  5.     return (_req.header.token == "1234567890")?true:false;  
  6.   }  
  7. }  

 

]]> http://blog.258754.cn/article.asp?id=246 <![CDATA[近期VUE及周边笔记--axios]]> dudu@258754.cn(admin) Sun,24 Sep 2017 08:27:35 +0800 http://blog.258754.cn/default.asp?id=246 我将ajax工具栈从vue-resource改为了axios，基本用法类似，但调用格式略有不同。比如vue-resource的response是放在res.body中，而axios放在了res.data中。

值得一提的是，axios的全局设置很方便，包括参数和拦截器。列举：

Javascript代码
  1. // 全局基地址配置  
  2. axios.defaults.baseURL = 'https://easy-mock.com/mock/59a578f77b7ac306cc2fa863/api';  
  3.   
  4. // 全局token  
  5. axios.defaults.headers = {token: window.localStorage.getItem("jyg_token")};  
  6.   
  7. // 添加全局请求拦截器  
  8. axios.interceptors.request.use(function (config) {  
  9.   // 给每个发出的请求后面加上php后缀  
  10.   config.url = config.url + "php";  
  11.   return config;  
  12.   }, function (error) {  
  13.   // 对请求错误做些什么  
  14.   return Promise.reject(error);  
  15.   });  
  16.   
  17. // 添加响应拦截器，比如对所有错误代码进行全局统一的出错处理  
  18. axios.interceptors.response.use(function (response) {  
  19.   // 对响应数据做点什么  
  20.   return response;  
  21.   }, function (error) {  
  22.   // 对响应错误做点什么  
  23.   return Promise.reject(error);  
  24.   });  

 

]]>