Vue3 - 环境安装和启动配置

Node.js 和 NPM

独立安装 Node.js 和 Npm（安装 Node.js即会安装 npm），查看版本

node -v
npm -v

淘宝镜像

npm 如需淘宝镜像可安装 cnpm（非必须）

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

引用或安装Vue3

引用方式最为简单，在 html 文件中加入 vue 的引用即可，地址基于随笔时最新版本，引用时按实际URL修改

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.7/vue.global.js"></script>

安装方式为打开控制台，运行命令安装 vue-cli 工具，当前最新版本4.5.12，如需升级或重装，最好卸载已有vue-cli并重启后再进行安装

npm install -g @vue/cli@next
vue --version

构建一个Vue3项目

在成功安装 vue-cli 之后即可使用 Vue3 带来的新工具 Vite 构建示例项目，方法一，先独立安装 Vite

npm install -g create-vite-app

方法二，初始化项目时安装 Vite，会自动先安装 Vite 后创建项目比较方便。新建一个叫做 nothing 的项目，按提示键入 y 确认安装 Vite，安装并创建成功后提示运行命令。

• cd nothing 进入目录
• code . 使用 vs code 打开项目目录
• npm install 初始化项目，添加默认的依赖
• npm run serve 运行服务，启动项目

npm init vite-app nothing

// 控制台输出
Need to install the following packages:
  create-vite-app
Ok to proceed? (y) y
npm WARN deprecated create-vite-app@1.21.0: create-vite-app has been deprecated. run `npm init @vitejs/app` or `yarn create @vitejs/app` instead.
Scaffolding project in D:\Home\Repos\vue3\nothing...

Done. Now run:

  cd nothing
  npm install (or `yarn`)
  npm run dev (or `yarn dev`)

可以使用默认的 npm run serve 来启动项目，也可以使用更快的 Vite 来启动项目，键入 npm run dev 使用 Vite 启动并输出结果

npm run dev

> nothing@0.0.0 dev
> vite

[vite] Optimizable dependencies detected:
vue

  Dev server running at:
  > Network:  http://192.168.0.192:3000/
  > Network:  http://192.168.137.1:3000/
  > Network:  http://192.168.116.1:3000/
  > Local:    http://localhost:3000/

页面

如启动提示，在浏览器中运行本地地址打开 Vue3.x 欢迎页面即成功

Visual Code

vs code 插件安装了 Vetur、Vue 3 Pack(hollowtree)，在 components 下新建 Add.vue，键入 vbase 有了 Vue3 相关提示