建立编辑器-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>
```

最后编辑于：2017.12.10 01:42:54