vue-cli目录结构

vue-cli的目录结构

其中build和config都是配置相关的文件。

  build和config

 

如图所示，build中将webpack的配置文件做了分离：

 

- `webpack.base.conf.js`（公共配置）

- `webpack.dev.conf.js`（开发环境）

- `webpack.prod.conf.js`（生产环境）

 

我们使用的脚本命令配置在`package.json`中。

 

打包构建：

 

```bash

npm run build

```

 

如果搭建了本地服务器`webpack-dev-server`，本地开发环境：

 

```bash

npm run dev

```

 

此时`npm run build`打包命令相当于使用node 执行build文件夹下面的build.js文件。

 

> build.js

 

1. 检查dist文件夹是否已经存在，存在先删除

2. 如果没有err，就使用webpack的配置打包dist文件夹

 

在生产环境，即使用build打包时候，使用的是`webpack.prod.conf.js`配置文件。

 

源码中，显然使用了`webpack-merge`插件来合并prod配置文件和公共的配置文件，合并成一个配置文件并打包，而`webpack.dev.conf.js`也是如此操作，在开发环境使用的是dev的配置文件。

 

config文件夹中是build的配置文件中所需的一些变量、对象，在`webpack.base.conf.js`中引入了`index.js`。

 

```javascript

const config = require('../config')

```

 

###   src和static

 

src源码目录，就是我们需要写业务代码的地方。

 

static是放静态资源的地方，static文件夹下的资源会原封不动的打包复制到dist文件

 

#### .babelrc文件

 

.babelrc是ES代码相关转化配置。

 

```json

{

  "presets": [

    ["env", {

      "modules": false,

      "targets": {

        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]

      }

    }],

    "stage-2"

  ],

  "plugins": ["transform-vue-jsx", "transform-runtime"]

}

```

 

1. browsers表示需要适配的浏览器，份额大于1%，最后两个版本，不需要适配ie8及以下版本

2. babel需要的插件

 

####    .editorconfig文件

 

.editorconfig是编码配置文件。

 

```properties

root = true

 

[*]

charset = utf-8

indent_style = space

indent_size = 2

end_of_line = lf

insert_final_newline = true

trim_trailing_whitespace = true

```

 

一般是配置编码，代码缩进2空格，是否清除空格等。

 

####  .eslintignore文件

 

.eslintignore文件忽略一些不规范的代码。

 

```

/build/

/config/

/dist/

/*.js

```

 

忽略build、config、dist文件夹和js文件。

 

.gitignore文件

 

.gitignore是git忽略文件，git提交忽略的文件。

 .postcssrc.js文件

 

css转化是配置的一些。

 

#### index.html文件

 

index.html文件是使用`html-webpack-plugin`插件打包的index.html模板。

 

####  package.json和package-lock.json

 

1. package.json(包管理,记录大概安装的版本)

2. package-lock.json(记录真实安装版本)