最近因为工作需求学了下 Vue 并撸了个简单的商城。
学习经历
最开始没正经去学，只是作为一个兴趣去了解的 Vue，很久以前算是有点 HTML 和 js 的底子。
- 第一步先百度下 Vue，查到了 vue.js 的官方文档，看了一通，很多语法似曾相识，例如
{{ value}}。 - 起步篇：。。。你一个 js 文件还需要 nmp 安装，还有 Vue Cli，至于吗？这不是增加入门难度吗？这是我的第一个想法，有点方。。。。
- 语法使用 ES6，挺好的，就是不知道兼容性怎么样。。后来发现自己的担心多余了。。
- 再就是 template 模板， if show 判断
- 然后是事件处理
v-on:click可以简写为@click - 触发子组件的点击事件
:click.native - 子组件传递事件给父组件
this.$emit() - 还有 for 循环需要设置 key 作为复用标识
- v-model 双向绑定一般用于输入框
好了 vue.js 看完了，好像还是缺点什么啊，看人家的 Vue 项目很高大上啊，为什么我这里还只是多引用了一个 js 啊。
Vue Cli
第一次接触这种形式的 web 开发，以前印象中 web 就是 html + css + js + 记事本。 不得不说我对 web 的认知已经太过时了。
在使用 VueCli 的这一刻我觉的我是在写一个 web 项目而不是写个网页。 逼格瞬间不一样了啊
假装科普下安装命令 npm install -g @vue/cli
不能安装请经国家批准使用正版翻墙服务安装
这是个什么东西那
包含三个关键字吧
- node
- webpack
- 生成默认模板的工具
别问我 node 是什么，webpack 是什么，我也不知道，我也是百度的（学习成本太不友好了）。。。。
新手可以先略过他们专心学一下 Vue 怎么用
Vue ui 命令可以使用图形化管理界面
- 界面还是很友好的，就是命令执行的速度慢了点，新手友好，另外还有依赖和插件管理。
- 看到这里我就来疑问了，这个依赖和插件又是什么关系？
- 个人看法（这瓜不包熟）：依赖就是正常 npm 包，插件就是针对 Vue 又写了点配置，怎么选择还是很清晰的。
打开创建的项目
.vue文件
- vue 文件内写 html css js
- main.js 是入口
- index.html 是承载真个项目的主体
为什么只有一个 html 文件。。。 因为默认这是一个单页面应用，所有是页面跳转实际是基于替换指定节点实现的。
以前写 web 都是用 jQuery，但是网上大神都说不推荐用在 Vue 里面了，所以就没有引用。 实际使用中发现 Vue 的数据驱动和绑定确实好使，省去很多的 js 逻辑代码，爽。
问题
页面跳转
。。。。怎么跳页面这是一个问题，百度之！
vue-router 官方的路由管理器
坑： 由于是单页面应用，在（假）页面跳转后返回页面会重置，使用
<keep-alive>缓存之前的页面，但是对于一些复杂操作有坑，建议根据实际情况慢慢爬。
页面传值
两种模式
params 和 query
类似 post 请求和 get 请求 params 传参地址不可见，刷新页面后会丢失 query 传参数会拼在地址上。
全局变量和存储
vuex localStorage
vuex 内存级别的全局变量，不刷新就不会丢失，存储和读取略显麻烦。 localStorage 作为的 vuex 持久化存储
选择合适的三方
css 样式实在不适合生撸，找个三方吧 Vant 有赞的 UI，转为 Vue 设计，可以组件化引用
吐槽下
组件化引用这个东西真心是烦，写个页面先引一堆东西。。。。心累 当前也有全局引用，但是慎用。如果你使用本地加载的话全部引用吧。
网络请求
还是选择官方的 axios 这地方就遇到一个坑，不知道和我们后台有么有关系
// 参数转化 剔除 null
let formData = new FormData();
for (let key in newOptions.params) {
if (newOptions.params[key] == null) {
continue
}
formData.append(key, newOptions.params[key])
}
单位问题
这个问题因为前期没有百度，所以选了 rem 作为单位（好像现在很多用 vw 做适配单位的），并且很偷懒的把 375 设计稿下 html 字体设置为了 10
很多低版本的谷歌内核有最小字体的限制。。12 还是 14 来着，然后就悲剧了
于是花了半小时看了下 Python，在花了半小时写个批处理 将 10px 改成了 20px
代码如下
import os
import re
path="/Users/****/WebstormProjects/***/src"
for root,dirs,files in os.walk(path):
for name in files:
if name.endswith("debug.vue"):
print(root, dirs, name)
filePath = root + '/' + name
# 打开 vue 文件
f=open(filePath,"r")
# 读取为一整个字符串
vueString = f.read()
f.close()
originalRems = re.findall(r"[0-9.]+[\d]{0,10}tt", vueString)
originalRems = list(set(originalRems))
# 更具长度进行排序，防止 replace 时出现错误
originalRems.sort(key=lambda x: len(x), reverse=True)
print(originalRems)
nString = vueString
# 单位 rem 测试用 tt
unit = 'tt'
for item in originalRems:
value = float(item.split(unit)[0])/2
nString = nString.replace(item, str(value) + 'Flag')
nString = nString.replace('Flag', unit)
print(nString)
# 写入操作
# fw = open(filePath,"w")
# fw.write(nString)
vant 使用 rem
这地方我有把自己坑了，本来可以用插件直接px转 rem 的，但是我自己写的代码已经手动用了 rem 单位，剩下的 px 做单位的都是我特意写的不缩放的 UI。 但是 pxtorem 没有忽略文件夹去配置，木得办法自己手动打个补丁吧
if (css.source.input.file.indexOf("node_modules/vant") == -1) {
return
}
