01.Vue3.x简介、搭建Vue3.x环境、创建运行Vue3.x项目、分析Vue3.x目录结构

项目搭建

Vite地址：https://github.com/vitejs/vite

通过vue-cli脚手架工具可以让我们快速搭建vue项目，目前vue提供两个脚手架，vue-cli与vite。

一、通过Vue-cli，创建项目

1.1、安装Vue-cli，在同一个电脑上面只需要安装一次

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

如果那你上面没有安装过cnpm，可以通过下面命令安装：

npm install -g cnpm --registry=https://registry.npm.taobao.org

如果电脑上面没有安装过yarn，可以通过下面命令安装：

npm i -g yarn

1.2、通过Vue-cli创建项目

#输入命令创建项目
vue create vue-cli-demo
Vue CLI v4.5.12
┌───────────────────────────────────────────┐
│                                           │
│   New version available 4.5.12 → 4.5.13   │
│     Run npm i -g @vue/cli to update!      │
│                                           │
└───────────────────────────────────────────┘

? Please pick a preset:
  Default ([Vue 2] babel, eslint) # vue2.x版本
> Default (Vue 3 Preview) ([Vue 3] babel, eslint)# vue3.x版本
  Manually select features
#按上下键选择版本，回车
#等待安装....
#出现如下内容，则安装完成
�  Successfully created project vue-cli-demo.
�  Get started with the following commands:

 $ cd vue-cli-demo
 $ yarn serve
#进入目录
cd vue-cli-demo  
# 输入npm run serve运行
npm run serve
# 或者 yarn serve运行
yarn serve

二、通过Vite脚手架创建项目

2.1、使用npm创建

npm init vite-app <project-name>
cd <project-name> 
npm install # 安装依赖
npm run dev # 运行

2.2、使用yarn创建

yarn create vite-app <project-name>
cd <project-name>
yarn
yarn dev

三、Vue3.x 目录结构介绍