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开发很重要. 在此建议, ...
随机推荐
- Codeforces 1140C(贪心+堆)
题面 传送门 题意: 给出长度为n的序列b,t,定义一个子序列的值为\(\min\{ b_i\} \times \sum t_i\),求所有子序列中值最大的一个,输出最大值 分析 假如固定某个b[i] ...
- java 自适应响应式 网站 源码 SSM 生成 静态化 手机 平板 PC 企业站源码
前台: 支持四套模版, 可以在后台切换 系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JSTL,网站后台采用freemaker静态化模版引擎生成html 2.因为是生成的html,所以访问 ...
- shells - 有效登录 shell 的路径名
描述 /etc/shells 是一个文本文件,其中包含有效登录 shell 的路径全名. chsh(1) 需要参考这个文件,并且其他程序也可以查询该文件.有些程序从这个文件判断用户是不是标准用户.比如 ...
- Codeforces 1188B 式子转化
思路:看到(a + b)想到乘上(a - b)变成平方差展开(并没有想到2333), 两边同时乘上a - b, 最后式子转化成了a ^ 4 - ka = b ^ 4 - kb,剩下的就水到渠成了. 0 ...
- curl分析请求的各个部分耗时情况
curl 命令提供了 -w 参数,解释如下 -w, --write-out Make curl display information on stdout after a completed tran ...
- R2CNN论文思路记录
Rotational region cnn 我们的目标是检测任意方向的场景文本,与RRPN类似,我们的网络也基于FasterR-CNN ,但我们采用不同的策略,而不是产生倾斜角度建议. 我们认为RPN ...
- Spring 讲解(六)
如何理解 Spring 中的 AOP 一.AOP 的概述 AOP(Aspect Oriented Programming):面向切面编程,通过预编译方式和运行期动态代理来实现程序功能的统一维护的一种技 ...
- JUC线程池
原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11443644.html newFixedThreadPool 重用指定数目(nThreads)的线程, ...
- redis-持久化、主从复制、集群
持久化 RDB.AOF(redis.conf) 主从复制 redis.conf 集群 redis-trib.rb.ruby相见如下链接http://www.cnblogs.com/wuxl360/p/ ...
- djanjo中url路由匹配规则是啥意思
一,django路由匹配规则的本质是通过正则表达式对用户的url进行匹配. 1,r 是正则表达式中防止转义的符号,例如在python/n代表换行,加上r就不换行了. 2,$ 正则表达式中表示以什么什么 ...