前言
最近开始学习vue2.0，但看完后完全不知道要如何开始一个项目，网上找了半天也没找到个如何一步步搭建项目出来的文章，于是在github上找到了一个开源项目clone下来用作学习参考。在此也写下记录来总结下自己的学习过程。
自己对es6，vue2.0的这种模块化项目构建方式十分十分不熟悉，除了js和页面布局的基础，基本属于新手起步(本人现在水平，仅供参考:es6以前学习过一遍，但一直也没使用过，现在基本忘光了，就记得个let、const了。vue只接触过1，而且没有做过移动端。目前本人工作中使用的是angular1和ionic来做移动端，现在学习这个也是希望能更新下自己的知识，主要的是想学习下这种项目构建方式，熟悉webpack等工具，慢慢过渡到使用es6和熟悉模块化、工程化的思想)。这篇文章也希望将来能帮到一些同样基础的小伙伴能在之后的学习过程中有一个借鉴，同时也希望看到这篇文章的大腿能指点一些学习中问题和不足，感谢！
这篇文章属于自己边学边写，可能更新过程中，会有不少疏漏的地方和错误的地方，在这个过程中我也会进行修改，请知悉！
学习项目地址 -- jeneser
一.项目下载与运行
通过git clone拷贝下整个项目到本地，然后通过npm run dev看下效果
遇到的问题:
1.在此我遇到了第一个问题，运行npm run dev时狂报错，之后发现是8080端口被占用，找了半天也没找到谁在占用端口 - -
解决方法:
1.修改douban/build/dev-server.js中的port
var uri = 'http://localhost:' + '80'
devMiddleware.waitUntilValid(function () {
console.log('> Listening at ' + uri + '\n')
})
module.exports = app.listen(80, function (err) {
if (err) {
console.log(err)
return
}
// when env is testing, don't need open it
if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
opn(uri)
}
})
这里我是将port写死为固定的80端口，80可以为任意未被占用的端口。至此，项目已经可以在本地正常运行。
已找到问题来源，在本地的eclipse中开启了服务，占用了8080端口。
后续又有新发现，这个port的参数其实是取自douban/config/index.js中配置的值，这里设置了webpack dev的一些参数，其中将dev的端口设置了8080，如果你的端口也有占用情况，可以在这里修改为一个没被占用的端口或者结束掉占用即可。
二、创建项目文件夹、搭建项目基础
1.安装nodist(也可以用nvmw或直接全局安装随意，搞个node环境出来就行)、全局安装webpack和vue-cli。创建项目文件夹,通过vue init webpack 项目名创建项目模版
2.通过npm i来下载各依赖项
3.运行npm run dev来测试模版是否下载成功
遇到的问题
1.在第二步下载依赖时一直报错，查看日志发现是下载node-sass报错，在网上查找解决方(node-sass下载报错解决方案)如下：
解决方案
1)在运行npm i前，在根目录创建.npmrc文件(直接在目录中创建不被允许，可以通过ide软件先加载项目目录后，再在根目录创建自定义文件即可)
2)创建完成后在.npmrc文件中复制如下代码:
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/
electron_mirror=https://npm.taobao.org/mirrors/electron/
registry=https://registry.npm.taobao.org
需注意在发布时需将最后一行注释。
三、查看项目目录及文件
查看学习项目的目录构成，打开各个文件浏览下源码。对比浏览器中打开的页面，理清整个应用的搭建框架，跳转逻辑。
遇到的问题
1.在查看跳转逻辑时，未找到SubjectView.vue应该如何跳转过去
2.在查看router/index.js的源码是对router的配置生疏
解决方案
1.手动在浏览器中输入url http://localhost/#/pages/book/subject/2654496 随意输的 居然蒙出来一个
在写文档的时候突然发现这个url中的book有点眼熟啊，不就是在主页时点击header的图书跳转进来的页面地址嘛。那后续的部分估计就是在图书也点一个书后的地址了。随便点击一个书目试了试果然如此，同理去点了电影也进来了这个详情页面，正好这个也对应上了SubjectView.vue页面源码的图书电影两个if判断,real chun - -
2.重新去vue-router的官网学习了一遍,详细了解了一下嵌套路由children、命名路由name、动态路由匹配(动态路径参数/:id)、命名视图(一个页面中有多个router-view标签，分别展示不同的视图view)、重定向redirect。同时参考源码的路由配置index.js，对整个页面跳转逻辑有了比较清晰的理解。但对于vue-router的学习仍然比较初步，后续文档并没有看完，在后续可以进行补充学习。
四、认真学习vuex大坑
在看源码的过程中，发现数据，业务方法自己都没有理清顺序，数据在什么地方，为什么这么写，怎么实现数据传递，反正乱七八糟地啥都没看明白，因此，文档先写到这里，要去补vuex的坑了。 - -
参照官网看了一遍文档，目前只看到了modules，还没看完，先写下今天的总结：
在看到actions之后，对于整个vuex的整体思路有了大致的了解，明白了它的运作过程(仅限使用)。在这里对整个自己的理解稍作整理。
首先，State对象里放置的是数据，这里的数据目前的粗浅理解是那种需要进行请求的。
然后是Getters，额...忘记了(明天再去补一下)。
重新看了下getters，作用其实挺简单的，估计是看过就忘了。getters的作用在于，当我们取得数据并存入state中后，在实际的页面中想要使用数据时，发现有些数据我们想要对它进行一些处理，比如说5个字的标题，我们想让他在3个字后添加个逗号，那我们就可以在getters中定义个方法来对数据进行下处理，然后在页面中取getters方法中返回的值，而不是直接拿state的值。
之后是Mutations和Actions，这两个对象中放的都是方法，区别在于mutations中的方法是用于修改state中的数据的，而且只有在mutations中的方法才可以直接对state进行修改，特别注意的一点是这个修改必须是同步的，也就是说，mutations中的方法一执行state中的数据就必须即可生效，so，不能在这里进行异步操作，例如请求数据再赋值之类的。再之后是actions，既然mutations中要求不能进行异步，那肯定就必须要解决这个问题，所以需要进行异步操作时的函数就要写在actions中了。同时推荐引入一个自己习惯使用的promise语法，本例中使用的是superagent，但之前看官网好像推荐的是axios，可以进行下学习。这里的重点是，actions中异步请求完得到数据是不可以直接对state中的数据进行变动的，需要在actions中进行commit也就是调用mutations中已定义好的你需要使用的方法来对state进行变动。
最后是Modules，首先我们要明确一点是，数据肯定是在state中的，那当项目大，视图多时，不同的视图的数据、mutations、actions啥的全放一个文件中显然就不太合适了，不仅看着冗长，而且不易于后续的维护。因此Modules就是解决这个问题的，我们可以像例子中那样将不同view的store分别定义一个js文件例如book.js、movie.js等然后将各view所需的state、mutations等分别放入各自的文件中，在通过Modules分别引入进来，不仅使文件结构清晰，后续代码维护也方便不少。modules没看完，感觉水有点深，后面的命名空间啥的没仔细研究，大致过了一下，看的迷糊糊的，就当先有个印象，之后有需要再去研究。
其实在现在这个点，我最大的疑惑是vue文件中的script标签中定义的data数据和store中state中的数据，什么数据应该写在哪里，为啥这样写不是很理解。
对于数据该放哪里，目前的理解是只单纯作用与本view的一些数据例如一个v-if='flag'，来控制dom的显示隐藏，那这个flag就可以写在vue文件的data中，然后在methods中写个方法来改变它的值，其他的写到store中去。当然要是实在暂时搞不明白，全写store去得了。这个还需要后续认真研究下。
五、啥不会学啥
目前看来用vue2搭建一个单页面应用使用到的东西其实也不少,es6、vue2、vuex、vue-router、scss(可选)、一个好用的ui库、axios(数据请求)。
另外还要学习下webpack的基础知识，不求会写，但还是要看懂一些主要东西都是在设置啥，另外npm的package.json还是要学一下的。
六、主体搭建
其实到了这里，一个基础项目的搭建和框架的使用就有比较明确的认知了。通过vue-cli新建出项目主体，index.html、webapck的配置就都完成了，自己完善下main.js、写好router配置框架。就可以从app.vue开始写自己的.vue文件，开始页面制作了。路由可以在页面制作过程中慢慢去完善，当然如果你最初就有良好的构思，也可以直接写完，但一般在项目中都会不停改东西的吧。
七、发布
不会。
八、总结
这个例子的文件构建和写法思路其实就很符合我心中期望的前端模块化，估计再大型一些的项目文件的构建和js内容的书写上就又有区别了，但目前我也接触不到那么大的项目，还是先学好这个起步吧。
最后，这篇文章并没有啥技术性的东西，纯粹是一个上手思路，也是因为我自己在上手时搜了半天也没见到这种类似的文章，在开始强行入门时看着这么多文件，搞不清关系，看不懂逻辑，完全不知道我开始个项目要如何下手。因此记录下来自己的一个学习过程，给后续学习的小伙伴们一个借鉴，当然，文章中如果有疏漏，带偏了路概不负责呀。
6.8更新
在照着源码自己照搬时，写完hearderbar组件在运行时报错。对照报错信息发现是自己文件夹中依赖项不全，对照源码package.json和自己文件夹发现少了一些东西，补上后需重新 npm i，同时发现在webpack.config中缺少scss的rule，需手动添加
