工程化开发和脚手架

# 项目结构

my-vue-project/
├── node_modules/       # 项目依赖包
├── public/             # 静态资源目录
│   ├── favicon.ico     # 网站图标
│   └── index.html      # 主HTML文件
├── src/                # 项目源代码目录
│   ├── assets/         # 静态资源（图片、字体等）
│   ├── components/     # Vue组件
│   ├── router/         # 路由配置（如果选择了vue-router）
│   ├── store/          # Vuex状态管理（如果选择了vuex）
│   ├── views/          # 页面级组件
│   ├── App.vue         # 根组件
│   └── main.js         # 应用入口文件，打包运行
├── .gitignore          # Git忽略配置
├── babel.config.js     # Babel配置
├── package.json        # 项目配置和依赖
├── package-lock.json   # 依赖版本锁定文件
└── README.md           # 项目说明文档

# 组件化开发

一个页面可以拆分为一个个组件，每个组件有自己的结构、样式、行为

# 组件结构

# 组件

# 局部注册

只能在注册的组件内使用

在 components 目录下创建 .vue 组件，并设置结构、样式、行为

在要使用的组件中导入注册

注意必须大驼峰命名

	<script>
	// 导入
	import BlogSidebar from './components/BlogSidebar.vue'
	import BlogNavbar from './components/BlogNavbar.vue'
	import ProfileSection from './components/ProfileSection.vue'
	import PostsSection from './components/PostsSection.vue'
	import NewPostSection from './components/NewPostSection.vue'

	export default {
	name: 'App',
	// 注册
	components: {
	'组件名': 组件对象 // 也可以直接写组件对象
	'BlogSidebar': BlogSiderbar // BlogSiderbar
	},
	}
	</script>

使用时直接当作 html 标签使用
<组件名></组件对象>

# 全局注册

在 main.js 中进行全局注册

	// 导入
	import BlogSiderbar fron './components/BlogSiderbar.vue'

	// 调用 Vue.component 进行全局注册
	// Vue.component (' 组件名 '，组件对象)
	Vue.component('BlogSiderbar'，BlogSiderbar)