vue全家桶：https://www.bilibili.com/video/av70949811/
这个视频还行 讲的很细
webpack的构建项目分析，项目目录分析
src（资源目录文件）都是放css，js，images文件的
因为会用到webpack，所有已会有webpack.config.js
这是后缀名为js的但是我们并没有放到js资源中
还有很多的配置文件
首先是我们用webpack创建的vue项目目录
.git文件是我们的代码管理
dist文件有dundle.js这个文件是webpack进行打包输出的文件，还有index.html忘了不知道是干嘛的
src资源管理文件：我们的组件，所有的资源放在这里入口文件main.js,入口App.vue文件，index.html
router.js。还有我们的js，images。这个lib是我们放第三方包的，又不是用npm下载的
然后呢！同级目录下都是配置文件：.babelrc .gitignore LICENSE(这个我倒是忘了是干嘛的了)
package.json webpack.config.js 还要一个readme文件 有三个文件是我们上传到github上一般要写的东西吧
用脚手架创建的项目目录也是差不多啦
也会有点不一样，vue create
但是都是一样。我现在要做的是理清关系
我才知道，为什么有创建这么多东西。都是知道是为了方便管理
那回到最开始，前端的主要任务是什么
写页面，静态页面（HTML，css，js）
index.html（这是主界面）然后js，css，images
我们都放在src中，然后引入进来。随着我们的项目
越来越大，我们需要的插件，框架越来越多，
我们需要引入的就越来越多，有很多的后缀名
有很多的依赖，我们该如何管理
项目的第一步：index.html文件
我们不想把所有的静态资源全部引入到index.html中
也为了减少二次请求，然后webpack就诞生了，他将所有的
静态资源打包成一个文件js文件。经过webpack打包的
文件boudle.js之后,引入这个文件到index.js就可以了
这样的文件，浏览器可以认识并渲染它
项目的第二步：建一个入口文件，main.js 经过webpack打包 bundle.js
然后接下来我们用我们主要的开发框架vue
组件，模块化开发
我们会把所有文件都引入到main.js这个文件中
那么相当于我们，一共就是只有两个文件
index.html main.js这两个文件
OK，项目目录，项目搞清楚了
开始一点点的写项目了
前后端分离，就真的是后端那边接口，然后丢给我们
现在的vue是以数据驱动为核心，不再操作dom
和以前的jquery不同了
现在的vue-cli是3版本了和2版本还是有很多差别吧
前后端必备技术，Mock技术。怎么说呢，就是我们课可以不用等待
后端传过来接口数据，我们可以先用Mock技术模拟数据。然后呢
当后端有接口数据给我们的时候，我们用Mock技术将其融合就可以了
vue全家桶和webpack有关系吗？没有什么关系
vue只是基础的语法 为更好快捷的做项目，满足更好多的需求的时候
全家桶这几技能就诞生了 都是基于vue 但不是同一个作者写的
借用建筑工程学上的概念，搭建架子
方便我们去构建项目
就是说vue-cli可以一键生成，为我们配置好了
webpack，因为我们要进行打包，所以还会用到
webpack。每次做项目都搭建webpack配置的话
很麻烦，所以vue-cli出现了命令行界面
所以为什么我vue create的时候会很久
因为它会自己下载很多的资源包
然后会自己配置好，
vue.js官方脚手架就是使用了webpack模板
层层联系：vue-cli ==》webpack ==》依赖node.js
这些webpack，vue-router，axios，vu-cli都是工具
那我们使用之前，要先安装这些工具，然后才可以使用
npm install -g @vue/cli 这是脚手架vue-cli3.x的安装
现在很少有人再搭建脚手架2了，因为在3的基础上是可以安装
做一个脚手架2的模板的
这个-g可以加在前面，也可以加在后面。并没有什么影响
这些参数的东西
所以我上次用的init这个2.x版本的
这个yarn也会一个包管理工具
因为当时的npm不好用，然后呢那些大厂就推出了这个yarn
脚手架vue-cli3.x创建项目直接 vue create 项目名
当我拉取脚手架2之后，我想创建2，就用2的命令 vue init webpack my-project
这样的话，他就会在这个项目中配置好webpack
脚手架2创建项目还有很多选项要选择的
想创建3就用3命令就好了
