vue-cli制作简历总结

这两天在看Vue的东西，发现个教程是基于vue-cli来做一个自动更新的简历。

敲了一遍，这里做一下总结。

这是原教程地址：https://github.com/jirengu-inc/animating-resume

其实自动更新的原理很简单，先把样式写好，放到一个字符串里，然后动态创建一个style标签，设置定时器setInterval，隔多少时间style标签里的样式自动更新一下，打开浏览器你会发现浏览器在不断的更新dom。

 var n = 0;
 setInterval(()=>{
      //code是预先写好的字符串
      this.code = this.code.substring(0,n);
      n++;
},1000)

这是基本的原理。

但是呢，放到vue-cli里面，具体代码可能要更改一下。

vue-cli是一个完整的构建工具，帮你省了许多配置工作。

按照官网教程先搭建一个基本的工程。下图是工程的目录

dir.png

我们一般把代码放到src目录下，组件放到components目录下，图片，css放入assets目录，main.js作为主程序。如下图所示

要注意的是，写好的组件要结尾要写成.vue格式

而这个.vue文件也有挺多套路的，拿其中一个组件styleEditor举例

<template>
 <div class="styleEditor" ref="container">    
    <div class="code" v-html="codeInStyleTag"></div>
    <pre v-html="highlightCode"></pre>
 </div>
</template>

<script>
//导入Prism库 实现语法高亮
import Prism from 'prismjs'

export default {
  name: 'Editor',
  props: ['code'],
  computed:{
    highlightCode:function(){
        return Prism.highlight(this.code,Prism.languages.css);
    },
    codeInStyleTag:function(){
        return `<style>${this.code}</style>`
    }
  },
  methods:{
        goBottom(){
            this.$refs.container.scrollTop = 99999;
        }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 .code {
    display: none;
  }
</style>

1.template标签里面写入dom结构。

2.需要用到什么库，使用import..from(库名)语句，前提是你已在package.json文件里填入相应依赖，并运行npm install成功安装。

3 .vue文件会输出一个default对象，在这里你可以使用计算属性computed，方法methods，还有添加属性数组props。

4.要注意，在default对象中data属性不再是以对象方式出现，而是

data(){
    return {
         //私有数据写在这儿
         key:value;      
     }
}

5.组件间相互联动依靠ref属性，再通过this.$refs.属性名来做一些操作

6.最后的style标签填入组件样式。

7.引入写好的组件同样使用import语句，同时，在default的components对象加上组件名

最后总结一下这里主要知识点：

1.pre标签的使用

2.使用created()方法来操作元素，具体还有许多方法，详见vue生命周期图

3.this.$nextTick 下次dom刷新时的操控对象

4.对promise对象以及async函数的使用，优化异步

5.异步语句使用箭头函数捕获上下文

以上。

vue-cli制作简历总结

推荐阅读更多精彩内容