組件拆分

先把項(xiàng)目搭建時(shí)生成的代碼給清了吧

現(xiàn)在static目錄下引入reset.css

接著在index.html引入，并且設(shè)置<meta>

有時(shí)候呢，為了讓代碼符合我們平時(shí)的編碼習(xí)慣，我們可以在ESLint進(jìn)行設(shè)置，如下：

回到入口js文件main.js，為了好看，我們給它加上分號(hào)：

不過這是就會(huì)報(bào)錯(cuò)了：

所以要到eslintrc.js去設(shè)置（上面對(duì)應(yīng)可以去官網(wǎng)查看怎么配置），使它接受這樣的編碼方式。

?

現(xiàn)在的App.vue如下：

然后我們編寫組件來替換那三個(gè)區(qū)塊。

創(chuàng)建header組件

將header用到App.vue里面：

Components后面要有空格。

這里還要安裝一個(gè)stylus-loader依賴，不然會(huì)報(bào)錯(cuò)。

這里提供一個(gè)依賴包的安裝方法：到package.json，在里面添加所需要的最新版本的包，然后再cnpm install ，這樣就可以添加到node_modules里面了，運(yùn)行cnpm run dev。

基本的組件結(jié)構(gòu)就是這樣：

接下來再利用flex布局設(shè)置它的樣式。

vue-router

因?yàn)樵趩雾搼?yīng)用中，內(nèi)容區(qū)塊有三部分，所以這時(shí)候要用到路由vue-router

http://router.vuejs.org/zh-cn/installation.html

同樣通過package.json來安裝。

vue-router的用法：http://router.vuejs.org/zh-cn/essentials/getting-started.html

vue-router1.x與vue-router2.0變化還是挺大的。

可以參考下面兩個(gè)鏈接:

官網(wǎng)的寫法：http://router.vuejs.org/zh-cn/essentials/getting-started.html

參考：https://segmentfault.com/q/1010000007929093/a-1020000007929260

如果使用模塊化機(jī)制編程，導(dǎo)入Vue和VueRouter，要調(diào)用 Vue.use(VueRouter)。在通過use()這個(gè)方法，相當(dāng)于安裝插件。

參照官網(wǎng)給的vue-router的過程：

// 0. 如果使用模塊化機(jī)制編程，導(dǎo)入Vue和VueRouter，要調(diào)用 Vue.use(VueRouter)// 1. 定義（路由）組件。 // 可以從其他文件 import 進(jìn)來 const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar</div>' }// 2. 定義路由 // 每個(gè)路由應(yīng)該映射一個(gè)組件。 其中"component" 可以是 // 通過 Vue.extend() 創(chuàng)建的組件構(gòu)造器， // 或者，只是一個(gè)組件配置對(duì)象。 // 我們晚點(diǎn)再討論嵌套路由。 const routes = [{ path: '/foo', component: Foo },{ path: '/bar', component: Bar } ]// 3. 創(chuàng)建 router 實(shí)例，然后傳 `routes` 配置 // 你還可以傳別的配置參數(shù), 不過先這么簡(jiǎn)單著吧。 const router = new VueRouter({routes // （縮寫）相當(dāng)于 routes: routes })// 4. 創(chuàng)建和掛載根實(shí)例。 // 記得要通過 router 配置參數(shù)注入路由， // 從而讓整個(gè)應(yīng)用都有路由功能 const app = new Vue({router }).$mount('#app')// 現(xiàn)在，應(yīng)用已經(jīng)啟動(dòng)了！

?

App.vue的模板：

main.js：

當(dāng)然，這里還有用到很多組件：goods、seller、rating，所以還要?jiǎng)?chuàng)建。比如：

ratings：

?

最終完成的結(jié)果如下：

這里還有一個(gè)問題：就是在我們進(jìn)入這個(gè)頁面的時(shí)候，頁面是不會(huì)加載內(nèi)容出來，需要我們收訂去點(diǎn)擊goods、ratings、seller三塊中的一塊才可以。為了有內(nèi)容，這是我們就要用到導(dǎo)航了，頁面加載直接導(dǎo)航到goods的內(nèi)容。所以要添加這一句：

router.push('/goods');

http://router.vuejs.org/zh-cn/essentials/navigation.html

?

注意，這個(gè)router.push('/goods')要寫在app之前的位置。

一些vue2.0的修改可以看這里：https://segmentfault.com/a/1190000006623100

接下來就是寫樣式了。

還有一個(gè)樣式就是高亮

當(dāng)頁面呈現(xiàn)出來后，我們可以在查看元素里面可以看到，當(dāng)我們點(diǎn)擊某一項(xiàng)時(shí)，會(huì)自動(dòng)添加一個(gè)router-link-active的class，所以可以直接配置這個(gè)class的樣式就可以出現(xiàn)點(diǎn)擊后高亮了。

.router-link-activecolor: rgb(240, 20, 20)

1像素border實(shí)現(xiàn)

border-bottom: 1px solid rgba(7, 17, 27, 0.1)

直接在.tab加這句話可以實(shí)現(xiàn)，但是在移動(dòng)端看到的就不是這樣的，因?yàn)槭謾C(jī)端有個(gè)dpr的概念：http://mobile.51cto.com/web-484304.htm物理像素是設(shè)備像素的兩倍。

https://segmentfault.com/a/1190000004538413

怎么做到1像素？

因?yàn)楸容^通用，所以定一個(gè)通用文件：mixin.styl

然而這里并沒有實(shí)現(xiàn)1像素，需要對(duì)它進(jìn)行縮放：

添加一個(gè)類：border-1px，再建一個(gè)base.styl

要依賴所有的公共樣式，用一個(gè)index.styl

接著再main.js引入index.styl

還要在webpack做配置

這樣我們就可以通過這種方式去引用common：import 'common/stylus/index.styl';

重新運(yùn)行，出問題了：

這是因?yàn)樵谥皥D標(biāo)字體的icon.styl中src依賴的是font下面的目錄，這個(gè)現(xiàn)在就不行了，改成這樣：

總結(jié)一像素的實(shí)現(xiàn)：偽類+縮放（用一個(gè)class）

這樣基本框架已經(jīng)搭建好了，接下來就來開發(fā)組件。

?

轉(zhuǎn)載于:https://www.cnblogs.com/Chen-XiaoJun/p/6249338.html

總結(jié)

以上是生活随笔為你收集整理的项目vue2.0仿外卖APP（四）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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