vue-cli (3.0.0 version) directory

About the project

  • The currently  vue-cli used version is 3.0.0.
  • The item srcfolder added some I wrote vuesome of the common directory when the project framework, the following will detail.
  • I have another project on the comments of the code to understand  vue-clithis scaffolding.
  • That can not be used directly aimed at understanding vue-cli project structure.
  • Some directories will have the following detailed description and links to the official website and related links.

The directory structure explained


|-- build                            // 项目构建(webpack以及简易node服务)相关代码
|   |-- build.js                     // 生产环境构建代码 (执行npm run build 时,执行此文件)
|   |-- check-version.js             // 检查node、npm等版本
|   |-- utils.js                     // 主要处理一些css相关的loader
|   |-- vue-loader.config.js         // vue-loader 的配置项设置(utils 中的一些配置,也是在这里传进去的)
|   |-- webpack.base.conf.js         // webpack基础配置
|   |-- webpack.dev.conf.js          // webpack开发环境配置
|   |-- webpack.prod.conf.js         // webpack生产环境配置
|-- config                           // 项目开发环境配置
|   |-- dev.env.js                   // 开发环境变量
|   |-- index.js                     // 项目一些配置变量
|   |-- prod.env.js                  // 生产环境变量
|   |-- test.env.js                  // 测试环境变量
|-- src                              // 源码目录
|   |-- components                   // vue公共组件
|   |-- store                        // vuex的状态管理
|   |-- router                       // 路由文件
|   |-- App.vue                      // 页面入口文件
|   |-- main.js                      // 程序入口文件,加载各种公共组件
|-- static                           // 静态文件,比如一些不需要编译的图片、font字体、json数据等
|-- test                             // 关于测试的文件
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义和维护一致的编码风格 1
|-- .eslintignore                    // 设置那些文件忽略eslint 代码检测 2
|-- .eslintrc.js                     // eslint代码检测配置 2
|-- .gitignore                       // git上传需要忽略的文件格式
|-- .postcssrc.js                    // 处理css 比如,给css加上兼容性前缀
|-- index.html                       // 入口页面
|-- package.json                     // 项目基本信息
|-- package-lock.json                // 锁定插件版本的文件(当你第二下载插件时,自动生成)
|-- README.md                        // 项目说明

  1. About editorconfigsome of the things  the official website of  the article
  2. Something about eslint's  official website  Related Articles

src catalog description

src directory I added some sing when writing project to build their own directory structure

|-- src                              // 源码目录
|   |-- api                          // api请求接口目录(里面apis 存储所有api接口,还可以对应页面建目录,来写api请求)
|   |   |--apis                      // 存储所有api接口
|   |-- components                   // vue公共组件
|   |   |-- layout                   // 存放页面整体结构目录(例如头部,尾部,客服浮动框)
|   |   |-- Home.vue                 // 网站首页
|   |   |-- Main.vue                 // 网站整体构架的搭建
|   |-- public                       // 公共方法
|   |-- store                        // vuex的状态管理
|   |-- router                       // 路由文件
|   |-- theme                        // 存放一些公共主题样式,比如页面的主色调,副色调,hover色调,按钮色调
|   |-- utils                        // 针对项目对异步请求的一些封装目录(我这里对axios进行了简单的封装)
|   |-- App.vue                      // 页面入口文件
|   |-- main.js                      // 程序入口文件,加载各种公共组件

Guess you like

Origin blog.csdn.net/qq_42043377/article/details/93475486