本文转自:http://www.runoob.com/vue2/vue-directory-structure.html

上一章节中我们使用了 npm 安装项目,我们在 IDE(Eclipse、Atom等) 中打开该目录,结构如下所示:

目录解析

目录/文件 说明
build 最终发布的代码存放位置。
config 配置目录,包括端口号等。我们初学可以使用默认的。
node_modules npm 加载的项目依赖模块
src

这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:

  • assets: 放置一些图片,如logo等。
  • components: 目录里面放了一个组件文件,可以不用。
  • App.vue: 项目入口文件,我们也可以直接将组件写这里,而不使用 components 目录。
  • main.js: 项目的核心文件。
static 静态资源目录,如图片、字体等。
test 初始测试目录,可删除
.xxxx文件 这些是一些配置文件,包括语法配置,git配置等。
index.html 首页入口文件,你可以添加一些 meta 信息或同统计代码啥的。
package.json 项目配置文件。
README.md 项目的说明文档,markdown 格式

在前面我们打开 APP.vue 文件,代码如下(解释在注释中):

 

[转]Vue.js 目录结构的更多相关文章

  1. vue项目目录结构

    VUE项目目录结构 如上图所示,我们的目录结构就是这样的了. 目录/文件 说明 build 这个是我们最终发布的时候会把代码发布在这里,在开发阶段,我们基本不用管. config 配置目录,默认配置没 ...

  2. Vue Vue项目目录结构梳理

    Vue项目目录结构梳理   by:授客 QQ:1033553122 1.   结构梳理   . ├── build/                      # webpack 配置文件: │   ...

  3. vue项目目录结构详解

    项目简介基于 vue.js 的前端开发环境,用于前后端分离后的单页应用开发,可以在开发时使用 ES Next.scss 等最新语言特性.项目包含: 基础库: vue.js.vue-router.vue ...

  4. Vue.js:目标结构

    ylbtech-Vue.js:目标结构 1.返回顶部 1. Vue.js 目录结构 上一章节中我们使用了 npm 安装项目,我们在 IDE(Eclipse.Atom等) 中打开该目录,结构如下所示: ...

  5. vue.js项目安装

    Vue.js 安装 NPM 方法安装vue.js项目 npm 版本需要大于 3.0,如果低于此版本需要升级它: # 查看版本 $ npm -v 2.3.0 #升级 npm npm install np ...

  6. Vue.js 2.x笔记:安装与起步(1)

    1. 环境准备 Vue是一套用于构建用户界面的渐进式框架,设计为可以自底向上逐层应用.Vue 的核心库只关注视图层. 安装Node.js,下载:https://nodejs.org/ 查看安装: $ ...

  7. Vue.js学习和第一个实例

    第一个实例效果图: 1.node.js下载,然后安装.下载地址:链接:http://pan.baidu.com/s/1o7TONhS 密码:fosa 2.下载Vue.js.链接:http://pan. ...

  8. Vue.js NPM 安装方法

    由于 npm 安装速度慢,本教程使用了淘宝的镜像及其命令 cnpm,安装使用介绍参照:使用淘宝 NPM 镜像. npm 版本需要大于 3.0,如果低于此版本需要升级它: # 查看版本 $ npm -v ...

  9. (私人收藏)Vue.js手册及教程

    (私人收藏)Vue.js手册及教程 https://pan.baidu.com/s/1XG1XdbbdBQm7cyhQKUIrRQ5lrt Vue.js手册及教程 Vue.js 教程 Vue.js 安 ...

随机推荐

  1. WPF制作歌词动画

    最近再做一个UWP的音乐播放器,今天实现了歌词动画,不是滚动的,滚动的慢慢研究 思路:在右边放了三个textBlock,设置 textBlock的effect属性 <TextBlock.Effe ...

  2. 【cocos2d-x 手游研发小技巧(4)与Android混编实现换“头像图片”】

    cocos2dx在android平台上的游戏开发中往往会遇到一些混编需求,如: 比方有的社区类游戏需要用到更换玩家的“头像”操作,其实就是调用android servers服务里面的本地图片,以及选取 ...

  3. IDEA不能实时更新jsp页面的问题

    第一步: 第二步 第三步: 将这三个选项 改成

  4. robot framework学习笔记之一 资源文件(Resource)和外部资源(External Resources)

    一.资源文件(Resource) 测试套件主要是存放测试案例,资源文件主要是用来存放用户关键字. 添加资源    在目录型的Project/Test Suite下单击鼠标右键,选择『New Resou ...

  5. 就这么简单!构建强大的WebShell防护体系

    接触web安全中,例如上传一句话WebShell实现上传文件的功能,再通过上传的多功能WebShell,执行病毒文件最终创建远程连接账号,达到入侵目标服务器的效果.我们可以看到,webshell在整个 ...

  6. JavaScript创建对象的4种方法

    我们有很多种方式去构造一个对象.可以构造一个对象字面量,也可以和new前缀连用去调用一个构造器函数,或者可以使用Object.create方法去构造一个已经存在的对象的新实例,还可以调用任意一个会返回 ...

  7. iOS关于代码风格问题

    cocoapods管理第三方库,详见cocoapods安装及使用 OC代码风格需要规范,所有第三方依赖需要用cocoapods管理.代码风格需要: 1. pod 'CodeFormatter', :g ...

  8. mysql 查询小技巧

    数据字段中存放的是id集,形如  1,2,15,35   也可类推json格式 查询时不用拆分了, 用上 instr.concat搜索和连接字符串 查询fids中包含15的 select * from ...

  9. 【Quartz】Spring Boot使用properties文件配置Quartz

    (1)在resource目录下新建quartz.properties文件 #============================================================== ...

  10. 任务调度SpringTask

    一.什么是任务调度 在企业级应用中,经常会制定一些“计划任务”,即在某个时间点做某件事情,核心是以时间为关注点,即在一个特定的时间点,系统执行指定的一个操作.常见的任务调度框架有Quartz和Spri ...