vue.js （制作电商网站）知识点总结一 待补充

先丢官网 添加链接描述
推荐一个不错的视频教程网站添加链接描述

进入正题
先说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