Vue 项目创建完成后,使用 Web Storm 打开项目,项目目录如下:

  1. build 文件夹,用来存放项目构建脚本

  2. config 中存放项目的一些基本配置信息,最常用的就是端口转发

  3. node_modules 这个目录存放的是项目的所有依赖,即 npm install 命令下载下来的文件

  4. src 这个目录下存放项目的源码,即开发者写的代码放在这里

  5. static 用来存放静态资源

  6. index.html 则是项目的首页,入口页,也是整个项目唯一的HTML页面

  7. package.json 中定义了项目的所有依赖,包括开发时依赖和发布时依赖

对于开发者来说,以后 99.99% 的工作都是在 src 中完成的,src 中的文件目录如下:

  1. assets 目录用来存放资产文件

  2. components 目录用来存放组件(一些可复用,非独立的页面),当然开发者也可以在 components 中直接创建完整页面。

  3. 推荐在 components 中存放组件,另外单独新建一个 page 文件夹,专门用来放完整页面。

  4. router 目录中,存放了路由的js文件

  5. App.vue 是一个Vue组件,也是项目的第一个Vue组件

  6. main.js相当于Java中的main方法,是整个项目的入口js

main.js 内容如下:

  1. 在main.js 中,首先导入 Vue 对象

  2. 导入 App.vue ,并且命名为 App

  3. 导入router,注意,由于router目录下路由默认文件名为 index.js ,因此可以省略

  4. 所有东西都导入成功后,创建一个Vue对象,设置要被Vue处理的节点是 '#app','#app' 指提前在index.html 文件中定义的一个div

  5. 将 router 设置到 vue 对象中,这里是一个简化的写法,完整的写法是 router:router,如果 key/value 一模一样,则可以简写。

  6. 声明一个组件 App,App 这个组件在一开始已经导入到项目中了,但是直接导入的组件无法直接使用,必须要声明。

  7. template 中定义了页面模板,即将 App 组件中的内容渲染到 '#app' 这个div 中。

因此,可以猜测,项目启动成功后,看到的页面效果定义在 App.vue 中

  1. App.vue 是一个vue组件,这个组件中包含三部分内容:1.页面模板(template);2.页面脚本(script);3.页面样式(style)

  2. 页面模板中,定义了页面的 HTML 元素,这里定义了两个,一个是一张图片,另一个则是一个 router-view

  3. 页面脚本主要用来实现当前页面数据初始化、事件处理等等操作

  4. 页面样式就是针对 template 中 HTML 元素的页面美化操作

需要额外解释的是,router-view,这个指展示路由页面的位置,可以简单理解为一个占位符,这个占位符展示的内容将根据当前具体的 URL 地址来定。具体展示的内容,要参考路由表,即 router/index.js 文件,该文件如下:

  1. 这个文件中,首先导入了Vue对象、Router对象以及 HelloWorld 组件,

  2. 创建一个Router对象,并定义路由表

  3. 这里定义的路由表,path为 / ,对应的组件为 HelloWorld,即浏览器地址为 / 时,在router-view位置显示 HelloWorld 组件

来源于: https://mp.weixin.qq.com/s/HWRYAR16vLE1XFep6_i1tA

