最近做一些CI+Vue开发的简单项目，由于刚开始一直从事后端，对Vue了解不是很多，fork了团队的项目代码发现项目的文件夹很多，一时间有些懵，上网上参考了部分资料，博客园中的放晴的天空与狮子爱吃草两位的博客提供了很大的帮助，现将该部分知识做以下总结。

下图为Vue项目文件夹：

以下就项目文件夹中的各文件的作用进行介绍：

├── build/               # Webpack 配置目录

├── dist/                # build 生成的生产环境下的项目

├── config/               # Vue基本配置文件，可以设置监听端口，打包输出等

├── node_modules/                # 依赖包，通常执行npm i会生成

├── src/                 # 源码目录（开发的项目文件都在此文件中写）

│   ├── assets/            # 放置需要经由 Webpack 处理的静态文件，通常为样式类文件，如css，sass以及一些外部的js

│   ├── components/        # 公共组件

│   ├── filters/           # 过滤器

│   ├── store/    　　　　 # 状态管理

│   ├── routes/            # 路由，此处配置项目路由

│   ├── services/          # 服务（统一管理 XHR 请求）

│   ├── utils/             # 工具类

│   ├── views/             # 路由页面组件

│   ├── App.vue             # 根组件

│   ├── main.js             # 入口文件

├── index.html         # 主页，打开网页后最先访问的页面

├── static/              # 放置无需经由 Webpack 处理的静态文件，通常放置图片类资源

├── .babelrc             # Babel 转码配置

├── .editorconfig             # 代码格式

├── .eslintignore        # （配置）ESLint 检查中需忽略的文件（夹）

├── .eslintrc            # ESLint 配置

├── .gitignore           # （配置）在上传中需被 Git 忽略的文件（夹）

├── package.json         # 本项目的配置信息，启动方式

├── package-lock.json         # 记录当前状态下实际安装的各个npm package的具体来源和版本号

├── README.md         # 项目说明（很重要，便于其他人看懂）

我们以后用到最多的就是src文件夹，因为我们编写的代码要放在里面。

一开始在学习Vue中，总是理解不清楚各文件之间的逻辑，所以导致自己一直在原地徘徊，在自己尝试了微信小程序的开发之后，大致有了一个模糊的分时，反过头来继续从事Vue项目的开发，结果原来理不清的东西都豁然开朗了。

参考狮子爱吃草朋友的博客，结合自己的心得进行总结：

在根目录下存在index.html文件，在src目录下存在main.js，App.vue以及在router文件夹下存在index.js，搞清楚这几个文件之间的关系将对后续开发理清思路。

index.html---主页，项目入口

index.html为项目访问的首站点，一般我们之定义一个空的根节点，在main.js里面定义的实例将挂载到根节点下，内容都通过vue组件来进行填充。

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>首页title</title>

  </head>

  <body>

    <div id="app"></div>

    <!-- built files will be auto injected -->

  </body>

</html>

App.vue---根组件

我们在Vue中要经常建立后缀名为.vue的文件，.vue的文件通常由三部分构成，分别用<template></template>，<script></script>与<style></style>标签包裹。

我们可以将上述三个部分理解为原来我们学习前端的html，javascript与css三个部分。

其中，<template></template>通常建立我们要用的网页界面，<script></script>通常与数据打交道，定义数据的首发方式等，面向逻辑，而<style></style>主要负责<template></template>标签中的样式。

上面三者的结合，就构成了我们所见到的网页，一般我们在开发新的页面中一般是建立一个新的.vue文件，在文件中完成三个环节的编写。

<template>

  <div id="app">

    <router-view></router-view>

  </div>

</template>

<script>

export default {

  name: "app"

};

</script>

<style>

.add-container {

  margin-bottom: 20px;

}

</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下的样式封装起来，写到css文件夹，再引入到页面使用，整个vue页面也看上去更简洁。

<style> 

     import './assets/css/public.css'  

</style>

main.js---入口文件

main.js主要是引入vue框架，根组件及路由设置，并且定义vue实例，下图中的

components:{App}就是引入的根组件App.vue

后期还可以引入插件，当然首先得安装插件。

import Vue from 'vue'    /*引入vue框架*/

import ElementUI from 'element-ui'     /*引入element-ui样式*/

import App from './App'     /*引入根组件*/

import router from './router'    /*引入路由设置*/

Vue.config.productionTip = false    /*关闭生产模式下给出的提示*/

 /*定义一个新实例*/

new Vue({

  el: '#app',

  router,

  store,

  template: '<App/>',

  components: { App }     /*此处为引入的根组件的App.vue*/

})

router.js---路由配置

在router文件夹下，有一个index.js文件，即为路由配置文件。

import Vue from 'vue'    /*引入vue框架*/

import Router from 'vue-router'   /*引入路由依赖*/

import Hello from ‘@、components/Hello’    /*引入页面组件，命名为Hello*/

Vue.use(Router)   /*使用路由依赖*/

   /*定义路由*/

export default new Router({

  router:[

   {

       path: '/ ',

       name: 'Hello',

       component: Hello

    }

 ]

})

