# Vue项目

**Repository Path**: wehome-h/vue_project

## Basic Information

- **Project Name**: Vue项目
- **Description**: Vue移动端项目实战
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-02-24
- **Last Updated**: 2020-12-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

**先运行 cnpm install 命令安装依赖**

# Vue移动端项目

## 第一天

### 知识点

#### webpack4.0 使用 Vue 的问题

webpack4.0 在使用 Vue 还需在 webpack.config.js 中导入 const VueLoaderPlugin = require('vue-loader/lib/plugin') 模块

#### 使用码云托管代码

1. Git 全局设置：
~~~
git config --global user.name "YellowHero"
git config --global user.email "375702088@qq.com"
~~~

2. 创建 git 仓库
~~~
git init
git add .
git commit -m "信息"
git remote add origin https://gitee.com/yellowhero/JD.git
git push -u origin master
~~~

3. 已有仓库
~~~
在项目根目录
git remote add origin https://gitee.com/yellowhero/JD.git
git push -u origin master
~~~

#### mui

1. 关于 webpack 打包 mui 报错，解决办法：
  在 mui.css 文件，找到background-imgage: 包含 svg 的路径注释掉

2. 若需要 mui 的 icon 图标，则需要在项目引入 icons-extra.css 文件 同时把 mui-icons-extra.ttf 放入项目中

#### 页面切换动画（重点）

1. 用 transition 标签包裹 App.vue 文件中的 `<router-view>` 标签 

2. 制定动画类
  ~~~
  .v-enter,
  .v-leave-to {
    opacity: 0;
  }

  .v-enter {
    transform: translateX(100%);
  }
  .v-leave-to {
    position: absolute;
    transform: translateX(-100%)
  }

  .v-enter-active,
  .v-leave-active {
    transition: all 0.5s ease;
  }
  ~~~

## 第二天

### 知识点

#### 在一个组件中导入另一个组件