vue-cli4初探、问题解决和心得

创建、调试、打包

vue create event-vue
npm run serve //这个好，官方推荐`vue serve`没用
npm run build

项目结构

• package.json 项目配置文件，含依赖配置，安装包的时候npm会自动去更新它
• app.vue 是顶级组件（可理解为首页）
• main.js 用来管理全局组件，我不喜欢用它
• vue.config.js 默认没有，但我创建了它，配置了全局变量，最终部署时需要它
• components 存在子组件，可被app引入
• assets 存放自己或手动下载的库/组件，可被引入
• public 存放完全静态的东西

添加组件

• 官方推荐用vue add，实测很垃圾，用它装了axios根本不能用，是适配老的cli的。因此还是用npm install来安装包比较靠谱
• vant还是有点麻烦的，import要写两行以外，要使用van开头的标签， 还得在components里加代码，类似Button,[Popup.name]:Popup,[Field.name]:Field，非常不优雅

自动刷新的问题

具体表现和简单：改有些代码时，页面不自动刷新。

解决方法就是能组件化就组件化。 因为在app.vue里改组件slot里的代码是可以自动刷新的。

自己导出模块

• 要使用第三方库的话， 可以const axios=require('axios')也可以采用import的方式引入
• 导出用module.exports或者export default方式
• 我自己的matchajs改造非常顺利

组合式API

一切都写在setup()内，最后return出来即可被template使用

如果provide出去，可被下级组件使用

需注意的是现在需视情况结合ref()和reactive()来定义data，否则return出去的东西若后面更改了，是不会响应式改变的

思路改变之后，再回到Option API的变成风格，会非常不适应（太不自由了）

reactive的机制导致踩坑

经测试， 发现let obj=reactive(new foo())这种方式来定义响应式对象的时候，如果foo实例化过程中含有异步回调， 那么回调时产生的数据改变， 不会触发响应式更新dom

原因非常简单， 因为响应式对象其实是一个Proxy对象。 仅当操作obj这个Proxy对象的时候才会触发响应式。 而foo实例化过程中的异步回调是对new foo()的结果进行改变， 并不符合触发条件。