vue-cms(2)

src

dist

.babelrc

package.json

webpack.config.js

README.md

dist 里有：

bundle.js

index.html:  div.#id    <script src="bundle.js">

src 里有：

组件   图片  装库的lib

组件分：

货物  新闻  图片   subcomponents   tabbar

subcomponents 里有  轮播图、评论、货物numbox、购物车numbox   数字选择器

tabbar 里有  首页、会员、购物车、搜索 4个页面

首页、购物车 做了

首页布局：最顶端有 vueheader    轮播图、九个链接（新闻资讯、图片分享、商品购买等）

新闻资讯、图片分享、商品购买做了

li里 有一层 router-link  router-link里 是 图片+字  router-link 由 a标签 改作

router.js

main.js

index.html

App.vue

subcome

main

lib\mui

css\app.css

被忽略的知识：

router-link 上的 链接， 是 浏览器 url

通过router.js，将  router-link 设置的 浏览器 url 与 实际的组件 对应

每个 .vue 文件 都有 三部分：t   s   s

index.html:

<div id="app"></div>                 //定义vue容器

main.js:

入口文件，进入网站就调用main.js

注意：App.vue  不是通过index.html  上的 <router-view> 引入的，它是 被 import  到 main.js

然后  它就是 整个项目 的布局

import vue,vue-router,vue-resource,vuex,router，mint-ui，mui，app

var vm=newVue（{

  el: '#app',
  render: c => c(app),            //把引入的App.vue渲染
  router, // 1.4 挂载路由对象到 VM 实例上
  store // 挂载 store 状态管理对象

}）

App.vue:

template模板( <template> )：

header头部（除了 返回，没有其他功能） 

<router-view>  

底部tabbar（4个router-link，当点击其中一个，相应的组件就会渲染到<router-view>区域）

<script>

<style>

主要是样式和布局，不涉及功能

router.js:

整个项目的路由配置，除了subcomponents里的，src=》components都在这

1.import vue-router

2.import XX  from './'            //导入路由组件

3.var router=new VueRouter（{}）          //创建路由对象

4.export  default  router                      //暴露路由对象

HomeContainer.vue:

（4个router-link   中只有它 和  ShopcarContainer   被写功能了）

被渲染到App.vue  中的  <router-view>

它有 6个 功能区，被写的，router-link的 有4个，新闻资讯、商品购买、图片分享