基于vue技术栈制作自己的简历网站问题总结篇(入门vue基础项目)

前言

目前在学习vue技术栈的同时接触到了很多以前没用过的各种工具(如webpack，npm，git等等)，配合着vue全家桶里的一些东西做了一个基于vue的个人简历网站(虽然用vue框架搭简历网站优势不大，但是用来入门及练习vue基础相信也是极好的)。此篇博便总结一下近期遇到的各种问题及解决方案！

先贴上Github的项目地址：
(相信此项目作为初学者入门vue基础，了解vue-cli结构是非常适合的)

https://github.com/nopapername/vue-resume

大家可以先预览一下页面，我挂在github pages上了，但是加载很慢–!

https://nopapername.github.io/oyresume.github.io/
（也可以访问如下：www.oyjhblog.com）
我的博客 https://nopapername.github.io

欢迎大家fork及star此项目，有任何问题也可以提issues！

项目概述及预览

技术栈
前端 es6 vue2 webpack vue-cli vue-router vue-awesome-swiper vue-particles bootstrap csshake animate.css
预览

总结

前期项目准备

最开始学习vue时是在菜鸟教程上看的，但是看了前几节很懵，完全不像html，css，原生js，jq容易理解。于是便去b站上找的教程花半个多月时间看完了（因为学vue得接触到webpack，npm，node等相关知识所以这些也粗略顺带学习了）不得不说我之前还去硬读了一遍vue2的官方文档才摸到门栏- -！。
总结一下半天摸不到门栏的原因：

学习vue基础的时候只是简单用script标签引入的vue.js文件，没有模块化及组件化的概念，没有接触到甚至不了解诸如webpack，vue-cli，npm等相关工具。（了解这些基础概念推荐我看过的一篇博客：https://blog.csdn.net/wxl1555/article/details/79964818 ，读完这篇文章相信初学者就会有所认知，我这里就不赘述了）。
为什么做一个基于vue的项目要学习到上面所说的几种甚至更多的工具？这个问题在最开始真的困扰了我很久，除开推荐的那篇博文所说，我叙述一下我的感受。在做一个vue大型项目时，会用到vue全家桶里的东西得学习到，因为通过link或者script标签引入的东西太多，为简化这一过程便用到了npm包管理工具(方便你自己)，而页面加载时因为这些引入的东西太多请求的次数太多就会出现卡顿的情况，所以用到webpack打包工具来进行资源整合使页面只需要请求一次(方便用户)。而用到webpack和npm就得学习一丢丢的nodejs相关知识(因为webpack这个工具是用nodejs写的，而npm又得在node的环境下使用)，所以也得安装一下nodejs环境。然后在写项目的过程中，有时候可能因为失误或者什么其它原因导致项目出现问题想要回到项目以前的某个时候，便用到了git。所以学习的东西就相关联起来了。。。当然你也可以通过vue-cli脚手架快速开启一个项目（相当于直接帮你搭建好项目结构，但是理解这些东西应该会更让人印象深刻）。

中期项目编写

学习完了以上的相关东西，应该便具备开始真正写一个入门的vue项目的能力了。不过期间真的会遇到很多问题。我便着手做了一个基于vue技术栈的简历网站，用到了一些好的库文件及组件。
总结一下这段时间以来的各种问题：

在vue-cli构建好的项目中引入外部文件和库的路径问题。引入文件路径如@/xxx/xxx中"@“符号是一种别名的写法，这里代表"src文件夹"路径。也可以采取相对路径的写法 ./xxx/xxx中的”./“表示当前路径，”…/"的话表示上一级路径。
在组件中vue返回的data数据区如果返回的数据中引入的有图片的路径，应将图片放在和src路径同级的static文件夹下再./static/xxx/xxx引入。
如何添加页面初始化时的加载效果。将包含页面加载效果的div元素放在vue包裹的div元素下(vue项目中一般放在id为app的元素下第一个子元素的位置)，然后在app.vue中生命周期函数钩子的created函数中将页面加载效果的div元素删除。
引入的外部组件如何使用。如引入vue-awesome-swiper中的swiper及swiperSlide组件：
在main.js中全局引入及注册
import VueAwesomeSwiper from ‘vue-awesome-swiper’
Vue.use(VueAwesomeSwiper)
并在自己要使用的组件内部再引入相应的swiper组件
import { swiper, swiperSlide } from ‘vue-awesome-swiper’
最后就可以在html中使用。
一些组件传值相关的问题。在APP.vue中的数据通过子组件的props来调用。而子组件内部还引用了其他组件(暂且称为子子组件)，那么子子组件并不能通过props得到APP.vue组件中数据的值。
使用jquery插件中的方法的问题(比如使用bootstrap中的tooltip工具)。因为vue中不推荐使用jq，但是实际项目中可能有个中原因导致不得不使用jq来操作一些东西，所以我在用tooltip时就直接在script标签中使用
$(document).ready(function () {
$(’#github’).tooltip()
})
方法可行，但是不知道有没有危害，希望大佬能提供其他解决办法！
什么时候使用插值表达式。因为在vue项目中数据实现了双向绑定，因此在数据交互时显得尤为方便，但是又没明确表示什么时候使用如{{ msg }}的插值表达式，应该除了一些不需要经常修改的内容直接写在html元素里，其他都可以用插值表达式。我一般在视图层用户能操作的表单数据中进行使用，当然因为是vue项目，能尽量用vue数据来绑定元素内容显示在页面上应该是最合适的，也便于我们后期维护修改。

后期项目维护

目前这个简历网站项目小屏幕端页面写了一部分还没完善，评论功能也没有添加进去，因此我决定等项目全部完工之后再来写这部分内容。

目标

实践是检验真理的唯一标准！
因为是刚入门VUE写的项目，肯定有很多不完善甚至错误的东西。希望大家能提出意见。
最终我的简历网站上线时得具备的功能：

响应式的手机端页面
具有登录评论留言功能
各个浏览器兼容性问题解决
维护修整页面内容

希望此篇博能对向我一样的初学者提供些许帮助！
同时整个项目工程文件在本博文片头Github中(Readme文件中有下载及运行方式)，欢迎大家fork及star此项目，有任何问题也可以提issues！