# vueApp

**Repository Path**: luxiaohai/vueApp

## Basic Information

- **Project Name**: vueApp
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2018-10-06
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#项目信息

#这是一个很牛逼的项目

##牛不牛逼，用心去感受，每一行代码中的诗情画意

###我们是用灵魂的程序员，所以我们的代码富有诗意

####主流开源协议的异同（https://www.oschina.net/news/74999/how-to-choose-a-license）

#####用传统方法把代码提交到码云

1、git add .
  
2、git commit -m "提交信息"

3、git push 


#制作首页APP组件
1、完成 Header 区域，使用的是 Mint-UI 中的header组件
2、制作底部的 Tabbar 区域， 使用的是 MUI 的 Tabbar.html
    +在制作 购物车 小图标的时候，操作：
    +把扩展图标的 CSS 样式拷贝到项目中
    +拷贝扩展字体库 ttf 文件到项目中
    +为购物车小图标添加样式 'mui -icon mui-icon-extra mui-icon-extra-cart
3、要做中间区域放置一个 router-view 来展示路由匹配到的组件

##改造 Tabbar 为 router-link

##设置路由高亮

##点击 Tabbar 中的路由链接展示对应的路由组件

##製作首頁輪播圖佈局

##加載首頁輪播圖數據
1、獲取數據， 使用 vue-resource

2、使用 vue-resource 的 this.$http.get 獲取數據  接口：https://locally.uieee.com/slides

3、獲取到的數據，要保存到 data 身上

4、使用 v-for 循環渲染每個 item 項

##九宫格布局 MUI

##新闻资讯 页面

1、界面 使用 MUI 中的 media-list.html

2、使用 vue-resource 获取数据

3、数据渲染

###实现 新闻资讯列表点击跳转到新闻详情

##新闻详情布局

##单独封装一个 comment.vue 评论子组件

1、单独创建 comment.vue 组件模板

2、在需要使用 comment组件的页面，先手动导入 comment 组件
    + import comment from './comment.vue'

3、在父组件中使用 components 属性将导入的组件注册为自己的子组件

4、将注册子组件时候的注册名称已标签的形式在页面中引用即可

##实现点击图片跳转到详情页面
1、在改造 li  成 router-link 的时候 需要使用tag属性指定渲染为哪种元素

##实现 详情页面的布局和美化，同时获取数据渲染页面

##实现图片详情中的缩略图功能
1、使用 插件 vue-preview 这个缩略图插件

##绘制 商品基本结构 美化

##尝试在手机上进行项目的预览和测试

1、要保证 手机 和开发项目的的电脑 处在同一个WiFi 环境中，也就是说 手机可以访问到电脑的IP

2、打开自己的项目中的 package.json 文件，在dev 脚本中 添加一个 --host 指令，把当前电脑的WiFi IP地址，设置为 --host 的指令值；
    +ipconfig 查看无线网的 IP 地址