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

每天一小步,前端一大步

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运行一下,就实现了。

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




最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 师从格雷厄姆,巴菲特的同门师兄。 1955年成立了沃尔特•施洛斯合伙人公司,管理自己和合伙人的资金,直到2002年...
    天涯知己杨再成阅读 327评论 0 0
  • 昨天下午,内勤办公室忽然传来一阵欢呼声,原来是某同事收到了一束花,同事是没结婚的女孩子,也没听说有男朋友。办公室的...
    心遥远阅读 268评论 0 0
  • 漂泊久了总想归家,这片薄薄树叶,让我想起故乡那满山厚厚的落叶,风吹扬起一片片叶舞翩迁,风停,落下一阵阵叶雨。踩在厚...
    沧海一粟贝阅读 262评论 0 1