1、安装vue-cli

  vue intall -g vue-cli

2、创建项目

  vue init webpack nblog

3、按提示要求配置项目

? Project name nblog
? Project description 学习bolg开发
? Author nxzJIA <@qq.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm vue-cli · Generated "nblog".

4、创建完成之后,用webstorm导入项目,如下图

5、启动项目,项目默认的主页

6、为了方便开发,会使用iviewui

需要在main.js中添加:

import iView from 'iview'

Vue.use(iView)

7、改造项目

创建自己的主页路由home.vue(顶级路由,其他所有路由的内容都要渲染到该路由)

在src/components下创建home.vue

home.vue中布局:上中下布局使用iview的Layout标签,上侧显示为菜单(固定上侧不动)、中(内容显示区域)、下(待定)

8、顶部菜单路由,采用最简单的形式,点击手也是,主体部分会心事相应的内容

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/home'
import Index from '@/components/index'
import Create from '@/components/create'
import Edit from '@/components/edit'
import PostClass from '@/components/post-class'
import AboutMe from '@/components/about-me' Vue.use(Router) export default new Router({
mode:'history',
routes: [
{
path: '/',
name: 'Home',
component: Home,
children:[
{
path: '/index',
name: 'Index',
alias:'/',
component: Index
},
{
path: '/create',
name: 'Create',
component: Create
},
{
path: '/edit',
name: 'Edit',
component: Edit
},
{
path: '/postClass',
name: 'PostClass',
component: PostClass
},
{
path: '/aboutMe',
name: 'AboutMe',
component: AboutMe
},
]
}, ]
})

home.vue

<template>
<div class="layout">
<Layout>
<Header :style="{position: 'fixed', width: '100%'}">
<Menu mode="horizontal" theme="dark" active-name="1">
<div class="layout-logo">
<img src="static/img/logo.png" alt="">
</div>
<div class="layout-nav">
<MenuItem name="1" to="index">
<Icon type="ios-navigate"></Icon>
首页
</MenuItem>
<MenuItem name="2" to="postClass">
<Icon type="ios-keypad"></Icon>
类别
</MenuItem>
<MenuItem name="3" to="create">
<Icon type="ios-analytics"></Icon>
新建
</MenuItem>
<MenuItem name="4" to="edit">
<Icon type="ios-paper"></Icon>
修改
</MenuItem>
<MenuItem name="5" to="aboutMe">
<Icon type="ios-paper"></Icon>
关于我
</MenuItem>
</div>
</Menu>
</Header> <Content :style="{margin: '88px 20px 0', background: '#fff', minHeight: '500px'}">
<router-view></router-view>
</Content>
<Footer class="layout-footer-center">2011-2016 &copy; TalkingData</Footer>
</Layout>
</div>
</template> <script>
export default {
name: "home"
}
</script> <style scoped>
@import "../static/css/home.css"; </style>

index.vue

<template>
<div>
index
</div>
</template> <script>
export default {
name: "index"
}
</script> <style scoped> </style>

其他的也类似(一开始就是个简单的布局,后序内容陆续添加)

这样页面的基本功能添加完毕

下一篇 :https://www.cnblogs.com/nxzblogs/p/10923014.html

vue - blog开发学习1的更多相关文章

  1. vue - blog开发学习5

    基本功能和后台联调 1.首页的所有博客 因为是前后台都是本地开发,所以前端vue需要设置proxy:修改/config/index.js中的这个proxyTable proxyTable: { '/a ...

  2. vue - blog开发学习2

    首页博客列表的开发 1.修改index.vue,使能够支持列表功能 <template> <div> <PostList v-for="(item,index) ...

  3. vue - blog开发学习6

    1.问题,如下图,使用iviewui中的card导致页面不能出现滚动条(不太会弄,在网上查了一个vue组件vuescroll,因此使用这个做滚动条) 2.安装vuescroll cnpm instal ...

  4. vue - blog开发学习4

    1.新建页面的修改,集成富文本编辑 edit-post.vue(新建和修改都用该组件) <template> <div class="editor"> &l ...

  5. vue - blog开发学习3

    1.添加less 和less-loader支持 npm install less less-loader --save-dev 2.新建main.less,将这个样式添加到home.vue中的cont ...

  6. vue - blog开发学7

    将基本的项目部署到linux上(前后台只是实现了基本的功能,本次只是记录一些基本的开发流程,完善,等后续) 1.linux环境准备(我用的是阿里云服务器) ①jre.mysql,Nginx基本上这些就 ...

  7. Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发

    ===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...

  8. 前端开发 Vue -1windows环境搭建Vue Node开发环境

    解决几个疑问: 想学习下vue.js,我理解的它是一个前端的框架,主要作用是对数据的处理,和juqery类似,所以不太理解为什么要在nodejs中npm install vue呢?在html文件中引入 ...

  9. Android开发学习路线图

    Android开发学习方法: Android是一个比较庞大的体系,从底层的Linux内核到上层的应用层,各部分的内容跨度也比较大.因此,一个好的学习方法对我们学习Android开发很重要. 在此建议, ...

随机推荐

  1. Vue 创建组件的两种方法

    地址:https://blog.csdn.net/cofecode/article/details/74634301 创建组件的两种方法 1.全局注册 2.局部注册 var child=Vue.ext ...

  2. C# String相关

    1.去掉字符串中的所有的空 string s = " select * from \r\n where a =b "; s = Regex.Replace(s, @"\s ...

  3. Win7装VS2015报错"安装包丢失或损坏"的解决办法

    在Win7上安装VS2015的过程中,可能会出现下图错误: 这种情况,多半是应为Win7里面缺少了两个证书: Microsoft Root Certificate Authority 2010 Mic ...

  4. EnumPrinters

    https://blog.csdn.net/jilong17/article/details/6663734 已解决.开始hook的spoolss.dll里面的EnumPrinterW函数,应该hoo ...

  5. h5py库

    参考文献:http://docs.h5py.org/en/latest/high/dataset.html h5py文件存放数据集(dataset)和组(group). dataset类似数组类的数据 ...

  6. hadoop HA集群的安装

    1.hadoop集群规化 ip 主机名 安装软件 角色 运行进程 10.124.147.22 hadoop1 jdk.zookeeper.hadoop namenode/zookeeper/jobhi ...

  7. Maven介绍及安装

      1.maven是一个管理第三方库的jar package 2.从该页面下载相应的Maven jar包(http://maven.apache.org/download.cgi),linux OS下 ...

  8. java基础学习笔记一

    一.JAVA访问控制修饰符 用于控制类中成员的可见性 1.public(公有):在任何地方可以访问 2.protected(受保护的):子夫类(即使字父类不在同一包)和本包中可以访问 3.defaul ...

  9. java.sql.SQLException: Illegal mix of collations (utf8mb4_general_ci,IMPLICIT) and (utf8mb4_0900_ai_ci,IMPLICIT) for operation '='

    查询视图时报错:java.sql.SQLException: Illegal mix of collations (utf8mb4_general_ci,IMPLICIT) and (utf8mb4_ ...

  10. loadRunner之接口测试

    接口测试需求: 1.脚本支持循环测试,并且每次测试的请求报文不一样(字段stbId每次请求不一样) 2.输出每次测试的请求报文和响应报文 3.根据响应报文判断接口调用是否成功 4.输出最终测试结果:循 ...