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 <987097855@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) npmvue-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>

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

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

posted @ 2019-05-26 18:51 巡山小妖N 阅读(...) 评论(...) 编辑收藏

vue - blog开发学习1相关推荐

vue - blog开发学习6
vue - blog开发学习6 1.问题,如下图,使用iviewui中的card导致页面不能出现滚动条(不太会弄,在网上查了一个vue组件vuescroll,因此使用这个做滚动条) 2.安装vuesc ...
vue - blog开发学习5
vue - blog开发学习5 基本功能和后台联调 1.首页的所有博客因为是前后台都是本地开发,所以前端vue需要设置proxy:修改/config/index.js中的这个proxyTable p ...
vue - blog开发学习4
vue - blog开发学习4 1.新建页面的修改,集成富文本编辑 edit-post.vue(新建和修改都用该组件) <template><div class="edit ...
vue - blog开发学习3
vue - blog开发学习3 1.添加less 和less-loader支持 npm install less less-loader --save-dev 2.新建main.less,将这个样式添 ...
vue - blog开发学习2
vue - blog开发学习2 首页博客列表的开发 1.修改index.vue,使能够支持列表功能 <template><div><PostList v-for=&quo ...
vue - blog开发学7
vue - blog开发学7 将基本的项目部署到linux上(前后台只是实现了基本的功能,本次只是记录一些基本的开发流程,完善,等后续) 1.linux环境准备(我用的是阿里云服务器) ①jre.my ...
【Vue前端开发学习】第2章，Vue项目目录结构
文章目录前言一.新增router文件夹及其配置方法二.新增store文件夹及其配置方法三.index.html.App.vue.main.js三者之间的联系前言上一章节,通过Pycha ...
五、Vue模块化开发学习笔记——JavaScript原始功能、匿名函数的解决方案、使用模块作为出口、CommonJS、ES6 export和import的使用
一.JavaScript原始功能 -在网页开发的早期,js制作作为一种脚本语言,做一些简单的表单验证或动画实现等,那个时候代码还是很少的. 那个时候的代码是怎么写的呢? 直接将代码写在<scri ...
Vue 官网学习笔记
VUE介绍 vue git 地址:https://github.com/vuejs/vue/projects Vue 官网教程地址:https://cn.vuejs.org/v2/guide/inst ...

vue - blog开发学习1

vue - blog开发学习1

vue - blog开发学习1相关推荐

最新文章

热门文章