Vue文件源码结构

这里写图片描述
1. build
这里主要是放webpack的一些配置。
这里写图片描述
(1)build.js
build文件夹里有一个 build.js ,是我们完成项目之后需要运行的, 可以将我们的项目文件打包成静态文件,存放在项目根目录的 dist 文件夹中,当然你可以自己设置路径,在 config 文件夹中的 index.js 中改,可以指定主页,默认是 index.html。
(2)check-versions.js
主要是检查一些所依赖的工具的版本是否适用,如nodejs、npm,若版本太低则会提示出来。
(3)dev-client.js
热重载相关
(4)dev-server.js
是一个用作服务器端的东西,涵盖了express和它的一些模块,为了在本地服务器上把我们的项目跑起来的一个文件,引入了反向代理的模块,我们可以用来发起跨域请求。
(5)utils.js
此配置文件是vue开发环境的wepack相关配置文件,主要用来处理css-loader和vue-style-loader,以便于解析各种格式的css,如 less,sass 什么的。
(6)vue-loader.conf.js
它把上面的 utils.js 引入了,应该是用于切换 开发模式和 生产模式的文件吧,以便于用不同模式来解析css。
2. config
保存一些项目初始化的配置
3.node_modules
环境依赖,npm install 可以从当前根目录中的 package.json 文件中读取所要安装的模块的名称和版本,然后一次性安装所有的依赖。
4.src
这里写图片描述

(1)App.vue 是我们的主组件,也是我们所有组件和路由的出口,之后他会被渲染到我们项目根目录的 index.html 中显示出来,我们可以在这里写一些适合全局的css样式,比如说 css reset,字号,字体什么的。
(2)assets
是我们放一些静态图片资源的目录,虽然我没有放图片在里面。
(3)components
这里存放的是我们写的各种组件,各个组件联系在一起组成一个完整的项目
(4)router
我们定义路由的地方,虽然也可以直接在 main.js 中直接定义,但是分开的话结构更加清晰,路由的定义我们下次再说~
(5)main.js
入口文件,引入了 vue模块 和 app.vue 组件 以及 路由router,我们需要在全局使用的一些东西也可以定义在这里面。 main.js是项目的核心文件。
4、static文件夹用来放置静态资源目录
5、index.html是首页入口文件
6、package.json是项目配置文件

猜你喜欢

转载自blog.csdn.net/qq_25905161/article/details/81508141