思路
把App.vue作为入口，然后通过路由之类的方法分配两个页面，一个是首页indexPage，另一个是新闻的详情内容页，morePage，然后在首页上面分为三个组件，分别是：top，banner，和content组成。
1.jpg
系统自带图画画的，别介意，将就下下
工具
编辑器：vscode
浏览器：chrome
UI库：mint
Ajax：axios
准备
首先新建一个vue项目
vue init webpack 你的项目名字
（ps，路由选项打开，预想中会用到）
cd 你的项目名字
cnpm install
（ps，我用了淘宝镜像，这些安装vue的时候应该都有）
cnpm install mint-ui -S
（加载mintui库）
cnpm install axios
（加载axios）
npm run dev
装载完了一系列的文件可库，首先第一步是先在文件里引入打开目录
项目名》src》main.js
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)
加上上面代码到顶部，引入mint的一些相关内容
其次删除一些不用的东西
项目名》src》assets 里面的logo图片
项目名》src》components 里面的hello文件
这时候看着浏览器会发现报错了，因为原本文件是有应用到上面删除的内容，所以还要修改一下东西，修改如下：
项目名》src》App
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app',
components: {}
}
</script>
<style>
</style>
将其删减到如此
项目名》src》router》index
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: '',
component:
}
]
})
同样删减到如此，此时看浏览器的话应该没有报错了，但是是一个空白页面。然后再新建几个文件准备等下的开始工作
项目名》src 新建images文件夹（用于装载一些图片）
项目名》src》components 新建四个vue文件：indexpage，top，banner，content
2.jpg
完成后的目录应该是这样的，准备工作差不多了（忘了没写什么后面写到再补吧）那么接下来就可以开始正式编写代码内容了。
开始
打开
项目名》index.html
<meta name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
在head中加入上面代码，上面代码具体意义，可以看看这一篇文章的介绍=>介绍文章
然后，我们是用src中的App文件作为入口文件，映射到想到的内容上面，该怎么做呢，我想到的是直接路由连接过去，路由为初始首页的时候，页面显示的是indexpage的页面，而indexpage上面装载这三个组件页面，top，banner，和content，这是我的思路，所以我就按着这样的思路做下去。
打开
项目名》src》ruoter》index
import Indexpage from '@/components/indexpage'// 引入indexpage页面
export default new Router({
routes: [
{
path: '/',
name: '首页',
component:Indexpage
}
]
})
加入上面的代码，使得App页面上的<router-view></router-view> 中显示的是indexpage页面的内容，然后再编辑indexpage页面，在里面载入三个组件页面
打开
项目名》src》components》indexpage
<template>
<div>
<!-- 使用组件标签 -->
<my-top></my-top>
<my-banner></my-banner>
<my-content></my-content>
</div>
</template>
<script>
// 引入组件页面
import Top from './top'
import Banner from './banner'
import Content from './content'
export default {
name: 'indexpage',
// 注册组件
components: {
'my-top': Top,
'my-banner': Banner,
'my-content': Content
},
data () {
return {
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
这时候相关的页面联系就建立了，而你看浏览器的时候会是还是一篇空白的，那是因为当中的top，banner，content里面还是没有内容，你只要加些东西进去，就应该可以看到相关的显示，例如
打开（其他两个页面也如此加些内容，就不一一写出）
项目名》src》components》top
<template>
<div class="top">
{{ msg }}
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'top'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
加入内容后看到的浏览器会是如此的
3.png
使用了chrome移动端模式浏览观看
那么接下来做的就是top部分的内容了
打开
项目名》src》components》top
top部分，在mint的ui库上面有相关的组件，而我们之前已经引用了mint，所以，直接到他们那扒过来修改下使用就可以了=>mint官网
<template>
<div class="top">
<mt-header>
<router-link to="/" slot="left">
<!-- img用到的是一个类似原知乎日报app上的三横的图片 -->
<img src=“../images/navigation.png”>
<!-- $router.name是获取路由里面的name的值，这就是为什么之前在路由配置的时候，加上了name：首页的原因 -->
<h1 class="title fl">{{ $route.name }}</h1>
</router-link>
</mt-header>
</div>
</template>
<script>
export default {
name: 'top',
data() {
return {
msg: 'top'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.top img {
width: 30px;
height: 30px;
margin-top: 13px;
}
.top .title {
height: 55px;
line-height: 55px;
font-size: 20px;
color: #fff;
margin-left: 20px;
}
</style>
如上面的代码，框架直接拿mint的过来，然后自己修改下内容加些样式一个top的组件就完成了(上面<img src=“../images/navigation.png”>用了中文字符)
4.png
结束
top部分就此结束，虽然样式是做出来了，但是不知道所走的思路方向对不对，还有就是当中可能有些内容的实现会有更优的方法，如有不足，请各位不吝赐教，谢谢（鞠躬）
网友评论