├── v-proj
| ├── node_modules // 当前项目所有依赖，一般不可以移植给其他电脑环境
| ├── public
| | ├── favicon.ico // 标签图标
| | └── index.html // 当前项目唯一的页面
| ├── src
| | ├── assets // 静态资源img、css、js
| | ├── components // 小组件
| | ├── views // 页面(视图)组件
| | ├── App.vue // 根组件
| | ├── main.js // 全局脚本文件（项目的入口）
| | ├── router.js // 路由脚本文件（配置路由 url链接 与 页面组件的映射关系）
| | └── store.js // 仓库脚本文件（vuex插件的配置文件，数据仓库）
| ├── README.md
└ └── **配置文件
Vue组件(.vue文件)
// template : 有且只能有一个跟标签
// script : 必须将组件对象导出 export default { }
// style : style标签明确scoped属性,代表该样式只在组件内部起作用(即:样式组件化)
<template>
<div class="test">
</div>
</template>
<script>
export default {
name: "Test"
}
</script>
<style scoped>
</style>
新增页面三步骤:
1) 在views文件中创建视图组件
2) 在router.js文件中配置路由
3) 设置路由跳转，在指定路由下渲染该页面组件(替换根组件中的router-view标签)
补充:
// 1) 小组件代码书写完后将其导出
// 2) 页面组件需要哪个小组件就将该小组件导入并注册,同时将页面组件导出
// 3) 在路由组件中导入页面组件并配置注册
![]()
<template>
<div class="text2">
<p>text2</p>
</div>
</template>
<script>
// 导出该小组件
export default {
name: "Text2"
}
</script>
<style scoped>
p {
color: blueviolet;
}
</style>
components