Vue 项目结构介绍的更多相关文章

  1. 上门洗车APP --- Androidclient开发 之 项目结构介绍

    上门洗车APP --- Androidclient开发 之 项目结构介绍 前言 尽管公司项目较紧,但还是抽空给大家继续更新. o_O"~ 欢迎大家的关注,非常高兴和大家共同学习.前面给大家分 ...

  2. .NET Core实战项目之CMS 第十三章 开发篇-在MVC项目结构介绍及应用第三方UI

    作为后端开发的我来说,前端表示真心玩不转,你如果让我微调一个位置的样式的话还行,但是让我写一个很漂亮的后台的话,真心做不到,所以我一般会选择套用一些开源UI模板来进行系统UI的设计.那如何套用呢?今天 ...

  3. SpringBoot项目结构介绍

    一项目结构介绍 springboot框架本身对项目结构并没有特别的要求,但是按照最佳的项目结构可以帮助我们减少可能遇到的错误问题.结构如下: (1)应用主类SpringbootApplication应 ...

  4. vue项目搭建介绍01

    目录 vue项目搭建介绍01 vue 项目框架环境搭建: 创建项目: vue 项目创建流程: vue项目搭建介绍01 vue 项目框架环境搭建: vue 项目框架: vue django(类似)(vu ...

  5. vue项目搭建介绍02

    目录 vue项目搭建介绍02 python-pycharm设置: vue创建项目分类: vue-cli构建 自定义构建 基础的vue项目目录: vue项目搭建介绍02 python-pycharm设置 ...

  6. Vue项目结构梳理

    Vue项目结构图: 简单介绍目录结构 build目录是一些webpack的文件,配置参数什么的,一般不用动 config是vue项目的基本配置文件 node_modules是项目中安装的依赖模块 sr ...

  7. vue 目录结构介绍

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

  8. 03 vue项目结构

    上一篇已介绍根据vue-cli创建项目,本篇介绍根据vue-cli官方脚手架创建的项目的项目结构. 一.图看结构 build  [webpack配置]         webpack相关配置,都已经配 ...

  9. MVC项目创建与项目结构介绍

    一.创建MVC项目 打开VS202,点击:文件—>新建—>项目—>Web—>Asp.Net MVC 4 Web应用程序 填好项目名称.解决方案名称和文件存放位置,然后点击确定, ...

随机推荐

  1. C# 学习笔记第一天

    1.  2000年开发出C#,2002年传入中国 2.   .NET  两部分 (1). .NET 平台               好比是厨房 (2)  .netframework 框架       ...

  2. HDU 6034 - Balala Power! | 2017 Multi-University Training Contest 1

    /* HDU 6034 - Balala Power! [ 大数进位,贪心 ] 题意: 给一组字符串(小写英文字母),将上面的字符串考虑成26进制数,每个字母分配一个权值,问这组数字加起来的和最大是多 ...

  3. 【leetcode】1275. Find Winner on a Tic Tac Toe Game

    题目如下: Tic-tac-toe is played by two players A and B on a 3 x 3 grid. Here are the rules of Tic-Tac-To ...

  4. Servlet中关于路径的小结

    URL(统一 资源定位符).URI(统一资源标识符)都是由资源路径和资源名称组成.   访问路径按照路径是否可以独立完成资源准确定位的判别标准,可以将访问路径分为绝对路径与相对路径. 关系:绝对路径 ...

  5. 强制数据类型转换之Number类型

    ㈠强制类型转换 1.定义:指将一个数据类型强制转换为其他的数据类型    类型转换主要指,将其他的数据类型,转换为String ,Number, Boolean ㈡将其他的数据类型转换为Number ...

  6. html5原生js拖拽上传(golang版)

    一次只能传一个文件,需在main.go同级目录中建一个upload文件夹 main.go package main import ( "fmt" "io" &q ...

  7. golang配置oci8所遇到问题解决

    新建文件夹 mingw 将 MinGW.zip 解压到mingw目录下,进入mingw\lib目录下 新建文件夹pkg-config 执行命令 go get github.com/wendal/go- ...

  8. Linux之tomcat安装与配置

    1.创建目录 [root@bogon tomcat]#mkdir /usr/local/java/tomcat 2.上传压缩包并解压 [root@bogon tomcat]# tar xvf apac ...

  9. ThinkPHP3.2版本对于Model的使用

    THinkphp3.2的改动很大,特别是应用了命名空间的概念,这个命名空间很类似于.NET和Java的命名空间,通过引用就可以调用,由于前期一直是搞.NET,对命名空间自认为是比较了解的,在没有完全理 ...

  10. tp5 多条件查询

    $where['rc_category_id'] = array('eq',$cid); $where['rc_territory_ids'] = ['like', '%'.$tid.'%']; $l ...