博客v0.2迭代记录

发布于 2017-07-14 23:52:16| 分类于博客

博客v0.2.0使用Vue CLI重写前端项目，并逐步迁移原有组件、样式和数据管理逻辑。

TODO

[ ] 评论功能
[ ] 文章目录滚动监听
[x] 文章置顶
[x] 应用数据缓存

目录结构

shymean/ 
    |-APP/             接口
        |- Config
        |- Controller
        |- Middleware
        |- Model
        |- route.php
    |-Core/           PHP框架核心
        |- Common
        |- Lib
        |- Core.php
    |-Index/          vue-cli项目
        |- src        前端源码
        |- ...
    |-plugin/         一些开发插件
        |- hexo2mysql
        |- ...
    |-dist/           webpack输出目录
    |-docs/           开发记录
    |-index.php       入口文件
    |-...

开发记录

下面是整个项目的开发记录。每次更新都往下翻太麻烦了，于是现在使用正序记录。

2017-4-3

趁着清明放假，打算实现这段时间需要添加的功能，包括文章指定和使用Vuex实现数据缓存。另外，之前为了省事，直接在控制器里面查询数据，有的地方写的很烂，现在一并移动到模型里面去。

今天的另外一个任务是整理阅读过的书籍并整理数据，有的书草草翻过一遍就扔在那里都沾满灰了...像CSS权威指南，JavaScript高级程序这些书有必要再多刷两次，另外我现在很想回头重新学一学C++，感觉时间不够用啊（还得腾出时间玩两把撸啊撸~）

2017-3-19

今天将实验室，书架和关于页面作为了博客模板的一部分（之前的与博客平级目录），并搭建了留言板页面（功能还没写），为什么在网站上引多说会失败，这也是个问题哦。
再等两天就可以完全过渡到新版本，还要增加目录滚动监听和段落选择评论的功能。

2017-3-12

之前是使用id来查询文章详情的，这样在本地编辑博文的时候如果需要引用之前的文章就很蛋疼，并且迁移博客的时候id值可能会改变，因此今天将文章查询键值修改为了文章标题。

2017-3-4

Vuex 想起V0.1.0关于文章详情目录的处理，由于需要两个兄弟组件之间的通信，之前的做法是使用在route-view中触发事件传递到#blog实例，然后再分派到aside组件，这么做实在是太绕了。之前有想过使用一个全局对象来管理整个Vue实例的某些数据，但是一直没有行动，今天看了一下Vuex的文档，决定动手将这里改掉。由于是刚开始接触，记录一下遇见的一个问题：mutations中更新的数据，必须先在state中声明，不然后面即使是更新数据成功并能访问到数据，该数据也不具备响应式的能力。

样式表 另外想要将样式表迁移过来，由于需要先定义一部分混合器和变量，然后再vue组件中继续写局部样式。遇见的问题是在组件中无法调用全局的混合器和变量（相关scss文件都已经在main.js中使用import引入了），最后打印发现，组件的调用在main.js之前，没办法只能在每个需要变量的组件显示地声明import

html

<style lang="scss" rel="stylesheet/scss">
    @import "../style/_mixin";
</style>

很明显的问题是使用相对路径的可维护性比较差，但是暂时没有好的解决办法。除此之外，不得不说用vue-cli管理样式表真的好爽。

除此之外还发现了一个问题，scss-loader太强大了，完全不用考虑各种属性的兼容问题，之前写的flex-mixin,css3等处理兼容的样式表完全不需要了，这真是令人沮丧啊，不过，经历过这些东西才能更明白新技术的意义吧。

2017-3-3

我擦咧，今天遇见了一个灵异的问题：在Index组件中引入的marked库正常运行，在Detail组件中却直接报错，最后发现根本原因是dev环境下的热更新没有生效，尝试了各种办法（重新安装，重写文件），甚至连log都输出不了。万般无奈只能使用npm run build尝试在php那边跑测试一下，结果发现都正常了。心里真是无fuck说，然后现在又回到开发模式，还是同样的问题。这个问题折腾了很久，最后新建了一个vue-cli项目，发现热更新是可以使用的，那就应该是我昨天的某个地方的配置文件改错了。

最后，调试发现就是proxyTable属性的配置问题，当时为了省事直接使用了/定向为虚拟主机的地址。这就蛋疼了，最后还是参考文档使用/blog作为请求键名，这样不需要更改后台，但是前端请求的接口全部都要换成blog/...这样的形式，有点蛋疼啊。不过好歹是解决了这个问题，正好之前使用的是blog_index形式的请求，一并改成blog/index这样的形式。

这个问题的具体原因应该是热更新与/路径冲突了，有待进一步了解。

解决了上面的问题，整个博客很快就搬过来了。现在需要做的是将样式表局部化，Vue可以很方便地让我们管理样式表，而之前就文件管理和样式命名花费了大量的时间进行思考，这不算是浪费时间吧~好吧，貌似断网了，看会书先。

2017-3-2

发布V0.1.0版本，然后开始引入Vue-cli，目前正重新归纳整个目录。最初始打算直接在根目录下使用vue init的，然后发现index.html和index.php文件冲突了。由于开发的时候使用的是Node的服务器环境，但是上线的时候是使用php，为了不影响php这边的接口，于是新建了Src目录，并改写npm run build的输出路径。现在需要完成的工作室将之前使用require管理的组件挪过来。

由于最后项目是在PHP环境下运行的，到时候，直接将项目npm run build的输出改写为根目录下/dist/（是在Src/config/index.js下修改的），然后稍微修改后台路由引入页面的路径就可以了。

由于在测试的时候是使用Node的服务器，对于数据请求的调试存在跨域的问题，如果每次调试数据都使用一次npm run build整个人会疯掉的。后来搜索发现也可以通过配置Webpack来调用PHP的数据接口，同样在config/index.js下添加配置

  proxyTable: {
        '/':{
            target:'http://www.shy.com',
            changeOrigin:true,
            pathRewrite:{}
        }
    },

记得更改之后重启run dev哦。Webpack实在是强大啊，看来真得好好学习了。

遇见了第一个问题:在router-link上使用v-for时，必须显式声明v-bind:key="xx"属性，不然会在控制台打印警告，模板渲染失败。这个问题的原因是使用v-for更新已渲染过的元素列表时，会复用这个元素，需要保存一个特定索引值，参考

#Vue #Vue CLI #Vuex

你要请我喝一杯奶茶？

本站文章均为本人原创，参考文章我都会在文中进行声明，也请您转载时附上署名。

博客v0.2迭代记录

TODO ​

目录结构 ​

开发记录 ​

2017-4-3 ​

2017-3-19 ​

2017-3-12 ​

2017-3-4 ​

2017-3-3 ​

2017-3-2 ​