• Vue----目录结构


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

      

  • 相关阅读:
    数字索引分页
    经典语录 cloud
    日常交际技巧经验总结100句(大全) cloud
    成大事必备9种能力、9种手段、9种心态 cloud
    浅谈服务器虚拟化
    使用mysqlard监控mysql服务器性能
    CentOS服务器iptables配置
    如何编写好的应用程序
    电子杂志新出路
    泸州老窖集团有限责任公司电子化职能化和网络化的管理新模式
  • 原文地址:https://www.cnblogs.com/w-s-l123/p/9489545.html
Copyright © 2020-2023  润新知