Vue3.0生态大行其道。而学习一门语言的开始便是环境。本文就 Vue3.0 的环境搭建开展。

Vue3.0 的四种安装方法

在页面上以 CDN 包的形式导入。

CDN路径: unpkg.com/vue@next， cdn.staticfile.org/vue/3.0.5/v…

*使用： *

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="counter">
    {{ message }}
  </div>
</body>

<script src="https://unpkg.com/vue@next"></script>
<script>
  const Counter = {
    data() {
      return {
        message: '学习vue, 从hello开始'
      }
    }
  }

  Vue.createApp(Counter).mount('#counter')
</script>
</html>
复制代码

下载并自托管，此方法与上诉原理相同，皆为引入 js文件. 可以用于生产环境无法使用 CDN , 同时不适用构建工具的基础。
npm包管理器：在用 Vue 构建大型应用时推荐使用 npm 安装

步骤如下
1. 全局下载 vue3.0
```
 # 全局安装最新稳定版
 $ npm install vue@next -g
复制代码
```
下载之后，在入口main.js中引入 vue

命令行工具 (CLI)

vue3.0应使用 npm 上可用的 Vue CLI v4.5 作为 @vue/cli ,安装如下：

 yarn global add @vue/cli
 # OR
 npm install -g @vue/cli
 # 如果要升级 Vue项目， 可以执行以下命令
 vue upgrade --next
复制代码

Vite: web 开发构建工具, 可以快速构建 Vue 项目

# npm
$ npm init @vitejs/app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev
# yarn
$ yarn create @vitejs/app <project-name>
$ cd <project-name>
$ yarn
$ yarn dev
复制代码