使用vue-cli创建的的项目的文件介绍

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

1、使用vue-cli安装的项目的整个文件如下图所示下面介绍一级目录的文件夹的作用
使用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文件里面的内容:

使用vue-cli创建的的项目的文件介绍

"presets":表示预设

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

使用vue-cli创建的的项目的文件介绍

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

使用vue-cli创建的的项目的文件介绍

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

使用vue-cli创建的的项目的文件介绍

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

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

使用vue-cli创建的的项目的文件介绍

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

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

使用vue-cli创建的的项目的文件介绍

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

使用vue-cli创建的的项目的文件介绍

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