Vue快速上手笔记2 - 开发环境的搭建
Vue快速上手笔记2 - 开发环境的搭建
CSDN：JcLee95
邮箱：291148484@163.com
专题目录：https://blog.csdn.net/qq_28550263/article/details/115696677
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有以下不同的版本，如果你想选择其它版本可以参考表中的介绍选择之。
| 版本 | 说明 | 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 | - | - | - |
Vue快速上手笔记2 - 开发环境的搭建相关推荐
- Vue快速上手笔记1 - 使用初体验
Vue快速上手笔记1 - 使用初体验 博主:李俊才 邮箱:291148484@163.com 若本文中存在的错误请告知博主更正 希望对大家有所帮助 专题目录:https://blog.csdn.net ...
- android笔记1——开发环境的搭建
Long Long ago...已经成为了历史,我还是要说出一个真相:早年前,那时候,android还不被大众所认知的时候,当然开发人员也没不像如今那样趋于饱和状态.一位大牛前辈,也是我的学长,那时候 ...
- vue多页面多路由开发环境
本人根据实际实战项目配置的vue多页面多路由开发环境,同时也支持单页应用开发.不懂的朋友可以留言. 项目代码链接:http://pan.baidu.com/s/1jI9ji2E
- 阿里云商标注册快速上手笔记（新手图文教程）
阿里云商标注册图文教程快速上手笔记,本文以阿里云商标智能注册申请为例,商标智能注册申请需要用户手动填写商标类型.商标名称.商标图样.商标说明及商标分类表选择等操作,流程较为复杂,TM83商标网来详细说 ...
- vue中控制mock在开发环境使用，在生产环境禁用
文章目录 vue中控制mock在开发环境使用,在生产环境禁用 解决方案 vue中控制mock在开发环境使用,在生产环境禁用 原因:mock拦截所有的axios请求,根据请求,做出相应的响应.平时前后端 ...
- 如何使用 Docker 快速配置数据科学开发环境？
如何使用 Docker 快速配置数据科学开发环境? 数据科学开发环境配置起来让人头疼,会碰到包版本不一致.错误信息不熟悉和编译时间漫长等问题.这很容易让人垂头丧气,也使得迈入数据科学的这第一步十分艰难 ...
- bluekitchen-stm32f1/csr8311移植笔记(1)-开发环境配置
bluekitchen是一个代码完全开源的蓝牙协议栈,支持ble,ble mesh,edr.它的功能丰富,且可配置性极高,支持多个不同的软件平台,以及多种知名的蓝牙芯片,具有很高的可移植性,非常适合蓝 ...
- 编译vuejs html,VueJs(2)---VueJs开发环境的搭建和讲解index.html如何被渲染
VueJs开发环境的搭建和讲解初始框架 有关如何搭建vue.js框架我这看了一篇文章,自己也根据它进行搭建环境. 接下来对初始的框架进行讲解,只讲index.html是如何被渲染出来的. 一.启动项目 ...
- 微信小程序开发系列一：微信小程序的申请和开发环境的搭建
我最近也刚刚开始微信小程序的开发,想把我自学的一些心得写出来分享给大家. 这是第一篇,从零开始学习微信小程序开发.主要是小程序的注册和开发环境的搭建. 首先我们要在下列网址申请一个属于自己的微信小程序 ...
最新文章
- Java 8 Date-Time API 详解
- Intellij IDEA调试功能使用总结
- java中如何合并两个网格_java – 如何在GXT中合并网格单元格
- SAP UI5 应用开发教程之三十三 - SAP UI5 应用的响应式布局特性(Responsiveness)试读版
- RabbitMQ的消息确认机制
- 获取高德地图POI数据
- MATLAB之牛顿插值法
- 电脑程序员需要考证件吗
- 微软收购雅虎遇新难题 或遭中国反垄断法阻碍
- 全局下的isFinite
- 企业/公司如何初创建一个小程序
- 用ros中apriltag码进行定位（记录一下）
- 文件底层I/O基本操作——东写西读南开北关中位移_莫韵乐的Linux英雄传
- spring-session（一）揭秘
- 腾讯面试：MySQL事务与MVCC如何实现的隔离级别？
- 关于Microsofe Visio，如果设置图层大小与绘图适应？
- USBCAN在江淮新能源汽车诊断工具的应用案例
- EMVA1288标准
- 【Excel VBA】控件应用（1）-文本框
- 电脑卡顿就重装系统？——可能问题只是在显卡驱动