熱乎乎的第二篇來了,這幾天有項目纏身,沒有及時更新,在下實在抱歉css
前一章咱們介紹了腳手架的搭建,本章開始正式開發,廢話很少說,咱們直接開發一個後臺管理系統,ui框架用神器element ui
,api數據咱們本身模擬,用mock.js
。html
剛搭起的框架有一堆亂七八糟的文件和文件夾,我不認識它們,它們也不認識我,憋着急,讓它們自我介紹一下。vue
npm run build
以後產生的一坨東西,都在這裏 ,開發完後,把它們直接扔到你的web服務器上,就是上線嘍。看完你們的自我介紹,相信你差很少能認識它們了,那咱們接下來就安裝一下開發用到的一些依賴。node
npm install element-ui --save-dev
,完成以後瞅一眼package.json文件,看到這個就證實安裝成功了。npm install mockjs --save-dev
。上邊安裝的插件,咱們把他們引入項目,讓全部的組件都能調用,也就是所謂的全局引入,打開src下的main.js,引入element。是否是so easy。webpack
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
複製代碼
準備工做終於完成了,立刻就要開始寫代碼了,是否是有點小激動,稍安勿躁,首先咱們得把vue的那個歡迎頁面給他改造一下,你們先打開src下的App.vue,它是用來存放咱們全部的頁面組件的,也就是首頁。其中<router-view/>
實際上是一種簡寫,傳統寫法是<router-view></router-view>
,明白了吧,它就是個標籤。只不過這樣寫可讓咱們的代碼看起來比較高端,別別打我。。這個標籤放的是咱們的路由頁面,好比說咱們在路由裏註冊了一個組件,當路由到相應的組件時,這個標籤裏就映射對應的組件。ios
//App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
...
</style>
複製代碼
上邊的img標籤,也就是vue歡迎頁面的那個大log,把它刪掉就行。可是你會發現這個App.vue裏並無歡迎頁上那一大堆亂碼啊。它們是怎麼顯示出來的呢?請打開src下的components下的HelloWorld.vue,看到了吧在這裏,那這個組件又是怎麼變成首頁的呢,繼續打開src下的router下的index.js,註釋:import HelloWorld from '@/components/HelloWorld'
這一段有兩個地方注意,那個‘@’是什麼鬼?,若是你感興趣的話能夠打開webpack.base.conf.js
裏的alias
,不感興趣的話請略過,總之這個@,指的是咱們的src目錄,翻譯過來就是import HelloWorld from '../components/HelloWorld
,當咱們的目錄層級很深的話,就不用一直../了,有木有很方便。第二點須要注意的是,引入某個組件的時候,咱們能夠省略後綴.vue,反正能偷懶就偷懶。path: '/'
裏的斜槓,就表明首頁,若是咱們改爲path: 'test'
,那麼你的地址欄裏就是對應的http://localhost:8080/#/test,懂了嗎?git
//index.js
import Vue from 'vue' //引入vue
import Router from 'vue-router' //引入路由
import HelloWorld from '@/components/HelloWorld' //引入HelloWorld.vue組件
Vue.use(Router)
export default new Router({
routes: [
{
path: '/', //路由的路徑
name: 'HelloWorld', //路由名稱
component: HelloWorld //對應的組件
}
]
})
複製代碼
手累了,先寫到這裏,你們本身消化一下,預知下事如何,且聽下回分解。我會盡快更新下一章哦。es6