vue2.x工程目录简介

蔚落 2022-03-24 19:09 310阅读 0赞

# 工程目录简介 #

上一篇文章写了如何利用vue-cli3.0脚手架快速的搭建一个基于vue2.x的工程  
这一篇文章就简单介绍一下工程目录结构。

|--dist                         打包之后的发布目录      
    |   |--css                          存放打包之后的css文件夹
    |   |--img                          存放打包之后的img资源文件夹
    |   |--js                           存放打包之后存放的js文件夹
    |   |--index.html                   存放打包之后的入口页面
    |
    |--mock                             本地前端工程mock的一些数据  
    |
    |--node_module                  本地项目的第三方依赖
    |
    |--public               
    |
    |--src                          开发目录  
    |   |
    |   |--assets                       开发时候存放的一些静态资源
    |   |
    |   |--components                   业务开发的组件   
    |   |
    |   |--lib                          开发过程中自己写的一些工具库
    |   |
    |   |-plugins
    |   |
    |   |-router                    前端工程的路由，将其模块化，单独的拿出来
    |   |   |
    |   |   |-router.js                 工程的路由配置
    |   |
    |   |-vuex                      vuex转态管理
    |   |   |
    |   |   |-store.js
    |   |
    |   |-App.vue                   工程的入口文件，也是整个工程的根组件  
    |   |-main.js                   工程的入口文件，用以引入一些全局变量  
    |   |-.gitignore                提交git仓库忽略的文件
    |   |-babel.config.js           babel的一些配置
    |   |-package.json              依赖的第三方配置文件
    |   |-readMe.md				    项目简单介绍

其中有一些文件目录不是vue create vue 跑出来的。比如vuex是后续在项目开发过程中添加的，这里一并罗列出各个文件夹下的一些路径，并注释其作用。  
在vue-cli3中开发过程已经非常简化了  
大体上开发过程中就会用到下面几个命令

*  npm install 这个是项目开始的时候根据package.json安装所有的第三方依赖
 *  npm run serve 开发过程中本地启动一个本地服务调试我们所开发的组件
 *  npm run build 转移到生产环境上，将开发环境的代码打包。

其中我们关注的最多的就是src/component这个文件夹，这个文件夹下面有我们开发的所有业务组件。

发表评论取消回复

表情：

评论列表（有 0 条评论，310人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue2.x - Vue Router

目录 Vue与SPA 什么是SPA 简单了解SPA 什么是MPA SPA相较于MPA的优点实现SPA的几个关键点理解SPA单页面架构什么是前端路由锚链

小鱼儿/ 2023年09月28日 11:15/ 0 赞/ 56 阅读

相关 Vue2.x - Vuex

目录初识Vuex 什么是Vuex 为什么要用Vuex Vuex的基本使用计数器案例在项目中使用Vuex 安装Vuex到项目中引入vuex插件并注册创

悠悠/ 2023年09月28日 09:53/ 0 赞/ 124 阅读

相关 React项目工程目录文件简介

![在这里插入图片描述][20200921192715422.png_pic_center] yarn.lock 项目依赖安装包版本号不用动 README.md 项目

﹏ヽ暗。殇╰゛Y/ 2022年12月09日 03:30/ 0 赞/ 196 阅读

相关 Hadoop2.x目录结构

Hadoop2.x目录结构 drwxr-xr-x. 2 lsl lsl 4096 5月 22 2017 bin drwxr-xr-x. 3 lsl

我就是我/ 2022年04月06日 05:27/ 0 赞/ 236 阅读

相关 vue2.x工程的新建

vue2.x工程的新建最近也在看一些vue的项目，有些心得有些体会，把这些心得体会沉淀下来写成一个vue的专栏和大家一起分享一下。将会基于vue2.x 和vue-

川长思鸟来/ 2022年03月25日 16:04/ 0 赞/ 341 阅读

相关 vue2.x工程目录简介

工程目录简介上一篇文章写了如何利用vue-cli3.0脚手架快速的搭建一个基于vue2.x的工程这一篇文章就简单介绍一下工程目录结构。 |--dist

蔚落/ 2022年03月24日 19:09/ 0 赞/ 311 阅读

相关 Vue 2.x 文件夹目录

外层目录： readme //项目的说明文件 package.json //第三方依赖包配置 package

怼烎@/ 2022年03月07日 19:46/ 0 赞/ 210 阅读

相关 Vue CLI 2.x搭建vue,目录最全分析

一、vue-cli介绍 vue-cli是一个用于快速搭建vue项目的脚手架。二、vue-cli安装、更新安装过nodeJs 、cnpm 后，全局安装vue-

绝地灬酷狼/ 2022年01月07日 03:19/ 0 赞/ 276 阅读

相关 vue2.X 工程webpack-dev-server后打开浏览器问题

vue2.X 工程webpack-dev-server后打开浏览器问题 1、自动打开默认浏览器根目录下，config文件夹/index.js文件中，修改dev对象

Bertha 。/ 2021年09月30日 00:14/ 0 赞/ 465 阅读

相关 VUE 2.X 工程各种监听大全

目录 VUE 2.X 工程监听使用大全（监听使用+监听本身的属性介绍）一、监听string属性值的变化二、监听object对象三、监听路由四、监听本身的

谁践踏了优雅/ 2021年07月25日 02:55/ 0 赞/ 315 阅读