本文转自: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. Devexpress WPF教程

    [视频专辑]酷炫界面开发神器DevExpress WPF视频教程(36集全) http://www.devexpresscn.com/post/620.html

  2. 开源应用框架BitAdminCore:更新日志20180605

    索引 NET Core应用框架之BitAdminCore框架应用篇系列 框架演示:http://bit.bitdao.cn 框架源码:https://github.com/chenyinxin/coo ...

  3. sqlserver排名函数

    在做开发的时候,排名函数是sqlserver经常用到的函数,在分页的时候需要用,分组的时候也要用,主要排名函数有row-number,rank(),dense-rank(),NTILE()接下来详细说 ...

  4. docker为什么适合devops?

    欢迎访问网易云社区,了解更多网易技术产品运营经验 进阶版结论:Kubernetes + Docker 是 Dev 和 Ops 融合的一个桥梁.   DevOps 强调的是高效组织团队之间如何通过自动化 ...

  5. 赛肯德 | 2017NEERC某题

    我们枚举每一条边的流量x,将它作为底流(也就是比它大的的流量变成差值,比它小的流量为0),然后我们设x就是路径上第K大的那个边的流量.然后跑最短路,加上dis[n]就是当前的答案.然后取min即可. ...

  6. Linux 服务器上安装Webmin

    1.登陆到服务器 2.新建一个文件夹来保存webmin,建议在个人用户下新建., 3.下载Webmin的安装文件, 命令是: wget http://prdownloads.sourceforge.n ...

  7. BZOJ3210: 花神的浇花集会(坐标系变换)

    题面 传送门 题解 坐标系变换把切比雪夫距离转化为曼哈顿距离 那么对于所有的\(x\)坐标中,肯定是中位数最优了,\(y\)坐标同理 然而有可能这个新的点不合法,也就是说不存在\((x+y,x-y)\ ...

  8. 解决修改完系统默认python版本后yum不可用的问题!!!!!!

    文章转自: http://www.linuxidc.com/Linux/2013-05/84727.htm #vi /usr/bin/yum 将文件头部的: #!/usr/bin/python 改为: ...

  9. GitHub创建项目,保存代码。

    平时学习会写一些代码,虽然只是零零散散的功能,但是基本都是在一个项目下操作,偶尔会忘记代码编辑顺序.国庆这几天在家,想把GitHub用起来,实现自己代码的可追溯,可查询.学习本篇博客,你需要一点的Gi ...

  10. iOS几个功能:1.摇一摇;2.震动;3.简单的摇动动画;4.生成二维码图片;5.发送短信;6.播放网络音频等

    有一个开锁的功能,具体的需求就类似于微信的“摇一摇”功能:摇动手机,手机震动,手机上的锁的图片摇动一下,然后发送开锁指令.需求简单,但用到了许多方面的知识. 1.摇一摇 相对这是最简单的功能了. 在v ...