cms-手机信息分享系统

这是一个移动端的信息系统,使用的是vue+mint-ui开发,效果如下:

一.创建项目

1.创建项目命令:

vue init webpack cms

2.下面是各自选项

说明:在dev里面加一个–open空格,可以自动打开浏览器.

3.安装mint-ui框架

cnpm install mint-ui -S

在main.js里面引入:

// 引入mint-ui和css(记得自己引入css)
import MintUI from "mint-ui"
Vue.use(MintUI);
import "mint-ui/lib/style.min.css"

在App.vue里面使用一个header看效果

在App.vue下面再引入tabbar;

关闭严格模式(如果一开始开启了eslint模式关闭的方法),下面改为false后记得要重启.

这样就变得很干净了

二.开始主页

1.将helloworld.vue改为home.vue,里面的内容全部删除,只添加一个标准的轮播图

bug经历:但是发现轮播图并没有出来,开始我一直以为是样式问题,尝试修改不同的样式发现并没有卵用,看了底层代码发现它会经常请求document.body,开头部有一个这个会与document.body会有冲突,查阅资料发现!DOCTYPE html这个是防止某些ie浏览器会产生一些怪异行为而增加的,而这个ie是针对pc端的,而mint-ui是移动端的,所以我们可以不用它,删除掉它发现就正常了

2.安装axios和使用axios

cnpm i axios -s;npm run dev

上面";npm run dev"是连着开启服务,这样更方便.

在main.js里引入aixos

import Axios from "axios";
Vue.prototype.$axios =Axios;
Axios.defaults.baseURL="https://www.sinya.online/api/";//配置基地址

未完待续