1.项目结构

$ vue init webpack-simple news
$ npm install vuex vue-router axios style-loader css-loader -D

2.main.js

import Vue from 'vue'
import App from './App.vue'
// 引入 路由
import VueRouter from 'vue-router'
// 引入 路由配置文件
import routes from './router.config' Vue.use(VueRouter); // 创建 路由
const router = new VueRouter({
mode:'history', // 删除 url 中的'#'号
routes // routes 等价于 routes:routes
}); require('./assets/css/base.css'); // 全局引入 new Vue({
el: '#app',
router,
render: h => h(App)
})

3.入口文件  App.vue

<template>
<div id="app">
<NavView></NavView>
<router-view></router-view>
<FooterView></FooterView>
</div>
</template> <script>
/**
* 引入 组件
*/
// 头部导航
import NavView from './components/Nav.vue'
// 中间内容
import HomeView from './components/Home.vue'
// 底部选项卡
import FooterView from './components/Footer.vue' export default {
components:{
NavView,
FooterView
}
}
</script> <style lang="scss">
@import './assets/css/index.css';
</style>

4.组件部分 components

(1)Nav.vue

<!-- 顶部选项卡 -->
<template>
<div id="nav">
<div class="nav">
<ul>
<router-link to="/home" tag="li" active-class="active">
<a href="javascript:;">首页</a>
</router-link>
<router-link to="/follow" tag="li" active-class="active">
<a href="javascript:;">关注</a>
</router-link>
<router-link to="/column" tag="li" active-class="active">
<a href="javascript:;">栏目</a>
</router-link>
</ul>
</div>
</div>
</template>

(2)Footer.vue

<!-- 底部选项卡 -->
<template>
<div class="foot-btn">
<ul>
<!--首页-->
<router-link class="home" to="/home" tag="li">
<a href="javascript:;"></a>
</router-link>
<!--关注-->
<router-link class="write" to="/follow" tag="li">
<a href="javascript:;"></a>
</router-link>
<!--我的-->
<router-link class="my" to="/user-info" tag="li">
<a href="javascript:;"></a>
</router-link>
</ul>
</div>
</template>

(3)Home.vue  首页

<!-- 首页 -->
<template>
<div id="home">
<div class="content mt30">首页部分</div>
</div>
</template> <script>
export default{
}
</script> <style scoped>
.mt30{
margin-top: 30px;
}
</style>

(4)Follow.vue  关注页

<!-- 关注页 -->
<template>
<div id="follow">
<div class="content mt30">关注部分</div>
</div>
</template> <style scoped>
.mt30{
margin-top: 30px;
}
</style>

(5)Column.vue  栏目页

<!-- 栏目页 -->
<template>
<div id="column">
<div class="content mt30">栏目部分</div>
</div>
</template> <style scoped>
.mt30{
margin-top: 30px;
}
</style>

(6)UserInfo.vue  我的页

<!-- 我的 -->
<template>
<div class="content">
<div class="header">
<h2><img src="../assets/img/headimg.png" alt=""/></h2>
<div class="user-box">
<router-link to="/user-login">登录</router-link>
<router-link to="/user-reg">注册</router-link>
</div>
<ul class="clear">
<li>
<span>0</span>
<p>关注</p>
</li>
<li>
<span>0</span>
<p class="end">粉丝</p>
</li>
</ul>
</div>
<div class="docList">
<ul>
<li class="gk-text">
<i></i>
<p>公开博文</p>
<b></b>
<span>0</span>
</li>
<li class="mm-text">
<i></i>
<p>秘密博文</p>
<b></b>
<span>0</span>
</li>
<li class="cg-text">
<i></i>
<p>草稿箱</p>
<b></b>
<span>0</span>
</li>
<li class="sc-text">
<i></i>
<p>收藏夹</p>
<b></b>
<span>0</span>
</li>
<li class="my_cz">
<i></i>
<p>收藏夹</p>
</li>
</ul>
</div>
</div>
</template> <style scoped>
@import '../assets/css/mydoc.css';
</style>

5.路由配置文件 router.config.js

/**
* 配置 路由
*/
// 导入组件
import Home from './components/Home.vue'
import Follow from './components/Follow.vue'
import Column from './components/Column.vue'
import UserInfo from './components/UserInfo.vue' // 导出路由数组
export default [
{ // 首页
path:'/home',
component:Home
},
{ // 关注页
path:'/follow',
component:Follow
},
{ // 栏目页
path:'/column',
component:Column
},
{ // 我的页
path:'/user-info',
component:UserInfo
},
{ // 配置默认路由
path:'/',
redirect:'/home' // 路由重定向
},
{
path:'*',
redirect:'/home' // 路由重定向
}
]

