vue初体验-单页web应用练习

每天一小步，前端一大步

github.com/wangzhuo-web/vue.js 我的github-spa列表页小功能代码地址

(因为在线demo https://wangzhuo-web.github.io/vue.js /是个空网页就不展示了哈)下面是效果截图

---

       刚接触vue，npm（包管理）、webpack（打包的）、组件化、cli（脚手架）、路由等名词可能让你有点懵，先对他们有大概了解，再做练习的时候就会慢慢理解了。

      安装步骤百度有很多相关教程：我就概述一下（！强烈推荐淘宝的cnpm，要不后续会因为网速或者墙下载失败）。

      安装node.js->cnpm（淘宝的镜像）->vue-cli（光用script也行，但这样可以把模板组件一起输出，前后端分离）->建项目（项目里的各文件是干什么的可以好好理解下，如src是放项目代码的，index.html是最后装载的主html，component里放各个组件）->安装依赖（因为还依靠好多其他的功能，webpack会把各个内容打包成js、css等文件，像图片也不用放在一个图里减少请求，它就会帮你做的）。

---

      安装完成就要考虑如何实现spa了，顾名思义就是不刷新（据说比ajax还厉害），靠路由来切换锚点，实现内容的转换。知乎上关于spa优缺点的说明 明白思路就开始敲-思考-敲-思考-敲了。

一、先在component中建立每个组件（单文件组建的结构了解下哈）template，script，style实现了本组件的结构、行为和样式。（因为还不太熟悉怎么设置假数据，所以一个内容一个组件了。）

二、建立路由（建项目时候会提示install vue-router？，之后在官网上下插件进来也行），设置每个页面对应的路径锚点。

三、把路由给vue，通过来嵌套标签，属性to完成指定，最后通过来显示。

做完 cnpm run dev运行一下，就实现了。

刚开始学习，可能有理解不对的地方，如有错误希望大家多多指正。