003_重学Vue_Vue安装

301 阅读1分钟

Vue 可以通过两种方式安装,分别是<Script>引入和 NPM 安装。

一、直接 <Script> 引入

1. 本地引入

打开 链接 进入下载页面,选择要下载的版本下载。如果是开发或写DEMO可以选择开发版本,这里包含了警告信息。

如果发布到生成环境则需要下载生产版本,生产版本经过压缩体积更小,并且去掉了警告信息。

image.png

  • 创建html页面
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>初始Vue</title>
  </head>
  <body></body>
</html>
  • 在html页面中引入下载的 js 文件
<script src="../js/vue.js"></script>
  • 消除控制台的警告
<script>
  Vue.config.productionTip = false
</script>
  • 安装 Devtools,Devtools 是一个浏览器插件,有助于开发时调试 Vue 程序。

image.png

安装后在调试界面多了一个 Vue 的 tab,切换到该 tab 可以查看或编辑 data 中的数据。

2. CDN 引入

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>

如果在生产环境下通过CDN引入,最好指定一个固定的版本,这样可以避免版本升级导致一些API不兼容的问题。

以下为引入 CDN 2.7.8 版本。

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8"></script>

二、NPM 安装

实际的开发当中都会用 npm 安装 Vue,这样可以和 webpack 这样的打包工具配合使用。

$ npm install vue

npm 是 node.js 的包管理器,需要先安装 node.js 才能执行上面的命令,安装 node.js 后包管理器也一起安装了,npm 安装步骤:

  • node.js 下载地址:nodejs.org/en/
  • 因为 node.js 服务器在国外,国内访问比较慢,所以一般需要执行以下命令配置成淘宝镜像。
$ npm config set registry https://registry.npm.taobao.org