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文件,并渲染。至此一个页面全部加载完毕。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1 Webpack 1.1 概念简介 1.1.1 WebPack是什么 1、一个打包工具 2、一个模块加载工具 3...
    Kevin_Junbaozi阅读 6,787评论 0 16
  • 相关概念 混合开发和前后端分离 混合开发(服务器端渲染) 前后端分离后端提供接口,前端开发界面效果(专注于用户的交...
    他爱在黑暗中漫游阅读 2,869评论 4 45
  • 折腾来折腾去,我的缘分一直不知道在哪里 妈妈一直很看好他,但是我跟他之间仿佛有一道桥梁,很深很深,都未走到彼此的心...
    Qaaey姗阅读 175评论 0 0
  • 仙客来别名萝卜海棠、兔耳花、兔子花、一品冠、篝火花、翻瓣莲,属多年生草本植物 生长习性 性喜温暖,怕炎热,耐寒,可...
    生活浪客阅读 348评论 0 0
  • 随着自我意识的成长,许多小孩子都会出现一些任性的行为。而爸爸妈妈们由于对孩子的溺爱、娇惯,凡事都顺着孩子的心意,就...
    校动阅读 210评论 0 0