先丟官網 添加鏈接描述
推薦一個不錯的視頻教程網站添加鏈接描述

進入正題
先說vue的頁面布局

<template><div class="about"><h1>This is an about page</h1></div> </template><script> export default {}</script><style scoped></style>

vue頁面分為三個部分，template主要寫html ，其余兩個相信大家都懂。<“style scoped > 中的 scoped 主要是為了使其私有化，及當前樣式只屬于當下模塊，不污染全局。
先說主頁

<template><div id="app"><el-container><el-header><Header /></el-header><el-main><!-- TODO: main.vue --><router-view/></el-main></el-container></div> </template>

電商網站中一般頂部是不變的，因此我們對整個架構先進行劃分，即header和body。代碼

就是我們的body

接著講路由配置，因為涉及到頁面跳轉
在router.js中

import Vue from 'vue' import Router from 'vue-router'Vue.use(Router)export default new Router({routes: [{path: '/healthy',name: 'healthy',component: () => import('./views/Healthy.vue')},] })

上面的基本不用怎么管，我們需要用的是的下面的幾行代碼，也就是以下幾行

{path: '/healthy',name: 'healthy',component: () => import('./views/Healthy.vue')},

我們只需要將我們寫好的頁面通過以上設置即可本地訪問到。
例如創建一個名為“Test.vue”文件，
{
path: ‘/text’,
name: ‘test’,
component: () => import(‘路徑，相對于router.js’)
},

更新中2018年11月29日21:05:51

總結

以上是生活随笔為你收集整理的vue.js （制作电商网站）知识点总结一 待补充的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。