
Vue实战项目
小斌斌阿
这个作者很懒,什么都没留下…
展开
-
Vue项目预热_环境配置
1. 安装node、npm查看是否安装成功:2. 注册码云账号3. 本地代码和线上代码关联在本地安装git,查看git是否安装成功:打开码云,找到设置:生成公钥:克隆项目到本地:4. 构建vue-cli项目全局安装vue-cli: npm install --global vue-cli创建一个基于webpack模板的新项目: vue init webpack travel查看项目: cd tr...原创 2018-06-05 13:22:13 · 354 阅读 · 0 评论 -
Vue项目预热_项目代码初始化
打开index.html,修改 <meta name="viewport" content="width=device-width,initial-scale=1.0">为:<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0,maximum-scale=1...原创 2018-06-05 14:41:18 · 450 阅读 · 0 评论 -
Vue项目首页_header区域开发
在项目中使用stylus:安装stylus: npm install stylus --save npm install stylus-loader --save创建Header子组件:<template> <div> this is header </div></template><script>ex...原创 2018-06-05 15:08:48 · 1035 阅读 · 0 评论 -
Vue项目首页_首页轮播图
创建新分支:把线上的分支拉到本地来:git pullgit checkout index-swiper轮播插件Vue-Awesome-Swiper使用稳定版本v2.6.7引入vue-awesome-swiper: npm install vue-awesome-swiper@2.6.7 --save全局引入vue-awesome-swiper:在main.js中引入:import VueAweso...原创 2018-06-05 21:39:57 · 2191 阅读 · 0 评论 -
Vue项目首页_图标区域
效果图:新建Icons.vue:<template> <div class="icons"> <swiper :options="swiperOption"> <swiper-slide v-for="(page, index) of pages" :key="index"> &原创 2018-06-05 22:53:11 · 570 阅读 · 0 评论 -
Vue项目首页_热销推荐组件、周末游组件开发
效果:新建Recommend.vue:<template> <div> <div class="title">热销推荐</div> <ul> <router-link tag="li" class="item border-bottom&原创 2018-06-05 23:16:46 · 253 阅读 · 0 评论 -
Vue项目首页_使用axios发送ajax请求
安装axios: npm install axios --save在Home.vue中发送一个ajax请求,然后把数据传递给子组件。在Home.vue中:import axios from 'axios'methods: { getHomeInfo () { axios.get('api/index.json') .then(this.getHomeInfoSucc...原创 2018-06-06 00:11:19 · 2765 阅读 · 0 评论 -
Vue项目首页_首页父子组件间的数据传递
{ "ret": true, "data": { "city": "北京", "swiperList": [{ "id": "0001", "imgUrl": "http://img1.qunarzz.com/piao/fusion/1801/1a/94428c6dea109402.j原创 2018-06-06 08:57:58 · 301 阅读 · 0 评论