Vue快速上手笔记2 - 开发环境的搭建

Vue快速上手笔记2 - 开发环境的搭建

1.使用<script>标签在html文件中引入的方式

在 文1《Vue快速上手笔记1 - 使用初体验》 中我们 采取的是直接在html中通过 <script>标签进行引入的方式，该方式是比较传统的js文件引入方式，和在页面中引入其它的JavaScript库方式一样。这里对该引入方式搭建vue开发环境做一些简要的补充。

引入vue时，需要考虑环境与需求。在不同的环境、不同的需求下，我们可以选取引入不同版本的vue。

最新版本

一般而言，最新版本较少直接用于生产环境中。但是如果以学习为目的，行了解vue的最新特性、功能，可以使用最新的版本。其引入方式如下：

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

这种版本也是未经过压缩的，你可以看到高可读性的源码格式与代码的注释，它看起来应该是这个样子的：

生产环境

对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：

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

在sript标签的的src属性（其中为url）中，@后面的2.6.12表示使用vue的版本号为2.6.12。

发布的站点中使用生产环境版本一般采用压缩后的。只要将其中的vue.js 换成 vue.min.js即可，如：

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

这里要注意的是，不论跟版本号vue@2.6.12还是使用vue.min.js都是压缩后的版本，它看起来如这样（密密麻麻）的：

可以看出压缩版本是没有注释的，即使你用压缩工具将其解压。这可以让生产环境中有更快的加载速度。

2. 使用num包管理工具

NPM 的优势在于能够很好地和诸如 webpack 或 Browserify 等模块打包器配合使用，有利于构建大型应用。同时 Vue 也提供配套工具来开发单文件组件。

使用npm前，你需要先安装Node.js。Node.js的下载地址为：http://nodejs.cn/download/。如果你习惯于在docker容器中进行开发，那么node.js也有官方的镜像，你只需要在你安装了docker的Linux主机上运行

docker pull node

即可获取一个node的dcoker镜像。

接下来，在你的项目目录中安装vue（局部安装）：

npm install vue  --save

或者全局安装：

npm install -g vue

你也可以通过@来指定vue的版本号，如：

npm install vue@2.6.12

3.使用vue官方提供的脚手架（即命令行工具CLI）安装

vue官方提供了一个命令行工具，我们也可以使用该工具：

npm install -g @vue/cli

安装后以用这个命令来检查其版本是否正确：

vue --version

【注意】

Vue CLI 曾今使用的包名称为vue-cli，而如今使用的为@vue/cli。这也就意味着，如果你已经全局安装了旧版本的vue-cli，你需要先将旧版本卸载：

npm uninstall vue-cli -g

然后再进行安装。

升级Vue CLI

如需升级全局的 Vue CLI 包，请运行：

npm update -g @vue/cli

升级项目中Vue CLI相关模块

这些模块往往以 @vue/cli-plugin- 或 vue-cli-plugin- 开头，升级它们需要先使用cd命令切换当相应的项目目录，然后在项目目录下运行：

vue upgrade

<>

vue有以下不同的版本，如果你想选择其它版本可以参考表中的介绍选择之。