(1) Build )存储项目构建(webpack )相关代码、项目构建脚本
(2)配置目录,保存项目的一些基本配置信息。 最常用的是端口转发
)3) node_modules:npm加载的项目相关模块。 此目录包含项目的所有依赖关系,也就是通过npm install命令下载的文件
)4) src :此目录下包含项目的源代码。 也就是说,开发者写的代码放在这里
这里包含几个文件:
assets:保存图像
components:存储组件文件(可复用、不独立的页面),
建议将组件存储在components中,然后创建另一个新的page文件夹来放置整个页面。
router:包含根的js文件,index .js
首先,我们导入了Vue对象、Router对象和HelloWorld组件
创建Router对象并定义路由表
在此定义的路由表中,路径为/,对应的组件为HelloWorld,
也就是说,如果浏览器地址为/,则HelloWorld组件将显示在路由器视图位置
App.vue:项目门户文件是Vue组件,也是项目的第一个Vue组件
App.vue是vue组件,组件包含三部分:页面模板(template )、页面脚本(page script )和页面样式(style )
页面模板定义页面的HTML元素。 在此定义图像和router-view两个
用于实现当前页面数据初始化、事件处理等操作的页面脚本
页面样式是指模板对HTML元素的页面美化操作
main.js:核心文件相当于Java中的main方法,是整个项目的入口js
首先导入Vue对象
导入App.vue并将其命名为App
导入路由器。 注意,router目录根的默认文件名为index.js,因此可以省略
所有内容都导入成功后,创建Vue对象并将Vue处理的节点设置为“#app”
“#app”是指在index.html文件中预定义的div
将router设定为vue对象,简化的写法。 完整的写法是router:router,如果和key/value一模一样的话可以省略。
声明组件App。 名为App的组件最初导入到项目中,但直接导入的组件不能直接使用,必须声明。
模板定义了一个页面模板,用于将App组件的内容渲染为名为“#app”的div
(5)静态)静态资源目录
(6) test )初始测试目录
(7).xxxx )包含git结构和语法结构等的结构文件
(8) index.HTML )项目首页、门户页面也是整个项目唯一的html页面
(9) package.json项目配置文件,用于定义项目的所有依赖关系,包括开发时依赖关系和发布时依赖关系
(10 )自述文件:手册