浅学VUE实战｜重写个人站点

声明：lz没有什么开发经验，错误在所难免，可能说实战不是很恰当，项目lz是拿来练手的，如果有错误或者更好的方案希望指出

前言：

在上一篇中，我们浅浅接触了vue这一新时代前端框架，lz看着自己杂乱无章的个人站点，萌生了重写的想法，一方面练手巩固vue，一方面打发下自己寒假的时间

组件复用：

lz感觉组件Component这个玩意儿是个很好用的东西，很大的提高了代码的复用性，所以lz在开发前也查看了原先站点的设计，目的是找出相似的地方用组件代替

可以发现三个页面都有列表，这个列表我们就可以写一个组件去替代，其次在最后一个页面可以看到有两个相同的带按钮的输入栏，这也是我们可以用组件替代的地方

页面路由：

原来的站点有三个页面，那就有三个html文件，三个js和三个css，但是我们现在使用vue—router配合打包就可以实现单文件多页面的操作，很是舒爽

我们先在App.vue根组件中进行vue-router模板的配置，标签RouterLink，我们使用to属性，指向不同的路由，标签RouterView用于页面挂载

我们进行了路由的配置，可以看到to和path是对应的

组件开发：

我们先开发shengList和shengInput两个组件，分别对应列表和输入

shengList

先使用defineProps声明组件接收的属性，用于数据输入和配置，我们设置了三个属性，useDelete和useRLabel用于控制item的样式，dataList就是数据了，接着用defineEmits声明事件，将其绑定在方法onItemDeleteListener（好像java安卓的接口，索性就拿来命名了）传入索引与条目数据，可以看到template中我们使用了v-for模板语法循环添加条目，并使用v-if根据两个use属性判断是否进行该标签渲染

shengInput

声明了两个字符串类型属性，分别用于输入栏placeholder和按钮的文字显示，对于input，我们使用了v-model这个属性，用户将输入数据实时传给inputText变量，老样子使用defineEmits进行事件声明，绑定给方法并传入inputText也就是输入的文字信息

组件使用：

三个页面的打框分区是我提前写好的，ui部分不知道盒友想不想看，主要是bootstrap的一些样式和css的使用

在page中使用组件，传入数据并绑定事件，测试了下，可以看到输出了我们输入的文字，说明没问题

总结：

可以看到，组件真的很方便，设计好模板，配置好数据输入，配置好事件处理就能用了，再也不用多个页面复制粘贴了

至此重写部分我们我们只完成一小部分，剩下一大部分就是ui方面的和数据请求接口方面的，虽说可以直接复制老的，但是感觉老的写得很乱很糟糕没有规范我还是重写吧