vue-cli创建的vue项目学习
PS：这里有一些学习vue的视频资源，有需要的朋友可以去看看：https://fgk.pw/i/d0h05Lh2659
一、vue-cli创建的项目的目录结构及说明
参考：http://blog.csdn.net/qq_34543438/article/details/72868546?locationNum=3&fps=1
二、webpack简介
参考：http://zhaoda.net/webpack-handbook/index.html
三、学习
1、new 一个vue对象的时候你可以设置它的属性，其中最重要的包括三个，分别是data，methods，watch。
2、其中data代表vue对象的数据，methods代表vue对象的方法，watch设置了对象监听的方法
3、vue对象里的设置通过html指令进行关联
4、重要的指令包括
1）、v-text渲染数据
2）、v-if控制显示
3）、v-on绑定事件
4）、v-for循环渲染
5）、v-html
6）、{{}}
7）、v-show
8）、v-bind 属性绑定
5、使用v-for项目时，会报红线，说需要什么key之类的，那是因为在vue2.2.0+版本以上，需要key的，解决
文件-》首选项-》设置-》用户设置，然后找到
"vetur.validation.template": true 项,
然后复制，在右边粘贴并把值改为false即可
参考：https://www.cnblogs.com/ninicwang/p/7698217.html
四、总结
1、.vue文件通过打包（webpack）成html/js/css文件
2、.vue文件由template(html)、style(css)、script(js)三部分组成
3、安装了cnpm后，使用到npm的地方都可以用cnpm（一般用于在需要下载的地方时使用）
4、ESlint 方法检查器
5、使用vue脚手架初始化vue项目时指定一套模板，然后进入该模板，下载相应的依赖，这些依赖中，可以把vue项目转换成浏览器能识别的文件。这些依赖代码的执行是通过node.js来执行的，能把vue项目转换成前端的静态文件等。因此在本地时，需要安装node.js服务，为的就是运行这些依赖代码等。但是，在本地开发的vue项目是无法在生产环境上运行的，因为放到服务器上的一般是html/js/css等文件，vue项目的目录浏览器是无法识别的。所以我们需要打包命令，是为了把vue等文件，打包成浏览器能识别的代码。打包的作用就跟vue的项目通过node.js服务访问的作用是一样的。（类别：php文件（vue项目文件）无法直接在浏览器中打开的，但是通过服务器解释后，变成静态文件后即可在注意器访问。打包的作用就比如通过浏览器访问服务php文件后得到的内容，把网页源代码保存文件一样。这样，直接在浏览器打开这些文件就可以了，而无须通过浏服务）。
6、data是函数，data () { return {} } 返回组件中要用到的数据
methods是一个属性 method{}里面是组件里定义的函数/方法
7、 ：绑定一个方法，可传参
8、
9、
也可以不是一个字串，而是一个变量
10、[ ]表示数组 、{ }表示对象
11、vue指令里，操作的都是在data中定义的属性
12、 ：一个输入框架，并且数据绑定message属性
13、双向绑定：视图中的数据改变了，那么data中对应的属性数据也改变，同样，如果经过操作后，data的数据改变了，同样也会引起视图的改变。
14、watch:{} 监听数据的变动，用法多变：参考：http://blog.csdn.net/itkingone/article/details/69568498
15、父组件向子组件中传值，子组件可拿也可不拿，如果要拿的话，需要在子组件中通过props()来声明。
16、要使用其他组件时，要先引入其他组件所在的文件
import HelloWorld from './components/HelloWorld' （注意：HelloWorld后面缺少了.vue，完整应该是HelloWold.vue）
17、2.5版本的vue实例不是通过var vue = new vue({});来创建的，而是通过export default{}来创建的
18、name：应该是表示组件的名称吧
components: {component1,componet2}：注册使用到的组件 如：components: { HelloWorld}
在template中引入该组件
注意：在template中引入组件时，使用的组件的名字是将componets中注册的组件名字的驼峰的地方用-隔开，并且全小写，如：HelloWorld 就是 hello-world
19、使用自己创建的vue文件
创建自己的vue文件，包含三部分，template/script/style，其中在script中，必须有export default{ }，表示把当前的文件转成一个对象导出给外界使用，然后在使用到该vue文件的地方，需要先通过import来进行引入，并且指定一个别名。然后在data对象中，需要指定components，记住，这里指定的compontens必须要两个单词以上组成，并且单词的首字母都要大写（可以通过指定key-value的形式来形成这种形式）。然后在template中，将单词之间使用"-"来隔开，并且所有字母小写即可。
20、new vue({}) 与export defau的区别
var vm = new vue({}) 是为了实例化,而export default {}是导出模块,供其他模块进行调用, 这完全是两回事啊。
如果是引入的vue.js文件，那么一般来说是创建vue实例。但如果使用了webpack来开发，那么就使用export default，这个是es6的语法，打包完成后最终也是创建vue的实例。
21、指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。
22、在vue中，父子组件的关系可以总结为prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送信息。
23、slot：插槽 表示父组件往子组件中插入一段DOM
参考：https://cn.vuejs.org/v2/guide/components.html#%E5%8D%95%E4%B8%AA%E6%8F%92%E6%A7%BD
24、vm.$emit(event,[args...])：触发当前实例上指定的事件，附加参数都会传给监听器回调
参考：https://cn.vuejs.org/v2/api/#vm-emit
25、es6学习书籍
http://es6.ruanyifeng.com/#docs/let
26、在使用vue-router时，访问的url会自动带上#，如http://localhost:8080/#/，如果不需要/#/时，可以在net Router对象时，配多一个属性，mode: 'history',
参考：https://router.vuejs.org/zh-cn/essentials/history-mode.html
27、
28、main.js是vue.js的入口文件，在这里创建一个vue实例，指定网页的首页页面，以及要挂载到的地方。template指定了首页的模板，因为使用了webpack，因此，可以使用component来引入一个组件，这个组件就是网站的首页面。
router/index.js这个文件定义了路由，是给后面的路径跳转进行匹配使用的。
29、
<transition>
<keep-alive>
<router-view>router-view>
keep-alive>
transition>
30、链接跳转
方式一：
<router-link to="one">标题1router-link>
方式二：
<router-link :to="{path: '/two'}">标题2router-link>