基于vue+router+vuex的移动端留言板项目

雨点打透心脏的1/2处 2023-07-09 02:26 20阅读 0赞

### mimi ###

> 介绍： 该项目基于vue的移动端项目，没有使用UI框架，后端基于node express，

##### [前端仓库: https://gitee.com/yango520/mimi][https_gitee.com_yango520_mimi] #####

> [前端预览demo传送门][demo]

##### [后端跟后台仓库: https://gitee.com/yango520/messageBoard][https_gitee.com_yango520_messageBoard] #####

> [后台预览demo传送门 测试账号密码 mimi 123456][demo_ _ mimi 123456]

# 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报错的注意事项 ，[点击这里查看][Link 1] ###

### 为了移动端自配，将引入外部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][]  
![img][img 1]  
![img][img 2]  
![img][img 3]  
![img][img 4]  
![img][img 5]  
![img][img 6]

[https_gitee.com_yango520_mimi]: https://gitee.com/yango520/mimi
[demo]: http://mimi.xxiaoyuan.top
[https_gitee.com_yango520_messageBoard]: https://gitee.com/yango520/messageBoard
[demo_ _ mimi 123456]: http://mimi.xxiaoyuan.top/admin/
[Link 1]: https://blog.csdn.net/weixin_39644462/article/details/103866825
[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 1]: 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 2]: 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 3]: 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 4]: 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 5]: 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 6]: https://img-blog.csdnimg.cn/20200227160033330.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTY0NDQ2Mg==,size_16,color_FFFFFF,t_70