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

3 篇文章 0 订阅

mimi

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

前端仓库: https://gitee.com/yango520/mimi

前端预览demo传送门

后端跟后台仓库: https://gitee.com/yango520/messageBoard

后台预览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报错的注意事项 ,点击这里查看

为了移动端自配,将引入外部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
img
img
img
img

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值