目录结构:
(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----目录结构的更多相关文章

  1. vue目录结构

    构建新的项目后生成目录结构如下图: 1.build目录下: 最终发布de代码存放的位置 2.config 配置目录,包括端口号等.我们初学可以使用默认的 3.node_modules npm加载的项目 ...

  2. Vue学习(一)Vue目录结构

    安装教程网上一大把,可以自己搜索.记录下学习过程. 认识下Vue的目录结构,取自:https://www.cnblogs.com/dragonir/p/8711761.html vue 文件目录结构详 ...

  3. vue 目录结构与文件配置说明

    目录结构与文件配置说明 首先对目录结构进行说明, 1.build目录,主要利用webpack与node插件启动一些相关服务的js文件 2.config目录主要是针对开发环境,生产环境,测试环境的配置信 ...

  4. vue 目录结构介绍

    1 初始目录如下: 2 目录结构介绍 bulid:最终帆布的代码存放位置 config:配置目录,包括端口号等 node_modules:npm加载的项目依赖模块 src:z这里是我们要开发的目录,基 ...

  5. Vue 目录结构 绑定数据 绑定属性 循环渲染数据

    一.目录结构分析 node_modules 项目所需要的各种依赖 src 开发用的资源 assets 静态资源文件 App.vue 根组件 main.js 配置路由时会用 .babelrc 配置文件 ...

  6. vue 目录结构解析

    ├── README.md 项目介绍├── index.html 入口页面├── build 构建脚本目录│ ├── webpack.base.conf.js webpack基础配置,开发环境,生产环 ...

  7. vue目录结构熟悉

    给项目的入口文件做点小改变: [补充:编辑器建议使用vscode,我还没装,暂时先用phpstorm] 打开 APP.vue 文件,代码如下(解释在注释中) <!-- 展示模板 --> & ...

  8. Vue 入门之目录结构介绍

    Vue 是一套用于构建用户界面的渐进式框架,与其它大型的页面框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当 ...

  9. II、Vue的项目目录结构 一些语法

    Vue目录结构 这是某闭源项目的web端目录结构: 目录解析: -目录/文件 - build 项目构建(webpack)相关代码 config 配置目录.端口号:也有默认的 node_modules ...

  10. vue学习笔记(三)——目录结构介绍

    1.初始目录结构如下: 2.目录结构介绍 目录/文件 说明 build 最终发布的代码存放位置. config 配置目录,包括端口号等.我们初学可以使用默认的. node_modules npm 加载 ...

随机推荐

  1. 摄像专用的SD卡推荐

      此类SD卡主要需要满足快速写入:特别对于4K的支持,速度要有很高才能满足. 文章来源:刘俊涛的博客 欢迎关注,有问题一起学习欢迎留言.评论

  2. IDEA使用笔记(八)——自动生成 serialVersionUID 的设置

    这个设置比较简单,也有一些博文已经写到了,为什么我还要写哪?(潜台词:因为我想凑一篇博文)我觉得学习,特别是编程学习是需要重复造轮子的,另外,就是加深自己的印象方便自己的查找.还有就是关键点,有些博客 ...

  3. [svc]通过bridge连接单机的多个网络namespace

    ip操作物理网卡 参考: http://www.cnblogs.com/iiiiher/p/8056930.html - 查看mac/操作物理网卡 ip link - 查看ip/mac ip a - ...

  4. MySql事务select for update及数据的一致性处理讲解

    MySQL中的事务,默认是自动提交的,即autocommit = 1: 但是这样的话,在某些情形中就会出现问题:比如: 如果你想一次性插入了1000条数据,mysql会commit1000次的, 如果 ...

  5. 【30集iCore3_ADP出厂源代码(ARM部分)讲解视频】30-11层驱动之FSMC

    视频简介:该视频介绍iCore3应用开发平台中FSMC通信的配置方法及ARM与FPGA通信的方法. 源视频包下载地址:链接:http://pan.baidu.com/s/1slbHOCH 密码:n06 ...

  6. 一些jquery特效收集

    jQuery幻灯片插件带投影的图片叠加切换幻灯片轮播 特效:http://www.jsfoot.com/jquery/images/ jquery文字滚动上下间歇文字滚动 http://www.17s ...

  7. 《FPGA全程进阶---实战演练》第五章 基于74HC595的LED操作

    1基础理论部分 1.1分频 分频,是的,这个概念也很重要.分频是指将一单一频率信号的频率降低为原来的1/N,就叫N分频.实现分频的电路或装置称为“分频器”,如把33MHZ的信号2分频得到16.5MHZ ...

  8. 性能优化系列八:MYSQL的配置优化

    一.关键配置 1. 配置文件的位置 MySQL配置文件 /etc/my.cnf 或者 /etc/my.cnf.d/server.cnf 几个关键的文件:.pid文件,记录了进程id.sock文件,是内 ...

  9. 正确释放WORD对象(COM组件) COMException: 被调用的对象已与其客户端断开连接

    本来form method=post本页面 修改为其他页面 action=save.aspx后没问题 其他问题可参考以下: 引自:http://topic.csdn.net/u/20090108/17 ...

  10. 为什么V8引擎这么快?[转]

    转载请注明出处:http://blog.csdn.net/horkychen Google研发的V8 JavaScript引擎性能优异.我们请熟悉内部程序实现的作者依源代码来看看V8是如何加速的. 作 ...