Vue-element-template项目学习笔记
1.
vue 在css 引入背景图片报错：Module not found: Error: Can't resolve '../../images/icons/loading2.gif' in '/home。报错信息就是找不到路径，我是这样的写法：background-image: url(../../images/icons/loading2.gif);
这是使用相对路径，报错了。后面改成background-image: url(/assets/images/icons/loading2.gif);不报错了，但是图片还是没有显示。
百度找答案~，终于background-image: url(‘~@/assets/images/icons/loading2.gif’); ~@的意思:@是webpack设置的路径名，代表的是src目录，可以在build / webpack.base.conf.js更改设置。
2.
app.vue文件我们可以分成三部分解读，
（1） <template></template> 标签包裹的内容：这是模板的HTML Dom结构，里边引入了一张图片和 <router-view></router-view> 标签，<router-view>标签说明使用了路由机制。我们会在以后专门拿出一篇文章讲Vue-router。
（2） <script></script> 标签包括的js内容：你可以在这里些一些页面的动态效果和Vue的逻辑代码。
（3） <style></style> 标签包裹的css内容：这里就是你平时写的CSS样式，对页面样子进行装饰用的，需要特别说明的是你可以用<style scoped></style>来声明这些css样式只在本模板中起作用.
3.
原生事件：就是js事件，比如click事件、鼠标事件等。给自定义组件绑定原生事件，是给组件根元素绑定原生事件。比如你定义了一个组件a：
methods:{
click(id){
this.$emit('click',id);
}
}
当你用这个组件a时，@click绑定自定义事件，带有id参数；@click.native绑定原生click事件，没有id参数。可以这样理解。即当你给一个vue组件绑定事件时候，要加上native！如果是普通的html元素，就不需要。
4.
（1）mapGetters：vuex的语法，用于将vuex的getters映射到某个组件的计算属性里。
（2）…：es6 的扩展运算符，它用于把一个数组转化为用逗号分隔的参数序列，它常用在不定参数个数时的函数调用，数组合并等情形。
（3）Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
Vuex有五大核心概念：
- State 可以理解为数据对象，里面包装了各种数据，类比为一个单例模式的对象，里面封装了很多数据
- Getter 可以理解为get函数，从state里获取数据，在这里还可以对原始数据进行一些转换包装后返回。
- Mutation 可以理解为update，对state里的数据进行修改。
- Action 可以理解为异步操作调度，就是有一个对state操作（mutation）的队列，action相当于把这些操作（mutation）放入该队列，这样可以尽可能的不影响当前操作。
- Module 命名空间，一个数据对象有时候太复杂，例如订单数据与员工数据没有关系，强行放一起有些乱，可以分多个模块按其功能对数据进行划分设计多个State，这样也方便认知与解耦。
5.
router(路由）的作用：实现不同组件间的切换。vue-router提供的两个元素：
（1）router-link:默认渲染为一个a标签（a链接）；
（2）router-view:用来当作占位符，将来路由规则匹配到的组件会展示到这个router-view中去。
6.Vue项目文档结构
7.常用标签
- (1):<li></li> 定义列表项目,可用在有序列表（<ol>）、无序列表（<ul>）和菜单列表（<menu>）中。
- (2):<ol></ol> 定义了一个有序列表. 列表排序以数字来显示。使用<li> 标签来定义列表选项。
- (3):<ul></ul> 定义无序列表。将 <ul> 标签与 <li> 标签一起使用，创建无序列表。
示例1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>有序列表:</p>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<p>无序列表:</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
运行结果：
示例2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
