Vuejs基本知识(一)【项目文件夹基本结构】

灰太狼 2021-06-26 16:06 599阅读 0赞

# Webpack下的Vuejs项目文件结构 #

根据前面章节，我们安装了 `webpack, vue-cli`, 并运行成功，看到了Vuejs的第一个页面。

那么首先，我们需要对Webpack 下的Vuejs有个全面的了解。

在我们运行了命令后，

$ vue init webpack my-project

会生成一个崭新的项目。 它的文件结构如下：

▸ build/                // 编译用到的脚本
    ▸ config/               // 各种配置
    ▸ dist/                 // 打包后的文件夹
    ▸ node_modules/         // node第三方包
    ▸ src/                  // 源代码
    ▸ static/               // 静态文件, 暂时无用
      index.html            // 最外层文件
      package.json          // node项目配置文件

下面我们针对重要的文件和文件夹来依次说明.

## `build` 文件夹 ##

这个文件夹中，保留了各种打包脚本。 是不可或缺的，不要随意修改。

展开后如下：

▾ build/
        build.js
        check-versions.js
        dev-client.js
        dev-server.js
        utils.js
        vue-loader.conf.js
        webpack.base.conf.js
        webpack.dev.conf.js
        webpack.prod.conf.js

*  build.js:

打包使用，不要修改。

*  check-versions.js:

检查npm的版本， 不要修改。

*  dev-client.js 和 dev-server.js:

是在开发时使用的服务器脚本。不要修改。（借助于node这个后端语言，我们在做vuejs开发时，可以通过 `$npm run dev`这个命令，打开一个小的server, 运行vuejs. )

*  utils.js

不要修改。 做一些css/sass 等文件的生成。

*  vue-loader.conf.js

非常重要的配置文件，不要修改。 内容是用来辅助加载vuejs用到的css source map等内容。

*  webpack.base.conf.js
 *  webpack.dev.conf.js
 *  webpack.prod.conf.js

这三个都是基本的配置文件。不要修改。

## config 文件夹 ##

跟部署和配置相关。

▾ config/
        dev.env.js
        index.js
        prod.env.js

*  dev.env.js

开发模式下的配置文件，一般不用修改。

*  prod.env.js

生产模式下的配置文件，一般不用修改。

*  index.js

很重要的文件， 定义了:

*  开发时的端口（默认是8080），
 *  图片文件夹（默认static)，
 *  开发模式下的 代理服务器. 我们修改的还是比较多的。

对于这个文件夹的内容，我们会在后续的章节中陆续进行解释（例如对于某个页面的渲染过程，如何做代理转发)

## `dist` 文件夹 ##

打包之后的文件所在目录，如下。

▾ dist/
      ▾ static/
        ▾ css/
            app.d41d8cd98f00b204e9800998ecf8427e.css
            app.d41d8cd98f00b204e9800998ecf8427e.css.map
        ▾ js/
            app.c482246388114c3b9cf0.js
            app.c482246388114c3b9cf0.js.map
            manifest.577e472792d533aaaf04.js
            manifest.577e472792d533aaaf04.js.map
            vendor.5f34d51c868c93d3fb31.js
            vendor.5f34d51c868c93d3fb31.js.map
        index.html

可以看到，对应的`css, js, map`, 都在这里。

请大家注意 文件名中的无意义的字符串，这个是随机生成的。 目的是为了让文件名发生变化 ，方便我们的部署，也方便Nginx服务器重新对该文件做缓存。

*  `app.css` : 编译后 的CSS 文件
 *  `app.js` : 最核心的js 文件. 几乎所有的代码逻辑都会打包到这里。
 *  `manifest.js` ： 生成的周边js 文件
 *  `vendor.js` ： 生成的vendor.js 文件

另外，每个 `.map` 文件都非常重要。 可以简单的认为，有了 `.map` 文件，我们的浏览器就可以先下载整个的`.js` 文件，然后在后续的操作中“部分加载” 对应的文件。

切记： 这个文件夹不要放到git中。 因为每次编译之后，这里的文件都会发生变化。

## `node_modules` 文件夹 ##

`node`项目所用到的第三方包，特别多，特别大。 `$ npm install` 所产生。 所有在 `package.json` 中定义的第三方包都会出现在这里。

package.json :

// ...
      "dependencies": {
        "vue": "^2.3.3",
        "vue-resource": "1.3.3",
        "vue-router": "^2.3.1",
        "vuex": "^2.3.1"
      },
      "devDependencies": {
        "autoprefixer": "^6.7.2",
        "babel-core": "^6.22.1",
        "babel-loader": "^6.2.10",
        "babel-plugin-transform-runtime": "^6.22.0",
        "babel-preset-env": "^1.3.2",
        "babel-preset-stage-2": "^6.22.0",
        "babel-register": "^6.22.0",
        //...
      }
      // ...

`node_modules` 文件夹里面往往会有几百个文件夹，看起来如下：

![node module folder][]  
这个文件夹不要放到`git`中。

## src 文件夹 ##

最最核心的源代码所在的目录。 展开后如下所示（不同版本的vue-cli生成的目录会稍有不同，不过核心都是一样的）：

▾ src/
      ▾ assets/
          logo.png
      ▾ components/
          Book.vue
          BookList.vue
          Hello.vue
      ▾ router/
          index.js
        App.vue
        main.js

*  `assets` 文件夹

用到的图片都可以放在这里。

*  `components`

用到的"视图"和"组件"所在的文件夹。（最最核心）

*  `router/index.js`

路由文件。 定义了各个页面对应的url.

*  `App.vue`

如果`index.html` 是一级页面模板的话，这个`App.vue`就是二级页面模板。  
所有的其他`vuejs`页面，都作为该模板的 一部分被渲染出来。

*  `main.js`

没有实际的业务逻辑，但是为了支撑整个`vuejs`框架，存在很必要。

[node module folder]: /images/20210626/c0dc44ff94bc4e4ea821f96186a792fc.png