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

忘是亡心i 2022-05-28 10:47 196阅读 0赞

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

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

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

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

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

![20180403202730630][]

"presets"：表示预设

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

![20180403203757769][]

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

![20180403211606492][]

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

![20180403211649446][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70 1][]

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

![20180403210146184][]

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

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

![20180403211014180][]

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

![20180405151142879][]

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

[20180403201615244]: /images/20220528/18d3cc5be86f4b21a4977b585d186ffd.png
[20180403202730630]: /images/20220528/495963ca2d9c4b02a54d20ec223be039.png
[20180403203757769]: /images/20220528/66dfb1431d7d484d956ebf7ed90d85f4.png
[20180403211606492]: /images/20220528/d7d7324a8e8f4414a16bd3793893f536.png
[20180403211649446]: /images/20220528/b191fab8303749fdbc1d18b0eb03cd74.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70]: /images/20220528/a326045df9104e87ba37acd4c5ed30e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70 1]: /images/20220528/cf8608e104cd4aec8418a80d8ae2ac89.png
[20180403210146184]: /images/20220528/5f0e1b1df0f543c5a46e9099cd5048d1.png
[20180403211014180]: /images/20220528/56735223294d4415b1d110bec4a6cd23.png
[20180405151142879]: /images/20220528/be72338274574d98ab807ec27a4d80c4.png