# vue-object

**Repository Path**: WebsterW/vue-object

## Basic Information

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

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-object

> A Vue.js project

## Build Setup

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run all tests
npm test
```

For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).



### 1. 使用脚本家vue-cli创建
### 2. 修改服务器端口为9000，修改自动打开服务器，删除hello world演示部分
### 3. 添加开源协议
      + [主流开源协议之间有何异同？](https://www.zhihu.com/question/19568896)
### 4. 下载插件包：`mint-ui、vue-source、less、less-loader、node-sass、sass-loader、moment`等
### 5. git初始化 连接码云，上传代码
### 6. 完成 `Header` 和 `Tabbar`部分，未做精细优化
      + 1. `Header`部分是使用`mint-ui`的`Header`组件
      + 2. `Tabbar`部分使用`mui`中`Tabbar.html`的部分代码
      + 3. **注意，两个组件都引用了`css`样式**
### 7. 完成精细化操作，修改图标样式
      + 1. 购物车添加样式`mui-icon-extra mui-icon-extra-cart`
      + 2. 购物车图标在mui扩展图标页面内，需要复制扩展图标样式到css中并用`import`引入
      + 3. 另外需要将扩展图标`ttf`文件复制到`font`文件夹内
### 8. 设置`Tabbar`路由
      + 1. 安装路由
            ```
            // 1.1 导入路由包
            import VueRouter from 'vue-router'
            // 1.2 安装路由
            Vue.use(VueRouter)
            // 1.3 导入自身的路由模块
            import Router from './router/index.js'
            ```
      + 2. 将a标签改造成`router-link`，`href`属性改为`to`
      + 3. 设置路由高亮
         - 设置路由规则，
         ```
         linkActiveClass: 'mui-active'
         //  覆盖默认的路由高亮的类，默认的类叫router-link-active
         ```
      + 4. 点击Tabbar的路由链接，展现对应的的路由组件
         - 1.在src文件夹下新建一个名为components文件夹，在文件夹下新建tabbar文件夹，里面再新建4个对应的路由组件，命名分别是HomeContainer.vue、MemberContainer.vue等
      + 5. 配置路由组件，并与相应链接关联
### 9. 设置首页轮播图