持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第19天，点击查看活动详情
CLI (
@vue/cli) 是一个全局安装的 npm 包，提供了终端里的vue命令，我们可以通过vue create快速搭建一个新项目，
一个vue-cli项目的结构体系，帮助我们快速了解项目，同时可以在github搜索一些开源的项目来学习，有助于快速了解整个项目的体系
一、目录结构
以Vue项目为例，以下是常见的一种目录结构，实际中会根据不同的项目有所差别
├── node_modules
├── public
│ └── static
├── src
│ ├── App.vue
│ ├── mian.js
│ └── ...
├── index.js
├── .eslintrc.js
├── ...
二、具体含义
-
项目
-
node_modules
-
src
- api ：接口声明
- assets ：图片和公共组件css文件
- components ：公共组件库
- layout ：布局
- router ：项目路由相关的声明和配置
- store ：vuex状态管理的相关配置
- utils ：通用方法和校验
- views ：页面地址
- App.vue ：根组件app.vue
- main.js ：项目的入口文件：定义vue实例，引入根组件，进行挂载
-
plopfile.js可以根据一个模板文件批量生成文本或者代码，不再需要手动复制粘贴的脚手架工具，
-
README.md markdown文档，关于项目的信息以及安装启动等指引
-
postcss.config.js postcss插件配置文件
-
package-lock.json 记录当前状态下实际安装的各个npm package的具体来源和版本号，确保安装和兼容的依赖关系一致（在项目执行npm install就会生成）
-
package.json 文件的内容是一个JSON对象，里面包含了项目常见的配置，比如项目启动、版本、打包命令，依赖包的声明等等（在项目init的时候生成）
-
jest.config.js jest 测试框架的配置文件
-
Dockerfile 用来构建镜像的文件
-
babel.config.js babel配置文件，为了兼容低版本浏览器，将ES6转化成ES5
-
.gitignore 配置不需要添加到git版本管理中的文件，比如
node_modules、编译器生成的配置文件等 -
.eslintrc.js 配置项目的 eslint 校验,统一代码风格
-
.env.production 生产环境
-
.env.development 开发环境
-
三、启动项目的过程
当我们在终端中输入 npm run xxxx运行项目时候，会执行package.json文件中scripts下的对应命令
因为在执行npm install后，声明的包都会下载到node_modules目录下，执行npm run dev的时候，就去node_modules/目录下寻找对应文件并执行
