关键词：
一、上一章节说到了vue项目的初始化，这一节主要介绍vue项目的一个目录结构
二、vue初始化的目录结构最终要的是src目录下的文件，其他的了解即可，必要的时候可以去官网或者vue中文社区寻找答案https://www.vue-js.com/,初始化的文件目录如下：
下面是详细的目录结构介绍：
三、配置目录详解：
a)、build目录（webpack配置）build文件主要是webpack的配置，目录详情如下：
b)、config目录（vue配置目录）config目录主要是项目端口、代理、打包规则的一些配置，目录结构如下：
c)、node_modules(引入一些项目的依赖)
这里边的依赖主要的安装方式是依靠在命令行工具中输入：cnpm install *** –save 来引入自己所需要的依赖包
四、src项目核心文件详解
下面主要是是针对index.html、main.js、app.vue、router的讲解
a)、index.html(展示页)
index.html为整个vue项目的主页，跟h5这一类的html是一样的，但是他一般仅仅定义一个空的根节点，因为这个是要在main.js里边定义实例将它挂在到这个空的根节点之下，所有的内容都要通多vue组件来填充，如下图：
b)、main.js(项目入口文件)
main.js主要是整个项目的入口文件，主要是负责框架的引入，路由的配置、组件的挂载，还可以在这里配置一些公用的css，如下图：
c)、App.vue（根组件）
一个vue界面通常由三个部分组成，template（模板）、js（javascript）、style（css样式），如下图：
（1）*、template只允许有一个父节点，也就是最顶层只能有一个div，没有其他的兄弟节点
（2）*、JS代码在vue中，通常的书写方式是es6，用export default导出，其下面包含data、生命周期函数（created）、方法（methods）
（3）*、style样式，通常是<style></style>这个标签是影响全局的，如果想只在本组件中起作用，可以在<style scope></style>
d)、router(路由配置)
router文件夹下的index.js是路由的配置文件，如下图：
结语：整个vue的目录结构就已经分析完了，如果还有一些不懂的地方，可以在下方评论，我看到会第一时间进行解答，希望大家多多支持，点赞，你们的鼓励就是我前进的动力-.-
vue2项目结构搭建
vue2项目结构初搭建与项目基本流程一、开始项目结构搭建的重要性决定项目是否能够健康成长决定了项目是否利于多人协作开发决定了项目是否利于后期维护决定了项目是否性能良好决定了代码是否重用率降低二、项目结构的... 查看详情
vue-cli入门——项目结构
前言在上一篇项目搭建文章中，我们已经下载安装了node环境以及vue-cli，并且已经成功构建了一个vue-cli项目，那么接下来，我们来梳理一下vue-cli项目的结构。总体框架一个vue-cli的项目结构如下，其中src文件夹是需要掌握的，所... 查看详情
vue-cli入门——项目结构(代码片段)
前言在上一篇项目搭建文章中，我们已经下载安装了node环境以及vue-cli，并且已经成功构建了一个vue-cli项目，那么接下来，我们来梳理一下vue-cli项目的结构。总体框架一个vue-cli的项目结构如下，其中src文件夹是需要掌握的，所... 查看详情
vue证明题三，vue项目的包结构和配置
用vue-cli创建的项目带有自动配置好的包结构，包结构都是固定的。 关于详细的解释，网上多得是，只说下最重要的内容 1.vue项目包结构和端口号配置 这里笔者下了个HBuilderX来写代码。 2.vue开发写什么？... 查看详情
vue项目结构设计
...挺详细的，要详细了解可以看这个→ 结构详细介绍vue项目结构图：简单介绍：build目录是一些webpack的文件，配置参数什么的，一般不用动config是vue项目的基本配置文件 node_modules是项目中安装的依赖模块 src源码文件夹... 查看详情
vue之项目结构傻瓜式
Vue之项目结构用脚手架创建好一个项目之后，一时间不知道如何让下手。太多引用和嵌套了，下面来看一下项目结构，代码应该写在哪main.js相当于django中的setting.py，里面放被导入的模块App.vueHome.vuerouter/index.js小组件vue以目前学... 查看详情
vue项目结构总结(代码片段)
vue项目结构├──build#webpack文件，配置参数,打包的代码存放在这里。├──config#vue项目的基本配置文件（配置端口等信息）├──dist#打包好后的文件(打包对文件进行混淆) └──static └──js └──css └──img... 查看详情
不了解用 vue-cli 创建的 Vue 项目的项目结构
】不了解用vue-cli创建的Vue项目的项目结构【英文标题】：Don\'tunderstandprojectstructureofVueprojectcreatedwithvue-cli【发布时间】：2019-12-2722:51:32【问题描述】：我是Vue.js的新手，之前从未使用过前端框架。我使用“vuecreate”命令创建了一... 查看详情
vue项目结构
...架语言(vue)的脚手架，集成了webpack环境及主要依赖，对于项目的搭建、打包、维护管理等都非常方便快捷。一、安装Node环境在node.js官网下载稳定版本，我是在Windows下安装的。 下载完成后点击安装，安装过程 查看详情
创建vue项目结构
vue官方有给vue项目提供一个官方命令行工具，官方的解释为： Vue提供了一个官方的CLI，为单页面应用快速搭建(SPA)繁杂的脚手架。它为现代前端工作流提供了batteries-included的构建设置。只需要几分钟的时间就可以运行起来并... 查看详情
vue项目结构
一、上一章节说到了vue项目的初始化，这一节主要介绍vue项目的一个目录结构二、vue初始化的目录结构最终要的是src目录下的文件，其他的了解即可，必要的时候可以去官网或者vue中文社区寻找答案https://www.vue-js.com/,初始化的文... 查看详情
vue项目结构分析(代码片段)
Vue项目结构分析1.目录这里是使用Vite构建项目2.效果3.分析node_modules是存放依赖的文件夹public文件夹存放公共资源文件src用于编写的代码assets存放图片资源components存放公共组件App.vue根组件main.js入口文件style.css存放全局的样式.giti... 查看详情
关于vue-cli的项目结构
一、总体框架一个vue-cli的项目结构如下，其中src文件夹是需要掌握的，所以本文也重点讲解其中的文件，至于其他相关文件，了解一下即可。 vue-cli项目总体结构二、文件结构细分1.build——[webpack配置]build文件主要是webpack的... 查看详情
vue文件夹目录结构
参考技术A首先通过【Vue-cli3.x】创建vue项目创建一个Vue项目。以上是项目的目录结构如果资源管理器中打开，会看到一个隐藏文件 查看详情
vue----项目与环境搭建初始项目结构vue生命周期(代码片段)
目录1.vue环境搭建2.Vue项目搭建pycharm配置并启动vue项目3.认识项目1.vue项目目录结构2.配置文件:vue.config.js3.main.js4.vue文件5.App.vue4.Vue生命周期(重点!!!!!!!!!)main.jsrender渲染函数补充:总结:1.vue环境搭建"""类似于vue--Djangonode--p... 查看详情
vue项目目录结构
转自https://www.cnblogs.com/liyunfei0103/p/10183620.html生成的目录结构如下文件夹： build--webpack相关配置文件，一般情况下不需要自己配置 config--vue基本配置文件，可配置端口号，打包输出等 node_modules--依赖包，也就是运行cnpmi... 查看详情
从零开始vue项目实战-项目结构
...始的“WelcometoYourVue.jsApp”页面了目录结构├──README.md项目介绍├──index.html入口页面├──build构建脚本目录│├──build-server.js运行本地构建服务器，可以访问构建后的页面│├──build.js生产环境构建脚本│├──dev-clien... 查看详情
vue开发系列二熟悉项目结构
初始项目结构如上所示。src: 写代码地方，我们大部分的操作都在此static：资源目录 static目录下还可以放一些第三方的js库，通用的css等，这样每次打包的时候节省打包时间 查看详情