目录结构截图如下

/build

编译配置文件目录，由脚手架自动生成

/config

webpack 配置文件目录，由脚手架自动生成

/node_modules

node依赖目录，可通过package.json的配置进行命令行安装，需要添加git忽略，因为文件超多，会导致项目提交和对比异常缓慢甚至卡死。

/src

我们的开发目录。所有的开发文件，我们要写的代码都在这个目录下。

/src/assets

该目录存放所以的静态资源，包括css img sass js等文件。 注意这里的js文件通常只存放utils 也就是工具类的js，方便在页面里面调用。

/src/components

存放组件。 组件的主要目的是能方便的复用，因此，应当适当的暴露参数以满足部分定制化。

/src/views

存放网站的所有视图文件。也就是路由中需要配置的文件名称。

App.vue

主要的入口文件，通常通过main.js 来引用该文件的位置，从而指定项目的入口。

/static

静态文件目录，该目录在编译后会原封不动的复制到dist/static目录下，因此建议存放一些 广告图，或者临时展示静态数据的图等资源。

另外，mock数据建议放在该目录下，因为其他目录大多是禁止直接访问的。 例如/static/mock

vue-cli 脚手架目录结构说明的更多相关文章

  1. vue/cli的目录结构说明

    node_modules:npm 加载的项目所需要的各种依赖模块. src:这里是我们开发的主要目录(源码),基本上要做的事情都在这个目录里面,里面包含了几个目录及文件: 1.assets:放置一些图 ...

  2. 13. Vue CLI脚手架

    一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...

  3. 怎样理解 Vue 项目的目录结构?

      Vue 项目的目录结构如下, 我们将会在后面逐个去了解它们的作用: 01. build - 存储项目构建相关的代码, 比如 webpack. 02. config - Vue 的配置目录,包括端口 ...

  4. Vue学习官网和Vue的书籍 目录结构

    Vue基础知识学习网站[中文] https://cn.vuejs.org/v2/guide/ Vue路由知识学习网站[中文] https://router.vuejs.org/zh/guide/  V ...

  5. vue cli脚手架使用

    1.安装nodejs,npm https://www.cnblogs.com/xidianzxm/p/12036880.html 2.安装vue cli sudo npm install -g @vu ...

  6. Vue学习笔记-目录结构

    1.采用脚手架构建的项目基本目录结构 可能会有些许差别,但是大致基本目录都差不多 2.项目入口(index.html,main.js,App.vue) 一般情况下,我们都习惯性将 index.html ...

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

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

  8. vue.cli脚手架初次使用图文教程

    vue-cli作用 vue-cli作为vue的脚手架,可以帮助我们在实际开发中自动生成vue.js的模板工程. vue-cli使用 !!前提:需要vue和webpack 安装全局vue-cli npm ...

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

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

随机推荐

  1. 51 nod 1521 一维战舰 时间复杂度O(n)，同 Codeforces 567D. One-Dimensional Battle Ships 有详细注释

    题目:51nod: 题目Codeforces: 题目注意到两个战舰不能挨在一起就可以了. // 每一段 struct node{ int left; // 段的左端点 int right; // 段的 ...

  2. UI自动化测试简介及Selenium工具的介绍和环境搭建

    自动化测试简介 1.1何为自动化测试? 是把以人为驱动的测试转化为机器执行的一种过程,它是一种以程序测试程序的过程.换言之,就是以程序实现的方式来代替手工测试. 1.2自动化测试分类 分为功能自动化测 ...

  3. JS数字金额转换为货币汉字形式

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  4. Java历程-初学篇 Day03扫描仪与类型转换

    一,扫描仪 步骤1,使用扫描仪方法 步骤2,导个包 步骤三,使用 注意事项:严格区分大小写 二,类型转换 1,自动类型转换 当将一个数值范围小的类型赋给一个数值范围大的数值型变量,java在编译过程中 ...

  5. Centos7虚拟机桥接模式

    主机ping不通虚拟机centos7系统的ip大多有以下原因: 1.主机与centos7ip段对应 (关键是网关.dns服务器要一一对应,具体操作见后文) 2.对应后仍然不通的,可关闭主机与cenos ...

  6. Java web 入门知识 及HTTP协议详解

     Java  web  入门知识 及HTTP协议详解 WEB入门 WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资 ...

  7. JS中最经典的全局变量和局部变量问题

    话不多说,直接上例子: 1.程序的运行结果为:100  10  100 var a = 10; function test(){ a = 100; console.log(a); console.lo ...

  8. Struts2运行流程-源码剖析

    本文为原创,如需转载,请标明出处:http://www.cnblogs.com/gudu1/p/7726172.html 首先说一下查看这些框架源码的感受,每一次深入探究 Spring.Struts ...

  9. Junit基本使用

    Junit基本用法 1.创建Junit Test Case 2.基本使用(以oracle数据库操作为例) package com.csit.adminsystem1.tests; import sta ...

  10. 【ASP.NET MVC 学习笔记】- 04 依赖注入（DI）

    本文参考:http://www.cnblogs.com/willick/p/3223042.html 1.在一个类内部,不通过创建对象的实例而能够获得某个实现了公开接口的对象的引用.这种"需 ...