揭秘!Vue项目结构!自动创建Vue项目，解放生产力

继上一篇 前端构建神器webpack

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。

Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，基于 webpack 构建，并带有合理的默认配置；：

1. 交互式的项目脚手架。
2. 实现的零配置原型开发。

Vue CLI 将 Vue 生态中的工具基础标准化。而不必纠结配置的问题。

经过下面几步，就可构建如上图中的项目

1. 安装nodejs，命令行输入 node –v检测安装是否成功
2. 安装vue-cli脚手架：

npm i -g @vue/cli-init,命令行输入 vue –v检测安装是否成功

1. 新建项目vue init webpack myVue，myVue是项目名称。其中ESLint，单元测试，Nightwatch可以不选择
2. 打开项目文件夹 myVue，npm install 下载依赖
3. 运行项目 npm start;

项目结构如下

目录结构详解，如下图