(1) Build:项目构建(webpack)相关代码,存放项目构建脚本

(2) config:配置目录,存放项目的一些基本配置信息,最常用的就是端口转发

(3) node_modules:npm加载的项目依赖模块, 这个目录存放的是项目的所有依赖,即 npm install 命令下载下来的文件

(4) src:这个目录下存放项目的源码,即开发者写的代码放在这里

          这里包含了几个文件:

          assets:存放图片

          components:存放组件文件(一些可复用,非独立的页面),

                                      推荐在 components 中存放组件,另外单独新建一个 page 文件夹,专门用来放完整页面。

               router: 存放了路由的js文件,index.js

               

                   ① 首先导入了Vue对象、Router对象以及 HelloWorld 组件

                   ② 创建一个Router对象,并定义路由表

                   ③ 这里定义的路由表,path为 / ,对应的组件为 HelloWorld,

                       即浏览器地址为 / 时,在router-view位置显示 HelloWorld 组件

               App.vue:项目入口文件,是一个Vue组件,也是项目的第一个Vue组件

               

              ① App.vue 是一个vue组件,组件中包含三部分:页面模板(template)、页面脚本(script)、页面样式(style)

                   ② 页面模板,定义了页面的 HTML 元素,这里定义了两个,一个是一张图片,另一个则是一个 router-view

                   ③ 页面脚本,主要用来实现当前页面数据初始化、事件处理等等操作

                   ④ 页面样式,就是针对 template 中 HTML 元素的页面美化操作

               main.js:核心文件,相当于Java中的main方法,是整个项目的入口js

               

                   ① 首先导入 Vue 对象

                   ② 导入 App.vue 并命名为 App

                   ③ 导入router,注意,由于router目录下路由默认文件名为 index.js ,因此可以省略

                   ④ 所有东西都导入成功后,创建一个Vue对象,设置要被Vue处理的节点是 '#app'

                      '#app' 指提前在index.html 文件中定义的一个div

                  ⑤ 将 router 设置到 vue 对象中,简化的写法,完整的写法是 router:router,如果 key/value 一模一样,则可以简写。

                  ⑥ 声明一个组件 App,App 这个组件在一开始已经导入到项目中了,但是直接导入的组件无法直接使用,需要声明。

                  ⑦ template 中定义了页面模板,即将 App 组件中的内容渲染到 '#app' 这个div 中

(5) static:静态资源目录

(6) test:初始测试目录

(7) .xxxx:配置文件,包括git配置和语法配置等

(8) index.html:项目目的首页,入口页,也是整个项目唯一的HTML页面

(9) package.json:项目配置文件,定义了项目的所有依赖,包括开发时依赖和发布时依赖

(10) README.md:说明文档

Logo

前往低代码交流专区

更多推荐