建立编辑器-vue项目

经验

• 练习做项目时，如果遇到不懂的就先跳过，先把功能实现，完成后再去想细节，不要一开始就去纠结不懂的知识点，否则会把时间拉的很长，从而打击学习热情

• 如果想做出很炫的效果，一个很便捷的途径就是：引用别人写的库，要什么功能就引入什么功能，狂看说明文档.
  切记：不要去纠结人家是怎么实现的，做出来东西后再对有兴趣的部分去深究

• 编写代码时，每添加修改一点功能，一定要记得

• 解决网页访问404的办法是 加目录或减目录

• 一般项目上线时不上传编译后的dist文件夹，而是将dist文件夹打包上传到服务器

git add .
git commit 
git push 

否则，无法追溯，体现不了git的价值**

前置知识

• MVC MVVM 视频教程 在饥人谷的直播班11中有
• ES6

问题记录

• 引入scss文件时，路径文件均正确，但是提示：
  error: This relative module was not found:
  这是因为vue-cli默认没有安装sass、scss文件loader，执行下面命令安装：

npm i -D sass sass-loader scss scss-loader node-sass css-loader
// 如果这么安装报错就分开单独安装即可

• 文件存放
  不是属于某个组件特有的css或者其他资源（如图片），都可以放到assets文件夹下，属于某个组件的css，写到组件内的style标签中

• vue的组件中使用 scss 的方法

//  在style标签上添加 lang = "scss"
<style lang="scss">
</style>

• 编写css时，最好在外层添加#id，提升优先级，能减少不必要的错误

• 当实际显示的效果与预期效果不一致时，记得检查相关部分的css是否出现优先级 问题，导致样式被覆盖

知识点

• svg标签默认是个inline-block元素
• html中的事件传入的是一个函数调用，而不是函数名，
  如：

// 这个copyText()是js函数
<button onclick="copyText()">复制文本</button>

// 下面这样在js中才是加函数名
btn.onClick = fn;

// 上面两种写法的区别就是：<button>是在html中，而btn.onClick=fn是在js文件中

• 在vue中传入字符串和传入变量

<ArrayEditor v-bind:items="workHistory" v-bind:labels="{company: '公司', content: '"工作内容'}" v-bind:title='"工作内容"'/>

上面代码中 v-bind:items="workHistory" 表示传递一个变量workHistory；而v-bind:title='"工作内容"'表示传递一个js的字符串，注意： 如果需要传递一个字符串进去，就不需要使用v-bind进行绑定了，直接使用：title="工作内容" 即可

• 如果在Vue中要使用动画效果，有两种途径：
  • 使用纯CSS
  • 使用Vue中的transition

项目开发流程

• Vue是以数据为中心，通过数据去渲染出DOM，因此，一般我们的开发流程是：先构建数据，数据构建完成后，MVVM会帮我们去渲染出DOM

• 箭头函数：箭头函数的一个特点是：它不会改变this的指向，函数内的this与函数外的this相同

• 将vue项目发布到github

  • 第一步：vi config/index.js， 如下：
    image.png
  • 第二步：删除.gitignore中的 dist 目录，表示将该目录上传到git上
  • 第三步： npm run build：重新编译
  • 第四步：上传到github上

安装初始化

外部引入

• element-ui：
  引入方法及使用方法：查看文档

• 使用svg symbol 作icon
  使用的icon地址
  不会使用就看文档：使用帮助
  总共分为这么几步：

  • 第一步：拷贝项目下面生成的symbol代码：
    //at.alicdn.com/t/font_8d5l8fzk5b87iudi.js
  • 第二步：加入通用css代码（引入一次就行）：

  <style type="text/css">
  .icon {
     width: 1em; height: 1em;
     vertical-align: -0.15em;
     fill: currentColor;
     overflow: hidden;
  }
  </style>
  

  • 第三步：挑选相应图标并获取类名，应用于页面：

  <svg class="icon" style="font-size: 100px">
    <use xlink:href="#icon-xxx"></use>
  </svg>