如何利用vue-cli脚手架创建一个vue项目（主讲通过yarn方式下载）

前言

本文都以vscode为例，vscode里面可以直接打开终端，或者采用cmd进行下载操作。
但都必须下载node.js。点击跳转官网
node.js安装教程。点击查看
注意：node.js安装最好选择默认安装路径，更改路径需要配置环境变量。

一、简单介绍

参考本文创建vue项目时候，可同时参考vue-cli官方。点击跳转

本文讲解的是vue的生态系统里面的一个vue的cli——脚手架去创造一个项目

什么是脚手架？
快速搭建项目的工具

为什么要用脚手架?
不用框架的开发基本以文件形式开发，而利用框架开发是模块+组件的开发。

如何下载脚手架？
打开vscode，在菜单栏找到终端->新建终端

npm install -g @vue/cli
# OR
yarn global add @vue/cli
---

官网是提供了两种加载方法：npm或者yarn，在这里我们首选推荐yarn，因为yarn相比npm一般速度会更快些。
既然要用yarn，那首先说怎么下载yarn。

注意！！！下文一定要安装node.js再进行操作

---

如何安装yarn？
在终端输入：

npm i yarn -g

检测是否安装yarn成功（出现版本号即为成功）

yarn -v

如何通过yarn下载cli？

yarn global add @vue/cli

创建一个项目
在终端输入vue create 项目名称
如：

vue create demo

如果提示如图：

先在终端输入

yarn global bin

会出现路径，如图：

将下面路径复制后在我的地址栏输入，回车，确认是不是这些东西

右键此电脑、属性、选择高级系统设置、选择环境变量、选择系统变量的Path，点击编辑…
看下面的步骤吧，不写了…








重启vscode，再新建终端，再次输入

vue create demo

选择版本，vue2还是vue3

等待下载完成

看到此文件结构证明下载完成

---

知识补充

什么是组件？
类似积木的感觉，一个组件大到一个页面，小到一个按钮都可称之为组件。
所谓组件就是html+css+js的集合，所以每个组件都会有vue相关的东西

什么是插件？
能弥补原先程序里面不具备的功能，如swiper、轮播图插件、echarts 图表插件、富文本插件、地图插件等。

什么是模块？
所有功能都以模块形式出现，如mysql express

插件和模块的区别：
插件：以文件形式引入，引入后会全部加载。
模块：当你使用时候才会进行相对应的加载。（只会暴露让对方看到的东西）
从安全角度来说，模块比插件更安全，模块比文件的功能分的更细，有些模式的模块可以通过异步加载