关于vue-cli4:vuecli4-目录结构介绍

36次阅读

共计 1010 个字符,预计需要花费 3 分钟才能阅读完成。

一、应用 vue-cli4 脚手架初始化我的项目后,目录构造如下:

├── README.md
├── babel.config.js
├── node_modules
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   ├── main.js
│   ├── router
│   │   └── index.js
│   ├── store
│   │   └── index.js
│   └── views
│       ├── About.vue
│       ├── Home.vue
│       └── video
│           └── clip
│               ├── class
│               │   └── list.js
│               ├── clip.vue
│               └── data.json
├── vue.confog.js
└── yarn.lock

二、目录介绍

  • README.md 我的项目介绍
  • node_modules 相干依赖
  • package.json 项目名称,所须要模块、版本、运行命令
  • public 寄存动态目录。public上面的文件会一成不变的增加到 dist 中,不会被合并、压缩;不会被 webpack 打包工具所解决,多用来寄存第三方插件。相似于 vue2 中的 static 目录。所以想要援用,必须应用绝对路径.
  • public/index.html 模板文件,生成我的项目的入口文件,打包后的 js、css 主动注入到该页面
  • src 寄存各种 vue 文件的中央
  • src/assets 用于寄存各种动态文件,如图片,css。编译之后,assets 目录中的文件,会被合并到一个文件中,而后进行压缩。多用来寄存业务级的 js、css 等,如一些全局的 scss 款式文件、全局的工具类 js 文件。图片的援用形式只能通过:<img class="logo" src="@/assets/logo.png" alt="" />形式援用。
  • src/compnents 寄存公共组件
  • src/views 寄存页面级页面
  • src/App.vue 主 vue 组件 引入其余组件,App.vue 是我的项目的主组件。
  • src/main.js 入口文件,初始化 vue 实例,也能够在此援用组件库或者全局变量
  • src/router.js 路由文件,各个页面的路由
  • src/store.js 状态文件

正文完
 0