vue - blog开发学习1
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 © 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的更多相关文章
- vue - blog开发学习5
基本功能和后台联调 1.首页的所有博客 因为是前后台都是本地开发,所以前端vue需要设置proxy:修改/config/index.js中的这个proxyTable proxyTable: { '/a ...
- vue - blog开发学习2
首页博客列表的开发 1.修改index.vue,使能够支持列表功能 <template> <div> <PostList v-for="(item,index) ...
- vue - blog开发学习6
1.问题,如下图,使用iviewui中的card导致页面不能出现滚动条(不太会弄,在网上查了一个vue组件vuescroll,因此使用这个做滚动条) 2.安装vuescroll cnpm instal ...
- vue - blog开发学习4
1.新建页面的修改,集成富文本编辑 edit-post.vue(新建和修改都用该组件) <template> <div class="editor"> &l ...
- vue - blog开发学习3
1.添加less 和less-loader支持 npm install less less-loader --save-dev 2.新建main.less,将这个样式添加到home.vue中的cont ...
- vue - blog开发学7
将基本的项目部署到linux上(前后台只是实现了基本的功能,本次只是记录一些基本的开发流程,完善,等后续) 1.linux环境准备(我用的是阿里云服务器) ①jre.mysql,Nginx基本上这些就 ...
- Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发
===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...
- 前端开发 Vue -1windows环境搭建Vue Node开发环境
解决几个疑问: 想学习下vue.js,我理解的它是一个前端的框架,主要作用是对数据的处理,和juqery类似,所以不太理解为什么要在nodejs中npm install vue呢?在html文件中引入 ...
- Android开发学习路线图
Android开发学习方法: Android是一个比较庞大的体系,从底层的Linux内核到上层的应用层,各部分的内容跨度也比较大.因此,一个好的学习方法对我们学习Android开发很重要. 在此建议, ...
随机推荐
- hibernate保存数据到mysql时的中文乱码问题
因为hibernate底层使用的是jdbc的技术,所以我参考了别人使用jdbc保存数据到mysql里面时解决乱码问题的方法! 首先要告诉数据库要插入的字符串的字符集,mysql 默认使用的字符集是 l ...
- python介绍(变量,if,while)
python介绍(变量,if,while): python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹 打发时间,决心开发一个新 ...
- Nginx的应用之虚拟主机
开始前请确保selinux关闭,否则当配置完虚拟主机后,尽管权限或者网站目录都正确,访问的结果也是403 nginx的虚拟主机有三种方式: 一.基于域名的虚拟主机 (1)创建对应的web站点目录以及程 ...
- STM8硬件设计注意事项
1.中断 STM8的外部中断和STM32不一样,每个端口PX只有1个中断 2.ADC 1)Additional AIN12 analog input is not selectable in ADC ...
- Educational Codeforces Round 69 E - Culture Code (最短路计数+线段树优化建图)
题意:有n个空心物品,每个物品有外部体积outi和内部体积ini,如果ini>outj,那么j就可以套在i里面.现在我们要选出n个物品的一个子集,这个子集内的k个物品全部套在一起,且剩下的物品都 ...
- 开源的android客户端,ghost网站
https://github.com/TryGhost/Ghost-Android http://docs.ghostchina.com/zh/
- 第6篇如何访问pod
一.通过 Service 访问 Pod: 我们不应该期望 Kubernetes Pod 是健壮的,而是要假设 Pod 中的容器很可能因为各种原因发生故障而死掉.Deployment 等 con ...
- Python向方法中传递自定义类型参数
定义类型 class Fish: def __init__(self,x): self.num = xclass Turtle: def __init__(self,y): self.num = yc ...
- Bootstrap 网页实例
代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <met ...
- PHP实现笛卡尔积算法
概念 在数学中,两个集合X和Y的笛卡儿积(Cartesian product),又称直积,表示为 X × Y.设A.B是任意两个集合,在集合A中任意取一个元素x,在集合B中任意取一个元素y,组成一个有 ...