码迷,mamicode.com
首页 > 其他好文 > 详细

Vue----目录结构

时间:2018-08-16 21:00:55      阅读:140      评论:0      收藏:0      [点我收藏+]

标签:mount   包含   lint   style   重载   自己   输入   很多   首页   

目录结构:
						(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‘之类的,
								当然首先得引入该组件,再为该组件设置路由。

  

Vue----目录结构

标签:mount   包含   lint   style   重载   自己   输入   很多   首页   

原文地址:https://www.cnblogs.com/w-s-l123/p/9489545.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!