github.com/wangzhuo-web/vue.js 我的github-spa列表页小功能代码地址
(因为在线demohttps://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,通过<router-link>来嵌套标签,属性to完成指定,最后通过<router-view>来显示。
做完 cnpm run dev运行一下,就实现了。