6.效果图

vue2.0 仿手机新闻站(二)项目结构搭建 及 路由配置的更多相关文章

  1. vue2.0 仿手机新闻站(一)项目开发流程

    vue仿手机新闻站: 1.拿到静态页面,直接用vue边布局,边写 2.假数据 没有用任何UI组件,切图完成 做项目基本流程: 1.规划组件结构 Nav.vue Header.vue Home.vue ...

  2. vue2.0 仿手机新闻站(七)过滤器、动画效果

    1.全局过滤器 (1)normalTime.js  自定义 将 时间戳 转换成 日期格式 过滤器 /** * 将 时间戳 转换成 日期格式 */ export const normalTime = ( ...

  3. vue2.0 仿手机新闻站(六)详情页制作

    1.结构 2.配置详情页路由 router.config.js /** * 配置 路由 */ // 导入组件 import Home from './components/Home.vue' impo ...

  4. vue2.0 仿手机新闻站(五)全局的 loading 组件

    1.组件结构 index.js const LoadingComponent = require('./Loading.vue') const loading = { install: functio ...

  5. vue2.0 仿手机新闻站(四)axios

    1.axios的配置 main.js import Vue from 'vue' import App from './App.vue' // 引入 路由 import VueRouter from ...

  6. vue2.0 仿手机新闻站(三)通过 vuex 进行状态管理

    1.创建 store 结构 2.main.js  引入 vuex 3. App.vue  组件使用 vuex <template> <div id="app"&g ...

  7. 项目vue2.0仿外卖APP(二)

    vue-cli开启vue.js项目 github地址:https://github.com/vuejs/vue-cli Vue.js开发利器vue-cli,是vue的脚手架工具. 在工地上,脚手架是工 ...

  8. 本地运行github上的vue2.0仿饿了么webapp项目

    在vue刚刚开始流行的时候,大多数人学习大概都见到过这样的一个项目吧,可以作为学习此框架的一个模板了 github源码地址:https://github.com/RegToss/Vue-SPA 课程教 ...

  9. Vue2.0仿饿了么webapp单页面应用

    Vue2.0仿饿了么webapp单页面应用 声明: 代码源于 黄轶老师在慕课网上的教学视频,我自己用vue2.0重写了该项目,喜欢的同学可以去支持老师的课程:http://coding.imooc.c ...

随机推荐

  1. JavaScript手册

    今天偶然找到javasc的手册地址=>js的手册

  2. Java的代码转C#

    推荐个网站:点击打开链接 细节上有些小问题

  3. springboot的api测试

  4. tcp协议 tcpip协议 http协议,IP,DNS,端口号

    每当看到HTTP协议,tcp/ip协议,TCP协议总是蒙圈:在这里先记录一下,方面自己查看 TCP协议:TCP(Transmission Control Protocol 传输控制协议)是一种面向连接 ...

  5. CMake 使用笔记

    记录 CMake 相关知识. Prelude:读文档一定要有耐心! 问题一 CLion: CMakeLists.txt 中 set(CMAKE_CXX_FLAGS -Wall) 不起作用 Soluti ...

  6. Ant自动打包

    在ant的官网http://ant.apache.org进行下载后apache-ant-1.8.2包 解压(存放的路径不要有中文字符) 把ant里的lib设置到环境变量:E:\Android\apac ...

  7. linux之AWK实战【转】

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAn8AAADvCAIAAAAM1SXGAAAgAElEQVR4nO2dz8s125XXHx9oTXMHUZ

  8. 兼容FF和IE的tooltip 鼠标提示框

    原文发布时间为:2009-09-07 -- 来源于本人的百度文章 [由搬家工具导入] http://www.walterzorn.de/tooltip/tooltip.htm 【请见该页面】 Down ...

  9. 网络上面好用的webserice方法【公开】

    原文发布时间为:2009-07-27 -- 来源于本人的百度文章 [由搬家工具导入] 本帖转自 http://www.webxml.com.cn/zh_cn/web_services.aspx?off ...

  10. split一些分开一些特殊字符

    查看 api ,你就会发现 String.split(String regex); 也就是说里面的参数是正则表达式.如果是一些普通的字符,它就会当做普通字符给拆分字符串.可是 ?是特殊字符,想让按照 ...