vue项目实例_vue搭建项目步骤「建议收藏」

vue项目实例_vue搭建项目步骤「建议收藏」1.vue-cli的安装参照博客http://www.cnblogs.com/zhengao/p/6606786.html每一个*.vue都包含三个部分:2.开始看项目看不懂项目运行的步骤以及没一个页面之间是如何组合的

1.vue-cli的安装参照博客

http://www.cnblogs.com/zhengao/p/6606786.html

每一个*.vue都包含三个部分:

vue项目实例_vue搭建项目步骤「建议收藏」

 

2.开始看项目看不懂项目运行的步骤以及没一个页面之间是如何组合的

然后自己搭建了脚手架,一步一步将思路理清,下面看具体例子。

这个Demo很简单就是页面的挑战,主要看模板template之间是如何使用的。

3.项目的目录:

vue项目实例_vue搭建项目步骤「建议收藏」

1).先看例子的运行结果:

vue项目实例_vue搭建项目步骤「建议收藏」

每一部分的代码:入口文件index.html和main.js不需要改动

App.vue更改一点样式:

vue项目实例_vue搭建项目步骤「建议收藏」

 

index.js是template模板的导入,和路由的注册

vue项目实例_vue搭建项目步骤「建议收藏」

就是最顶部栏链接的跳转,需要路由来支持,vue-router。

index.vue首页的模板,引入了一个头部和内容部分,

***注意引入标签的写法,要小写,如果有两个单词组合需要小写中间加上”-“;

vue项目实例_vue搭建项目步骤「建议收藏」

 

 NavBar.vue:页面的首部内容,

vue项目实例_vue搭建项目步骤「建议收藏」

 

 index.vue中的模板HomePage.vue

vue项目实例_vue搭建项目步骤「建议收藏」

2).最新页面new.vue代码:

vue项目实例_vue搭建项目步骤「建议收藏」

这几个模板都用到相同的模板NavBar.vue

ItemList.vue的代码:

vue项目实例_vue搭建项目步骤「建议收藏」

分类页面的模板Category.vue

vue项目实例_vue搭建项目步骤「建议收藏」

分类内容展示的代码:CategoryList.vue

vue项目实例_vue搭建项目步骤「建议收藏」

 

 4.以上就是三个部分的代码,主要学习了vue项目模板之间是如何组合的,还有页面交互路由的使用

vue-router。我也是小白,vue也正在学习中,有不到之处望多指正。

 

转载于:https://www.cnblogs.com/zhengao/p/6652982.html

今天的文章vue项目实例_vue搭建项目步骤「建议收藏」分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/67096.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注