小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
今天内容主要和大家来一起搭建 vue3 的开发环境以及如何安装 Vue3 或者引入 Vue3 到你项目中。
Vue 不仅在大企业中占有一席之地，而且也是中小企业的首选。而且现在前端岗位比较吃香，所以自己也想碰一碰 Vue。现代流行框架构建 web 都是基于组件(component)，组件 component 的设计主要为了就是重用(reuse)，重用好处就是易于维护和协同开发。还有就是响应式编程，数据驱动界面，通过 MVVM 设计模式 VM 在在数据和界面建立双向桥梁，让程序员从频繁的 DOM 操作中解脱出来，更专注于业务逻辑。
学习 vue 框架我们到达一个境界，解释可以给出一些问题，或者某一个领域可能出现问题的一个通用的解决方案。而不是局限在某一个语法或者某一个具体解决方案。这是现在自己缺失的一种能力，希望大家我们在共同学习 Vue 过程中，不仅了解 Vue 的 API 还要思考为什么要提出这个 API，这个 API 设计初衷，或者是说具体可以用这个 API 去解决那些问题。
Vue 安装
准备工作
- 安装 nodejs 搭建开发环境
- 安装 visual studio code 开发工具
- 安装 vetur 插件，可以提供代码输出的生成力
安装 vue
有下面 3 种方式将 vue 添加到项目中
- CDN 方式引入 Vue，这种方式通常用于将 Vue 引入到你之前那些具有一定历史的项目
<script src="https://unpkg.com/vue@next"></script>
- npm 方式安装 Vue，是使用Vue构建大规模应用程序的推荐方法。
npm install vue@next
在用 Vue 构建大规模应用时，npm 这种方式相比与 CDN 方式安装 vue 更受欢迎的方法。
- Vue CLI(脚手架方式来安装 vue)
只需几分钟就能启动和运行，具有热重载、lint-on-save 和 production-ready 的构建功能。
npm install -g @vue/cli
Vue 提供了一个官方CLI，用于快速搭建单页应用程序的脚手架
- Vite vitejs 是一种新型前端构建工具，能够显著提升前端开发体验。这个是 vue 作者推荐一种构建 vue3 项目方式。
npm init vite@latest
使用 Vue/CLI 构建项目
查看 vue 版本
vue --version
@vue/cli 4.5.13
需要满足版本在 4.5 以上，才可以通过脚手架来创建项目。
创建项目
vue create hello-world
提示选择构建项目是基于 vue2 还是 vue，这里选择Default (Vue 3) ([Vue 3] babel, eslint)选项来创建项目。如果想要进行更多自定义项目就可以选择最后一项来创建项目。
Vue CLI v4.5.13
? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 2] babel, eslint)
Default (Vue 3) ([Vue 3] babel, eslint)
Manually select features
选择包管理工具，这里选择 npm，也可以选择 Yarn 来管理你的项目。
Vue CLI v4.5.13
? Please pick a preset: Default (Vue 3) ([Vue 3] babel, eslint)
? Pick the package manager to use when installing dependencies: (Use arrow keys)
❯ Use Yarn
Use NPM
选择好包管理工具，就开始创建项目，当项目安装完成后运行如下命令
cd hello-world
npm run serve
然后就可以开浏览器输入 http://localhost:8080/ 地址，然后就可以看到下面的画面。
DONE Compiled successfully in 1999ms 9:37:45 ├F10: AM┤
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.50.32:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
然后就可以看到下面界面
当你看到这个画面时，也就是说明你已经成功地创建了 Vue3， 也就是成功地迈出学习 vue3 第一步。
