vue.js在线简历编辑器

花了一周的时间完成了第一个project：在线简历编辑器，有很多想记录的,关于具体算法，不足，心态各方面。

编辑器的具体实现

• 由于自己的电脑是Windows系统，很多命令在执行过程中出错，因此希望早日换机。首先是自己安装npm和node

npm init -y
yarn 
yarn global add @vue-cli   // 使用yarn全局安装vue-cli；
yarn serve  // 创建并打开服务器
npm run build    // 将文件打包并生成dist 文件

• 在上述过程中，有几个点必须要注意： 在使用npm或者yarn安装vue-cli的时候必须要将其默认下载地址改成taobao

*   npm config set registry=https://registry.npm.taobao.org
*   yarn config set registry https://registry.npm.taobao.org

• 在生成dist文件之后无法上传至GitHub，必须要在'.gitignore' 文件中删除掉'dist';最后在GitHub上面预览时会出现地址出错的情况，需要在vue.config.js或者config/index.js中更改默认路径。

关于代码中的问题

• 环境搭建完成后，浏览器会打开一个vue基于webpack的模板项目，根据此模板删改来完成自己的项目。项目中的入口文件为其中的App.vue和main.js

  
  
  image.png

• 其中App.vue实现对项目总体框架的搭建

  
  
  image.png
• 该组价相当于是父组件，可以直接使用import引用子组件，component，然后在template标签中直接使用

• 父组件向子组件传递信息使用v-bind，绑定，然后在子组件中使用props引入

  
  
  image.png
  
  
  image.png

• 关于组价之间的事件触发和监听：可以在子组价中触发一个事件，然后在父组件中监听并调用方法

  
  
  image.png

• 父组件中的监听

  
  
  image.png
  
  
  image.png

3. 关于data需要注意两点：

• 其是vue实例的数据对象

• 其data 必须声明为返回一个初始数据对象的函数

  
  
  image.png

4. 关于是vue实例中methods方法的调用注意几点：

• 内部一般不用箭头函数，因为在其中this会发生变化

• 内部的函数调用一般都会使用到this（千万不能忘了this）

  
  
  image.png

5. 对于v-bind的用法，在绑定class和style，在向子组件通信过程中都会用到，下面是父组件在向子组件传递数据。

   
   
   image.png

6. 对于css中浮层的实现，使用该种方式

   
   
   image.png

7. 如何判断一个数组中有空对象并返回将空对象去除后的数组

   
   
   image.png
8. 在对对象进行赋值时必须使用
   image.png
   
   在调用对象时可以使用empty.key

9. vue中的输出命令和其余的有所不同

   
   
   image.png
10. 对于很多麻烦的样式的使用直接使用网上的代码即可。