vue - blog開發(fā)學(xué)習(xí)1

1、安裝vue-cli

　　vue intall -g vue-cli

2、創(chuàng)建項目

　　vue init webpack nblog

3、按提示要求配置項目

? Project name nblog ? Project description 學(xué)習(xí)bolg開發(fā) ? 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、創(chuàng)建完成之后，用webstorm導(dǎo)入項目，如下圖

5、啟動項目，項目默認的主頁

6、為了方便開發(fā)，會使用iviewui

需要在main.js中添加：

import iView from 'iview'Vue.use(iView)

?

7、改造項目

創(chuàng)建自己的主頁路由home.vue(頂級路由，其他所有路由的內(nèi)容都要渲染到該路由)

在src/components下創(chuàng)建home.vue

home.vue中布局：上中下布局使用iview的Layout標(biāo)簽，上側(cè)顯示為菜單（固定上側(cè)不動）、中（內(nèi)容顯示區(qū)域）、下（待定）

?

?8、頂部菜單路由，采用最簡單的形式，點擊手也是，主體部分會心事相應(yīng)的內(nèi)容

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>關(guān)于我</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>

其他的也類似（一開始就是個簡單的布局，后序內(nèi)容陸續(xù)添加）

?這樣頁面的基本功能添加完畢

posted @ 2019-05-26 18:51 巡山小妖N 閱讀(...) 評論(...) 編輯 收藏

總結(jié)

以上是生活随笔為你收集整理的vue - blog开发学习1的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。