组件嵌套

1. package.json详解

每个项目的根目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境
详情见资料“package-详解.json”中的相关注释

2. npm install/npm install xxx -S/npm install xxx -D/npm install xxx -g的区别

2.1 npm install

下载“package.json”中dependencies和devdependencies中配置的所有依赖模块，并保存到项目的node_modules目录

注1：在git clone项目的时候，项目文件中并没有node_modules文件夹，为什么呢？

2.2 npm install xxx -g

  全局安装，下载依赖模块，并保存到%node_home%\node_global\node_modules目录下

2.3 npm install xxx -S

  写入到package.json的dependencies对象，并保存到项目的node_modules目录

2.4 npm install xxx -D

  写入到package.json的devDependencies对象，并保存到项目的node_modules目录

注1：在git clone项目的时候，项目文件中并没有node_modules文件夹，为什么呢？

• 我们知道这个文件中(project_home\node_modules)保存的是我们项目开发中所使用的依赖模块。这个文件夹可能有几百兆大小，如果放到github上，其它人clone的时候会非常慢，这个时候就想到用一个package.json依赖配置文件解决这个问题。

• 这样每个人下载这个项目的时候，只需要进入该项目目录直接npm install npm就会到里面去找需要的函数库，也就是依赖。

注2：缩写命令的全称，注意大小写、-S,-D都是大写

• i/install
• -S/–save
• -D/–save-dev
• -g/–globa

注3：package.json文件里面的devDependencies和dependencies对象有什么区别呢？

• devDependencies里面的插件只用于开发环境，不用于生产环境，而dependencies是需要发布到生产环境的。
• 例如：gulp ，babel，webpack一般都是辅助工具，应该使用–save-dev安装到开发环境。
• 例如：vue ,react，应该使用–save 安装到生产环境。

3. vue项目结构说明

build文件夹： 这个文件夹主要是进行webpack的一些配置

• webpack.base.conf.js： webpack基础配置,开发环境,生产环境都依赖
• webpack.dev.conf.js： webpack开发环境配置
• webpack.prod.conf.js： webpack生产环境配置
• build.js： 生产环境构建脚本
• vue-loader.conf.js： 此文件是处理.vue文件的配置文件

config文件夹

• dev.env.js 配置开发环境
• prod.env.js 配置生产环境
• index.js 这个文件进行配置代理服务器，例如：端口号的修改

node_modules文件夹 存放npminstall时根据package.json配置生成的npm安装包的文件夹

src文件夹 源码目录(开发中用得最多的文件夹)

• assets 共用的样式、图片
• components
  业务代码存放的地方，里面分成一个个组件存放，一个页面是一个组件，一个页面里面还会包着很多组件
• router 设置路由
• App.vue vue文件入口界面
• main.js 对应App.vue创建vue实例，也是入口文件，对应webpack.base.config.js里的入口配置

static文件夹 存放的文件不会经过webpack处理，可以直接引用，例如swf文件如果要引用可以在webpack配置，对swf后缀名的文件处理的loader，也可以直接将swf文件放在这个文件夹引用。

package.json 这个文件有两部分是有用的：scripts里面设置命令以及在dependencies和devDependencies中，分别对应全局下载和局部下载的依赖包

4. 什么是*.vue文件

  *.vue 文件，是一个自定义的文件类型，用类似HTML的语法描述一个Vue组件。
   每个.vue文件包含三种类型的顶级语言块 <template>, <script> 和 <style>。
   这三个部分分别代表了 html,js,css。

注1：不能直接把html代码包裹在中，而是必须在里面方置一个html标签来包裹所有的代码。

一般情况是使用<div></div>标签包含其它的代码(保证只有一个根元素)
         <template>
           <div>...</div>
         </template>

注2：js代码写在

<script>
          export default {
             name: 'App'
          }
        </script>

注3：样式与以前的写法一样

5. 综合案例

首页-用户中心-用户
路由嵌套，关键代码：
{
path: ‘/UserCenter’,
name: ‘UserCenter’,
component: UserCenter,
children: [{
path: ‘UserInfo’,
name: ‘UserInfo’,
component: UserInfo,
}]
}
网站公共部分：头部(header.vue)和脚部(footer.vue)的创建和使用

注1：以 " / " 开头的嵌套路径会被当作根路径，所以子路由的 path 不需要添加 " / "

注2：ES6模块写法
模块名
index.js (模块主文件)
a.js
b.js

首页（Home.vue）

<template>
  <div>
    <h1>首页</h1>
    <div>
      <router-link to="/About">关于我们</router-link>
      <router-link to="/UserCenter">用户中心</router-link>
    </div>
    <div>
      </router-view>
    </div>
  </div>
</template>

<script>
  export default{
    name:'Home',
    data:function(){
      return{

      }
    },
    methods:{

    }
  }
</script>

<style>
</style>

关于我们（About.vue）

<template>
  <div>
    <h1>关于我们</h1>
  </div>
</template>

<script>
  export default{
    name:'About',
    data:function(){
      return{

      }
    },
    methods:{

    }
  }
</script>

<style>
</style>

修改密码（UpdatePwd.vue）

<template>
  <div>
    <h1>修改密码</h1>
  </div>
</template>

<script>
  export default{
    name:'UpdatePwd',
    data:function(){
      return{

      }
    },
    methods:{

    }
  }
</script>

<style>
</style>

用户信息（UserCenter.vue）

<template>
  <div>
    <h1>用户信息</h1>
    <div>
      <router-link to="/Register">用户注册</router-link>
       <router-link to="/UpdatePwd">修改密码</router-link>
    </div>
    <div>
      <router-view/>
    </div>
  </div>
</template>

<script>
  export default{
    name:'UserCenter',
    data:function(){
      return{

      }
    },
    methods:{

    }
  }
</script>

<style>
</style>

用户注册（Register.vue）

<template>
  <div>
    <h1>用户注册</h1>
  </div>
</template>

<script>
  export default{
    name:'Register',
    data:function(){
      return{

      }
    },
    methods:{

    }
  }
</script>

<style>
</style>

index.js(关键代码)

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/views/Home'
import About from '@/views/About'
import UserCenter from '@/views/UserCenter'
import Register from '@/views/Register'
import UpdatePwd from '@/views/UpdatePwd'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/HelloWorld',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/About',
      name: 'About',
      component: About
    },
    {
      path: '/UserCenter',
      name: 'UserCenter',
      component: UserCenter
    },
    {
      path: '/Register',
      name: 'Register',
      component: Register
    },
    {
      path: '/UpdatePwd',
      name: 'UpdatePwd',
      component: UpdatePwd
    }
  ]
})