当前位置 博文首页 > jcLee95的博客：Vue快速上手笔记2 - 开发环境的搭建
CSDN：JcLee95
邮箱：291148484@163.com
专题目录：https://blog.csdn.net/qq_28550263/article/details/115696677
<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都是压缩后的版本，它看起来如这样（密密麻麻）的：
可以看出压缩版本是没有注释的，即使你用压缩工具将其解压。这可以让生产环境中有更快的加载速度。
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
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有以下不同的版本，如果你想选择其它版本可以参考表中的介绍选择之。
| 版本 | 说明 | UMD | CommonJS | ES Module (基于构建工具使用) | ES Module (直接用于浏览器) |
|---|---|---|---|---|---|
| 完整版 | 同时包含编译器和运行时的版本 | vue.js | vue.common.js | vue.esm.js | vue.esm.browser.js |
| 只包含运行时版 | - | vue.runtime.js | vue.runtime.common.js | vue.runtime.esm.js | - |
| 完整版 (生产环境) | - | vue.min.js | - | - | vue.esm.browser.min.js |
| 只包含运行时版 (生产环境) | - | vue.runtime.min.js | - | - | - |
