# mimi

**Repository Path**: yango520/mimi

## Basic Information

- **Project Name**: mimi
- **Description**: 基于vue的前端留言板项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 1
- **Created**: 2020-02-04
- **Last Updated**: 2022-06-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### mimi

>介绍： 该项目基于vue的移动端项目，没有使用UI框架，后端基于node express，
##### [前端仓库: https://gitee.com/yango520/mimi](https://gitee.com/yango520/mimi)
##### [后端跟后台仓库: https://gitee.com/yango520/messageBoard](https://gitee.com/yango520/messageBoard)



``` 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
```
### 需要安装的依赖
```
npm i axios -S  //http请求

npm install style-loader sass-loader node-sass --save-dev  //安装sass

```
### vue 中引入sass报错的注意事项 ，[点击这里查看](https://blog.csdn.net/weixin_39644462/article/details/103866825)



### 为了移动端自配，将引入外部flexible.js进行适配，将flexible.js放在/static/js/目录下，然后在/src/main.js下引入
```
import '../static/js/flexible.js'
```

#### 因为没有用到UI框架，然后自己封装了Toast跟msgBox弹窗 /src/commponents下


### 配置别名 在build/webpack.base.conf.js
```
alias: {
	'vue$': 'vue/dist/vue.esm.js',
	'@': resolve('src'),
	'common': resolve('src/components'),
	'styles': resolve('src/styles'),
	'pages': resolve('src/pages'),
	'api': resolve('src/api')
}
```


### 当页面跳转的时候，新页面会在上一页所在的位置，如何在跳转新页面的时候新页面在顶部位置呢？
```
//在router/index.js 默认输出 router，则在main.js里写
import router from './router'

router.afterEach((to, from, next) => {
  window.scrollTo(0, 0)
});
```
#### 暂时没办法详细讲解， 可以看源码，源码写的也比较粗糙

#### 下面看一下效果图
![img](https://img-blog.csdnimg.cn/20200227155513303.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTY0NDQ2Mg==,size_16,color_FFFFFF,t_70)
![img](https://img-blog.csdnimg.cn/20200227155541120.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTY0NDQ2Mg==,size_16,color_FFFFFF,t_70)
![img](https://img-blog.csdnimg.cn/20200227155910159.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTY0NDQ2Mg==,size_16,color_FFFFFF,t_70)
![img](https://img-blog.csdnimg.cn/20200227155938552.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTY0NDQ2Mg==,size_16,color_FFFFFF,t_70)
![img](https://img-blog.csdnimg.cn/20200227155956123.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTY0NDQ2Mg==,size_16,color_FFFFFF,t_70)
![img](https://img-blog.csdnimg.cn/20200227160015102.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTY0NDQ2Mg==,size_16,color_FFFFFF,t_70)
![img](https://img-blog.csdnimg.cn/20200227160033330.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTY0NDQ2Mg==,size_16,color_FFFFFF,t_70)