Vue----目录结构

Posted 2020-12-30 w-s-l123

目录结构：
						(1):build:---------------------------------------------------------------------------------：保存webpack初始化配置。
							build.js:------------------------------------------------------------------------------: 开发环境构建
							check-versions:------------------------------------------------------------------------: 检查版本
							dev-server.js：------------------------------------------------------------------------: 构建本地服务器(npm run dev 运行)
							dev-client.js：------------------------------------------------------------------------：开发热重载(用于实现页面的自动刷新)，此项目没有加。
							utils.js:------------------------------------------------------------------------------: 构建相关工具
							vue-loader.conf.js:--------------------------------------------------------------------: css加载配置
							webpack.base.conf.js:------------------------------------------------------------------：webpack基础配置
							webpack.dev.conf.js:-------------------------------------------------------------------：webpack开发环境配置
							webpack.prod.conf.js:------------------------------------------------------------------：webpack生产环境配置
							
						(2):config:--------------------------------------------------------------------------------：保存一些项目初始化配置。
							dev.env.js-----------------------------------------------------------------------------：开发环境配置
							index.js-------------------------------------------------------------------------------: 项目主要配置(包括监听端口，打包路径等)
							jquery.min.js--------------------------------------------------------------------------: jqery
							prod.env.js----------------------------------------------------------------------------: 项目生产环境配置
						
						(3):node_modules:--------------------------------------------------------------------------：npm加载的项目依赖模块。
							node_modules里面是项目的依赖包，其中包括很多基础依赖，自己也可以根据需要安装其他依赖。
							cmd---------------->cd 进入项目--------------->npm install 包名@版本[回车]
							
						(4):src:-----------------------------------------------------------------------------------：开发目录，核心文件。
						(5):static:--------------------------------------------------------------------------------：静态资源目录(一般是图片类资源)
						(6):.babelrc-------------------------------------------------------------------------------：babel编译参数
						(7):.eslintignore--------------------------------------------------------------------------：js(未知)
						(8):.eslintrc.js---------------------------------------------------------------------------：js(未知)
						(9).gitignore------------------------------------------------------------------------------：git上传需要忽略的文件配置
						(10).postcssrc.js--------------------------------------------------------------------------：转换css的工具
						(11)favicon.ico----------------------------------------------------------------------------：图标
						(12)index.html-----------------------------------------------------------------------------：首页入口文件
						(13):package.json--------------------------------------------------------------------------：项目配置文件
						(14):README.md-----------------------------------------------------------------------------：项目说明
						(15):README-en.md--------------------------------------------------------------------------：注意事项
						src项目开发目录，核心文件：
							(1):index.html:------------------------------------------------------------------------: 和html一样，但一般只定义一个空的根节点，
												                                                                     在main.js里面定义的实例将挂载在根节点下，
																													 内容都通过vue组件来填充



							(2):App.vue:----------------------------------------------------------------------------: 根组件,vue页面通常由:模板(template)，js(script),样式(style)组成。
								template：-----------------：其中模板只能包含一个父节点，也就是说顶层的div只能有一个（例如下图，父节点为#app的div，其没有兄弟节点）
										  -----------------：<router-view></router-view>是子路由视图，后面的路由页面都显示在此处
										  -----------------：打一个比喻吧,<router-view>类似于一个插槽，跳转某个路由时，该路由下的页面就插在这个插槽中渲染显示
								script：-------------------：vue通常用es6来写，用export default导出，其下面可以包含数据data，生命周期(mounted等)，方法(methods)等，
								

								style：--------------------：样式通过style标签<style></style>包裹，默认是影响全局的，
								                             如需定义作用域只在该组件下起作用，需在标签上加scoped，<style scoped></style>
                                                            如要引入外部css文件，首先需给项目安装css-loader依赖包，打开cmd，进入项目目录，输入npm install css-loader,回车。
															安装完成后，就可以在style标签下import所需的css文件，例如：
																<style>
																	import ‘./assets/css/public.css‘
																</style>
															这样，我们就可以把style下的样式封装起来，写到css文件夹，再引入到页面使用，整个vue页面也看上去更简洁。

							(3):main.js:----------------------------------------------------------------------------: 入口文件main.js主要是引入vue框架，根组件及路由设置，
							                                                                                          并且定义vue实例，后期还可以引入插件，当然首先得安装插件。

							(4):router:-----------------------------------------------------------------------------: 路由配置
								router文件夹下，有一个index.js，即为路由配置文件这里定义了路径为‘/‘的路由，该路由对应的页面是Hello组件，
								所以当我们在浏览器url访问http://localhost:8080/#/时就渲染的Hello组件类似的，我们可以设置多个路由，‘/index’,‘/list‘之类的，
								当然首先得引入该组件，再为该组件设置路由。