这里定义了路径为'/'的路由，该路由对应的页面是Hello组件，所以当我们在浏览器url访问http://localhost:8080/#/时就渲染的Hello组件.类似的，我们可以设置多个路由，‘/index’,'/list'之类的，当然首先得引入该组件，再为该组件设置路由。

大致是这些内容，在下一篇总结一下个文件之间的调用思路吧！

Vue项目开发目录结构的更多相关文章

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

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

  2. 从零开始：一个正式的vue+webpack项目的目录结构是怎么形成的

    如何从零开始一个vue+webpack前端工程工作流的搭建,首先我们先从项目的目录结构入手.一个持续可发展,不断加入新功能,方便后期维护的目录结构究竟是长什么样子的?接下来闰土大叔带你们一起手摸手学起 ...

  3. Android开发系列之Android项目的目录结构

    今天开始正式学习Android开发的种种细节,首先从最基本的概念和操作学起. 首先看一下Android项目的目录结构. 这是我随便建立的一个test项目,我们重点关注一下几个方面的内容: 1.src目 ...

  4. 在IOS开发中,项目的目录结构如何搭建?

    网上有很多关于IOS开发的学习资料.然而却很少有关于设计一个项目时,如何设计其目录结构?这对于自学IOS的程序猿们,无疑有诸多不利.接下来,我就简单的谈下真正在公司中,项目的目录结构如何搭建: 以上为 ...

  5. Android开发学习——Android项目的目录结构

    Android项目的目录结构: 资源文件夹: 清单配置文件: Android的四大组件在使用前全部需要在清单文件中配置 <?xml version="1.0" encodin ...

  6. vue-cli搭建项目的目录结构及说明

    vue-cli基于webpack搭建项目的目录结构 build文件夹 ├── build              // 项目构建的(webpack)相关代码    │ ├── build.js   ...

  7. Vue项目开发相关问题总结

    Vue项目开发相关问题总结 一.创建一个项目(两种方式) 1.通过CLI命令行创建,具体步骤如下: (1)Node 版本要求 Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11 ...

  8. Vue项目开发最新、最全代码规范文档

    Vue项目开发最新.最全代码规范文档 2019年02月21日 10:43:49 yw00yw 阅读数 337   一. 目录结构 |— build 构建脚本目录 |— build.js 生产环境构建( ...

  9. Vue 项目开发

    目录 Vue 项目开发 项目目录结构解析 入口文件 main.js (项目入口) 根组件 app.vue index.html 文件入口 router 路由 components 子组件 项目初始化 ...

随机推荐

  1. W-D-S-DDR

    要把下载到nandflash里面的程序(大于8KB的时候)拷贝到链接地址,故要初始化DDR,才能够使用DDR. ??? 开发板上电后要初始化DRAC,以及DDR,然后把程序拷贝到50000000出运行 ...

  2. 浅析互联网系统和传统企业IT系统的异同

    前不久,一则中行宕机的消息引起了网上IT人士的热议.其中对于大型机或者RISC系统的稳定性可靠性的质疑更是热议中的主流声音,很多人拿现在互联网系统做对比,认为大型机所谓的几个9都是吹出来的云云.在这里 ...

  3. TogetherJS本地部署，基于websocket的网页即时视频、语音、文字聊天

    TogetherJS分为两大部分,一个是hu文件夹中的服务端:另外一个是TogetherJS文件夹中的Together.JS文件,包含了所有的网页文字.语音等操作. 需要预先安装Node.js,可以百 ...

  4. 简单配置vps，防ddos攻击

    防人之心不可无. 网上总有些无聊或者有意的人.不多说了.上干货,配置vps apf防小流量ddos攻击. 对于大流量的ddos攻击, 需要机房的硬件防火墙,vps内部可能也扛不住. 1. 安装 DDo ...

  5. csv文件乱码

    问题描述: 生成的csv文件,设置为UTF-8格式,在windows上用EXCEL打开的话会乱码,在linux上用vim或者cat打开查看正常:设置为GBK格式的话,在windows上用EXCEL打开 ...

  6. Docker私有仓库Registry实战

    参考: https://www.cnblogs.com/soar1688/p/6828329.html 1. 关于Registry 官方的Docker hub是一个用于管理公共镜像的好地方,我们可以在 ...

  7. bootstrap-table简单使用

    开发项目时总想着能不能有一款插件包含分页,查询等常用功能,后来发现了bootstrap-table 直接看代码和效果图 <!DOCTYPE html> <html lang=&quo ...

  8. .Net上传图片压缩质量，不改变尺寸

    图片上传有很多情况需要考虑,例如:生成缩略图.压缩尺寸.压缩质量.压缩尺寸质量.添加水印等等常见情况.最近遇到图片质量压缩不改变大小的问题,参考:听浪 #region 图片压缩 /// <sum ...

  9. 多彩浏览器win10版 隐私声明

    (一)隐私保护 the  app need internet access,we won't need your private information, in other words, your i ...

  10. Spring jndi数据源配置方法

    xml配置: <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverMana ...