前端基础之《Vue（16）—Vue脚手架介绍》

一、脚手架环境

1、推荐windows10 + Node + @vue/cli(webpack)

2、测试node安装成功
node -v
npm -v

3、什么是脚手架
Vue CLI：CLI就是脚手架的意思
脚手架生成一套模板（入口文件、配置文件、目录结构）

4、常用的包管理器
npm：nodejs自带的
yarn：推荐使用
cnpm：淘宝镜像

5、安装命令
npm install yarn -g
npm install cnpm -g

脚手架可以非全局安装在其他目录，例如在“D:\Vue脚手架”目录下
cnpm install @vue/cli

6、验证脚手架安装成功（非全局安装需要带路径）
.\node_modules\.bin\vue -h
.\node_modules\.bin\vue -V

7、创建vue项目
（1）可视化服务（不建议用）
vue ui

（2）命令行创建项目
vue create xxx

cd到项目目录
D:\Vue脚手架\node_modules\.bin\vue create vue-webapp

选择vue2：

8、简单起服务
$ cd vue-webapp
$ yarn serve

9、项目目录和脚手架目录之间的关系
整个流程是：首先安装包管理工具 -> 用包管理工具安装vue脚手架 -> 用脚手架创建项目

脚手架的目录和项目的目录是可以分开的，创建项目时只是要用到脚手架里的一个命令

包管理工具放在一个目录
脚手架放在一个目录
项目放在一个目录

10、复制项目
发项目给别人时，不要带上node_modules，剩下的文件打包

11、拿到没有node_modules的项目
在根目录执行yarn install，然后起项目

二、项目结构

1、目录分析
yarn.lock：加锁的文件，不要动
vue.config.js：是基于webpack5的二次封装的配置文件（比如改端口、做代理、上线打包优化等等）
package.json：是包管理器的配套文件，用于记录整个项目的基本信息（比如项目版本号、名称、当前项目所需要的第三方依赖包等等）
jsconfig.json：这是TypeScript的配置文件（最新的TS配置文件推荐使用tsconfig.json）
babel.config.js：这是babel编译器的配置文件，在脚手架中可以使用比较新的语法，babel用于把比较新的语法，编译成浏览器能够普遍兼容的ES5语法
.gitignore：当git add/commit/push时要忽略哪些文件
node_modules：当前项目所依赖的所有第三方包
public：是当前项目的本地静态资源的目录（就是本地服务器）
src：是你的业务代码目录（源码目录）

2、每一个文件都是一个模块，通过导入导出的语法，进行组织代码