深入理解Vue-cli搭建项目后的目录结构探秘

2020-06-12 21:10:20易采站长站整理

目录结构:


├── build.js

├── check-versions.js

├── dev-client.js

├── dev-server.js

├── utils.js

├── vue-loader.conf.js

├── webpack.base.conf.js

├── webpack.dev.conf.js

└── webpack.prod.conf.js

(1)build.js

build文件夹里有一个 build.js ,是我们完成项目之后需要运行的, 可以将我们的项目文件打包成 静态文件,存放在项目根目录的 dist 文件夹中(现在目录里还没有这个文件夹,build的时候会自动生成),当然你可以自己设置路径,是在。。应该是在 config 文件夹中的 index.js 中改,可以指定主页,默认是 index.html。

(2)check-versions.js

主要是检查一些所依赖的工具的版本是否适用,如nodejs、npm,若版本太低则会提示出来。

(3)dev-client.js

应该是本地客户端开发中有关热更新的吧~

(4)dev-server.js

是一个用作服务器端的东西,涵盖了express和它的一些模块,为了在本地服务器上把我们的项目跑起来的一个文件,引入了反向代理的模块,我们可以用来发起跨域请求。

(5)utils.js

(是一个功能模块?)里面引入了一些css-loader,以便于解析各种格式的css,如 less,sass 什么的。

(6)vue-loader.conf.js

它把上面的 utils.js 引入了,应该是用于切换 开发模式和 生产模式的文件吧,以便于用不同模式来解析css。

下面那三个我只知道是webpack的一些打包的设置,比如指定入口文件啊,依赖安装路径啊,对不同后缀的文件用不同的loader去解析呀什么的。目前不了解这个也对我们开发项目影响不大~

2. config

不知道干啥的,应该是配置文件

3.node_modules

依赖所存在的文件,就是我们一开始使用 npm install 安装的东西,都在里面,以后我们要添加依赖也是放在这个里面,可能有人会又疑问,你 npm install 后面啥也没加啊,你安装了啥。一看就是不了解 npm 的人(虽然我也不了解(捂脸)),npm install 可以从当前根目录中的 package.json 文件中读取所要安装的模块的名称和版本,然后一次性安装所有的依赖。

4.src

终于到了最重要的部分,src目录就是一般我们需要写的地方了,先放一下目录结构:


├── App.vue

├── assets

├── components

├── main.js

└── router

(1)App.vue 是我们的主组件,也是我们所有组件和路由的出口,之后他会被渲染到我们项目根目录的 index.html 中显示出来,我们可以在这里写一些适合全局的css样式,比如说 css reset,字号,字体什么的。