vue+webpack app項(xiàng)目(1)

概述

項(xiàng)目中會(huì)用到的插件 vue-router vue-resource

打包工具 webpack

依賴環(huán)境 node.js

start

安裝vue開發(fā)的模板

全局安裝 vue-cli
$ npm install -g vue-cli#
//創(chuàng)建一個(gè)基于 "webpack" 模板的新項(xiàng)目
$ vue init webpack my-project#
//安裝依賴,走你
$ cd my-project
$ npm install$ npm run dev

腳手架工具如下:



-build中配置了webpack的基本配置、開發(fā)環(huán)境配置、生產(chǎn)環(huán)境配置等

-config中配置了路徑端口值等

-node_modules為依賴的模塊

-src放置組件和入口文件

-static放置靜態(tài)資源文件

-index.html文件入口

webpack中的一些解釋
new HtmlWebpackPlugin 這個(gè)插件的作用是把output輸出的文件自動(dòng)插入到html里

這里不使用elint檢查代碼

step1

router.js


這里使用vue-router 中文基本用法可參見http://router.vuejs.org/zh-cn/basic.html

把原來腳手架中的new Vue換成了路由實(shí)現(xiàn),最容易忘記的一點(diǎn)是Vue.use(VueRouter);

這里的Vue.extend()暫時(shí)先定義兩個(gè)臨時(shí)的組件,main.vue為入口文件,組件內(nèi)要添加路由視圖標(biāo)簽<router-view></router-view>

這里的router.start(app,"#app")的app是require進(jìn)來main,'#app'是添加從index.html的id為app入口
ps:這里只是點(diǎn)一下要點(diǎn),真正改動(dòng)的文件在github上看看喔
現(xiàn)在的效果是:



this is bar 上面那部分是main.vue里面的,
this is bar 則是有router-view渲染出來的

step2

這里要后續(xù)要引用zepto開發(fā),所以這里要在webpack.base.conf.js中做一個(gè)配置
externals: { 'zepto': 'Zepto' },


上截圖解釋這個(gè)參數(shù),所以要加html中加如zepto的鏈接,然后在其他地方就可以引用了
app中要切換多個(gè)路由為了不代碼耦合將map映射部分提取到一個(gè)router.js文件中
只是簡(jiǎn)單地把組件和映射放到router.js中,然后在app.js中傳入router

router.js

app.js增加的代碼


現(xiàn)在頁面還是和之前一樣沒有變化,基本框架和路由搭建完成,然后就可以開始封裝組件

step3 main.vue組件編寫

-app的主頁底部一般都有幾個(gè)tab鍵是固定不變的,這里實(shí)現(xiàn)四個(gè)tab鍵分別是首頁,發(fā)現(xiàn),通知,我-這里使用mobile sui搭建ui,在main.vue<style>中引用sui樣式
@import './assets/css/sm.css';@import './assets/css/sm-extend.min.css';



-這樣已經(jīng)能呈現(xiàn)一個(gè)底部導(dǎo)航,但是不太符合vue組件化的概念,畢竟重復(fù)了四次的tab代碼,所以這里要用slot進(jìn)行內(nèi)容分發(fā)
--這里要理解slot元素,先上一張官方的解釋



已更新到(3)可到我主頁查看,不求打賞,只求github小星星

https://github.com/sally2015/vue-project github上同步最新代碼

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 當(dāng)當(dāng)當(dāng),上課了,死黨們匆忙的跑進(jìn)了教室,老師也走進(jìn)了教室,高陽還在座位上屁顛屁顛的玩著手機(jī)。完全沒看到老師進(jìn)來。上...
    木顏歌教主閱讀 249評(píng)論 0 0
  • 程序設(shè)計(jì)中,計(jì)算機(jī)需要把源程序翻譯成目的程序,目的程序中的指令是由( )和( )兩部分組成的。 【答案】...
    0207_孫玲玉閱讀 291評(píng)論 2 1
  • 我雖然已經(jīng)是個(gè)大人了 但并不是一個(gè)成熟的大人 偶爾也是會(huì)有 想要離家出走的心情
    千崖Bravo閱讀 387評(píng)論 0 0