# webpackvueDemo

**Repository Path**: glzlanson/webpackvueDemo

## Basic Information

- **Project Name**: webpackvueDemo
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-03-02
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vip 项目

## *********
## vue 的双向绑定  来自于  
## Object.defineProperty(obj,'userName',{
##      get:function(){}
##      set:function(val){}
## }) ;
## *********


## webpack vue mui mint-ui
## cms


## 使用（传统方式）命令行把修改过后的代码上传到码云
## git status  //查看状态
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.npm i vue-resource -S
3.使用 vue-resource 的 this.$http.get 获取数据
4.使用 v-for 循环渲染，每个 item 项都要有一个key

## 改造九宫格区域的样式

## 改造  新闻资讯 路由链接

## 新闻资讯 页面 制作
1. 绘制界面，使用mui中的 media-list.html
2. 使用 vue-resource 获取数据
3. 渲染真实数据

## 时间格式包： npm i moment -S

## 实现 新闻资讯列表


 ## npm i babel-plugin-transform-remove-strict-mode

 ## npm i vue-preview -S


 ## 尝试在手机上 去进行项目的预览和测试
 1.保证自己的手机可以正常运行；
 2.保证手机 和 开发项目的电脑 处于同一个局域网中。

 3.打开自己的项目中package.json 文件，在dev脚本中，添加一个 --host 指令，把 当前电脑的wifi ip地址，设置为 --host 的指令值；


 ## npm i vuex -S