使用vue-cli创建的的项目的文件介绍,设置静态数据不被提交到仓库上

使用vue-cli创建的工程的相关文件介绍

1、使用vue-cli安装的项目的整个文件如下图所示下面介绍一级目录的文件夹的作用

sell2是项目名;一级目录下的文件夹名build和config都是和webpack配置相关的;文件夹node_modules是通过npm install安装的依赖代码库;文件夹src用来存放项目源码,即开发的代码都放在src文件夹下;文件夹static存放第三方静态资源的,只有一个.gitkeep文件,这个文件的作用是当这个目录为空,也可以把这个目录提交到git代码仓库里。

2、下面看一下一级目录下的文件的作用

A、.babelrc:是babel的一些配置,代码是es6书写的,大部分的浏览器不能直接支持es6语法,所以通过babel将es6编译成es5,下图是.babelrc文件里面的内容:

"presets":表示预设

B、.editorconfig:表示编辑器的一些配置,如下图所示

C、.eslintignore:文件内容显示如下,不会对build和config文件夹下的内容做es语法检查

D、.eslintrc.js:是对eslint的一些配置

E、.gitignore:表示仓库会忽略掉这些文件或者目录,不会将代码提交到线上的仓库里面去

在项目的根目录 下会有static文件夹名,用于存放静态资源,前端做的一些假设静态数据一般放在这里,比如static/mock/index.json

当把代码提交到仓库的时候,不把这个静态的资源文件夹mock内容提交,则在.gitignore文件添加如下内容:

 

F、index.html就是我们的入口html文件,如下图所示

在这个文件里面没有依赖任何css或者js文件,这是因为在webpack编译时自动会插入到这个html文件里面

G、package.json:项目的配置文件,一般是用来描述一个项目,如下图所示

注意该文件里面不能有注释,否则会出现下面的错误提示:Failed to parse json; Unexpected token '/' at 12:20 "dependecies":{//jkdj。其中Unexpected token '/' 就表明错误的原因,这句话"dependecies":{//jkdj就表明出错的地方。这里是因为有注释所以才报错,将注释去掉就可以了。

H、README.md:项目的一些描述文件

 

 

 

相关文章

https://segmentfault.com/a/1190000022018995 https://www....
ES6 (ECMAScript 6)中的模块是一个包含 JavaScript 代码的...
from https://mp.weixin.qq.com/s/-rc1lYYlsfx-wR4mQmIIQQ V...
D:\Temp>npm init vite@latest vue3study --temp...
文章浏览阅读1.2k次。最近自己从零撸起的甘特图组件需要子组...
文章浏览阅读3.3k次,点赞3次,收藏16次。静默打印是什么?简...