vue-demo工程

github

重点学习了解工程目录的作用和分布：

├─ .gitignore      # 忽略无需git控制的文件 比如 node_modules

├─  package.json        # 项目配置(npm install 的包读取自这个文件，npm install xxx --save 将包下载资源保存至这个文件里)

├─  README.md          # 项目说明

├─  index.html          # 首页（localhost:8080默认进入这个页面）

├─  config           # 本地调试配置文件夹

├─  build              # webpack 配置文件目录

├─  node_modules          # npm依赖包

└─src                  # 开发目录

    │ app.js          # 启动配置（或者是main.js）

    │ app.vue          # 入口vue

    │ routers.js      # 路由配置文件

    ├─  components      # 组件

    ├─  assets              # 静态资源包（包含以下文件夹）

    │         styles          # css资源文件

    │         images          # 图片资源文件

    │         scripts        # JS资源文件

    │         font            # 字体资源文件

    └─views            # 页面

            home.vue  # 首页

            404.vue    # 404页面

首先访问index.html  (id = appp)  -->  到main.js文件中，找到appp对应的vue文件是App.vue  -->  App.vue中有个<router-view/>可以渲染你指定路由对应的组件  -->  router中的index.js配置文件，匹配到路由，找到组件  @/components/HelloWorld  -->  扎到components中的HelloWorld.vue文件，并渲染。至此一个页面全部加载完毕。