1: Vue 项目结架构分析:
(1) Build:项目构建(webpack)相关代码,存放项目构建脚本;
(2) config:配置目录,存放项目的一些基本配置信息,最常用的就是端口转发
(3) node_moudle: npm 加载的项目依赖模块, 在这个目录放的是项目中所有的依赖, 即是 npm install 命令下载下来的文件。
(4) src:这个目录下存放项目的源码,即开发者写的代码放在这里 ( src: 存放项目源代码)
这里包含了几个文件:
assets:存放图片 (存放静态资源目录)
components:存放组件文件(一些可复用,非独立的页面), 推荐在components 组件中存放组件, 另外单独存放一个文件夹page, 专门用来放完整页面。
(5): router: 存放了路由的js文件,index.js
① 首先导入了Vue对象、Router对象以及 HelloWorld 组件
② 创建一个Router对象,并定义路由表
③ 这里定义的路由表,path为 / ,对应的组件为 HelloWorld,
即浏览器地址为 / 时,在router-view位置显示 HelloWorld 组件
(6): App.vue:项目入口文件,是一个Vue组件,也是项目的第一个Vue组件
① App.vue 是一个vue组件,组件中包含三部分:页面模板(template)、页面脚本(script)、页面样式(style)
② 页面模板,定义了页面的 HTML 元素,这里定义了两个,一个是一张图片,另一个则是一个 router-view
③ 页面脚本,主要用来实现当前页面数据初始化、事件处理等等操作
④ 页面样式,就是针对 template 中 HTML 元素的页面美化操作
(7) : 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 中\
(8): static:静态资源目录
(9) test:初始测试目录
(10) .xxxx:配置文件,包括git配置和语法配置等
(11) index.html:项目目的首页,入口页,也是整个项目唯一的HTML页面
(12) package.json:项目配置文件,定义了项目的所有依赖,包括开发时依赖和发布时依赖
(13) README.md:说明文档