vue项目中各文件的使用说明

vue项目中各文件说明

1.vue-cli脚手架初始化项目

2.node+webpack+淘宝镜像

3.node_modules文件夹：项目依赖文件

4.public文件夹：放置静态资源（图片），webpack在打包时会原封不动的打包到dist文件夹中。

5.src文件夹（程序员源代码文件夹）：

• assets文件夹：放置静态资源（多个组件共用的静态资源），在webpack打包时会把静态资           源当成模块打包到JS文件中
• components：放置非路由组件（全局组件）
• APP.vue：唯一的根组件
• main.js：程序入口文件，整个程序中最先执行的文件
• api设计请求相关的
• 项目的配置项文件

6.babel.config.js：配置文件（与babel相关），一般不去修改

7.package.json：相当于项目的身份证，配置信息，记录项目叫做什么、项目中有哪些依赖、项目怎么运行，

8.package-lock.json：可以删除，是一个缓存文件

9.README.md：说明性文件

vue项目中文件名简介

我们创建完项目之后，打开项目文件是这样的，把原始界面效果清除之后页面是空白的。

下面介绍一下这些文件都有什么作用

1 node_modules

node_module保存的是npm加载的项目的依赖模块

2 public

放置图片

注意：public 与 assets 目录的区别

public：public放不会变动的文件 public建议放一些外部第三方

assets：assets放可能会变动的文件，自己的文件放在assets，别人的放public中

public放别人家js文件(也就是不会变动)，assets放自己写的件(需要改动的文件)

3 src

src文件夹保存的用于开发的目录

• 1) assets (放置图片，主题、字体等静态资源)
• 2) components (全局公用组件文件)
• 3) router (路由)
• 4) store (vuex信息/全局 store管理)
• 5) styles (样式)
• 6) utils (工具)
• 7) views (views 所有页面)
• 8) App.vue (项目入口页面)
• 9) main.js (项目的核心文件，入口文件、加载组件、初始化等)

4 .browserslistrc

在使用脚手架搭建项目时，会自动生成.browserslistrc文件，该文件主要是配置兼容浏览器

5 .gitignore

.gitignore 可以避免在提交代码时把我们不想上传的文件提交到git中

6 babel.config.js

Babel是一个JS编译器，主要作用是将ECMAScript 2015+ 版本的代码，转换为向后兼容的JS语法，以便能够运行在当前和旧版本的浏览器或其它环境中。

Vue项目中普遍使用ES6语法，若要求兼容低版本浏览器，就需要引入Babel，将ES6转换为ES5。

7 package-lock.json

package-lock.json是在npm install执行的时候生成的一份文件，用来记录package.json的来源和版本号。

• package-lock.json锁住package.json的来源和版本号，多人开发拉取代码，执行npm install生成node_modules时依赖的版本能保持一致。
• package-lock.json记录了版本号和依赖来源，不用node_modules也提交到代码仓库中。

注意：如果打不开页面，可能是兼容版本出现问题，我们这时可以把这个文件删掉

8 package.json

package.jsons是项目配置的文件，一般和 node_module的资源关联

9 README.md

md文件一般出现在项目的根目录下面，其作用是：对项目的主要信息进行描述。

如果一个项目你很长时间都没有动，突然你需要修改这个项目，那么通过README.md中对项目的描述能让你快速的再次上手；或者别人拿到你的项目也能通过README.md文件的描述快速的了解该项目。

10 vue.config.js

vue.config.js是vue打包管理的配置文件，旨在给开发者们自定义自己的配置

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

最新评论