組件拆分
先把項目搭建時生成的代碼給清了吧
現在static目錄下引入reset.css
接着在index.html引入，並且設置<meta>
有時候呢，為了讓代碼符合我們平時的編碼習慣，我們可以在ESLint進行設置，如下：
回到入口js文件main.js，為了好看，我們給它加上分號：
不過這是就會報錯了：
所以要到eslintrc.js去設置（上面對應可以去官網查看怎么配置），使它接受這樣的編碼方式。
現在的App.vue如下：
然后我們編寫組件來替換那三個區塊。
創建header組件
將header用到App.vue里面：
Components后面要有空格。
這里還要安裝一個stylus-loader依賴，不然會報錯。
這里提供一個依賴包的安裝方法：到package.json，在里面添加所需要的最新版本的包，然后再cnpm install ，這樣就可以添加到node_modules里面了，運行cnpm run dev。
基本的組件結構就是這樣：
接下來再利用flex布局設置它的樣式。
vue-router
因為在單頁應用中，內容區塊有三部分，所以這時候要用到路由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變化還是挺大的。
可以參考下面兩個鏈接:
官網的寫法：http://router.vuejs.org/zh-cn/essentials/getting-started.html
參考：https://segmentfault.com/q/1010000007929093/a-1020000007929260
如果使用模塊化機制編程，導入Vue和VueRouter，要調用 Vue.use(VueRouter)。在通過use()這個方法，相當於安裝插件。
參照官網給的vue-router的過程：
// 0. 如果使用模塊化機制編程，導入Vue和VueRouter，要調用 Vue.use(VueRouter) // 1. 定義（路由）組件。 // 可以從其他文件 import 進來 const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar</div>' } // 2. 定義路由 // 每個路由應該映射一個組件。 其中"component" 可以是 // 通過 Vue.extend() 創建的組件構造器， // 或者，只是一個組件配置對象。 // 我們晚點再討論嵌套路由。 const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] // 3. 創建 router 實例，然后傳 `routes` 配置 // 你還可以傳別的配置參數, 不過先這么簡單着吧。 const router = new VueRouter({ routes // （縮寫）相當於 routes: routes }) // 4. 創建和掛載根實例。 // 記得要通過 router 配置參數注入路由， // 從而讓整個應用都有路由功能 const app = new Vue({ router }).$mount('#app') // 現在，應用已經啟動了！
App.vue的模板：
main.js：
當然，這里還有用到很多組件：goods、seller、rating，所以還要創建。比如：
ratings：
最終完成的結果如下：
這里還有一個問題：就是在我們進入這個頁面的時候，頁面是不會加載內容出來，需要我們收訂去點擊goods、ratings、seller三塊中的一塊才可以。為了有內容，這是我們就要用到導航了，頁面加載直接導航到goods的內容。所以要添加這一句：
router.push('/goods');
http://router.vuejs.org/zh-cn/essentials/navigation.html
注意，這個router.push('/goods')要寫在app之前的位置。
一些vue2.0的修改可以看這里：https://segmentfault.com/a/1190000006623100
接下來就是寫樣式了。
還有一個樣式就是高亮
當頁面呈現出來后，我們可以在查看元素里面可以看到，當我們點擊某一項時，會自動添加一個router-link-active的class，所以可以直接配置這個class的樣式就可以出現點擊后高亮了。
.router-link-active color: rgb(240, 20, 20)
1像素border實現
border-bottom: 1px solid rgba(7, 17, 27, 0.1)
直接在.tab加這句話可以實現，但是在移動端看到的就不是這樣的，因為手機端有個dpr的概念：http://mobile.51cto.com/web-484304.htm物理像素是設備像素的兩倍。
https://segmentfault.com/a/1190000004538413
怎么做到1像素？
因為比較通用，所以定一個通用文件：mixin.styl
然而這里並沒有實現1像素，需要對它進行縮放：
添加一個類：border-1px，再建一個base.styl
要依賴所有的公共樣式，用一個index.styl
接着再main.js引入index.styl
還要在webpack做配置
這樣我們就可以通過這種方式去引用common：import 'common/stylus/index.styl';
重新運行，出問題了：
這是因為在之前圖標字體的icon.styl中src依賴的是font下面的目錄，這個現在就不行了，改成這樣：
總結一像素的實現：偽類+縮放（用一個class）
這樣基本框架已經搭建好了，接下來就來開發組件。