本文由 发布，转载请注明出处，如有问题请联系我们！ 发布时间: 2021-08-01vue方法执行顺序-vue常用的八个生命周期

针对一切新技术应用，新架构的研发和学习培训，最重要的是能否实际操作，怎么操作，这也是最重要的。那麼，大家来谈一谈Vue.js的安装方法

由于Vue.js最开始是做为一个渐进性的JavaScript架构设计方案的，因此您能够按照必须应用它，这促使以多种方法将其集成化到工程中变成很有可能。

当今文本文档的最新版是3.2.12到3.2.13。

文本文档中尽量应用这一版本号。沒有大的版本号转变，內容也不会升级。本文原本是用3.2.12写的，可是在写本文的环节中，早已升級到3.2.13，与此同时这一实例教程也升級到3.2.13。

在应用软件中应用Vue.js一般有四种方法(三种方法或五种方法):

在界面上应用 CDN 包的方式导进免费下载 Vue.js 的 JavaScript 文档引入应用应用 npm 安裝它应用官方网站的 CLI 来搭建运用， 这个是如今前面工作内容中应用较多的方法。

下面，大家将具体说明这种方式。

应用 Vite 搭建专用工具， 开展搭建运用

1.在网页页面内以CDN包的方式导进。

在WEB开发设计之初，大家一直必须同时将特定的JavaScript文档引进到html网页中。Vue.js是一个渐进性架构，因此还可以应用这类方式:

详细介绍的编码如下所示，页面实际效果编码截屏。全部编码都将被放进GitHub。

那样，我们可以见到大家使用了三个文档:vue @ next，vue @ 3.2.12和vue.global.js..

设计效果图如下所示:

在具体的工作环境中，最好是特定有效的实际版本信息，以防在版本更新中碰到一些难题和bug。

版本号由下列各类特定:

针对特定版本号的详细介绍，只详细介绍文档自身。之后要应用的文档必须自身引入。因而，选用全局性参考法来详细介绍这个方式。

2.免费下载Vue.js的JavaScript文档仅供参考。

第二种方式和第一种方式实际上是一种方法，一种是他人给大家建的，大家立即用，另一种是我们下载必须的引入文档，当地引入。他们在应用方法上是一致的。

有两个下载链接:

https://cdn.jsdelivr.net/npm/vue@next/dist/https://unpkg.com/browse/vue@3.2.12/dist/

我能将这一压缩文件下载并备份数据到github，我能搜索最终一个github详细地址。你还可以继续阅读实例教程。第三步，应用npm立即安装包，随后npm搭建专用工具会将任何必须的文档直接下载到当地。

Vue.js文件目录构造，如图所示:

由于上边这么多文档，大家要如何选择JavaScript文档做为参照？大家分成两种不一样的状况开展表述。

*prod.js和*。js应用prod版本号做为工作环境，编码被缩小。沒有带的是开发设计版本号，会出现具体的信息提示开展开发设计。

应用CDN或不应用搭建专用工具。

vue(。运作时)。全局性(。prod)。水射流科学研究…

若要根据电脑浏览器中的 立即应用，应用全过程中就必须曝露 Vue 全局性。电脑浏览器内模版编译程序：vue.global.js 是包括c语言编译器和执行时的“详细”搭建版本号，因而它适用动态性编译程序模版。vue.runtime.global.js 只包括运作时，而且必须在搭建流程期内预编译模版。内联全部 Vue 关键內部包——即：它是一个独立的文档，不依赖于其他文件。这代表着你务必导进此文档和此文档中的任何內容，以保证得到同样的编码案例。包括硬编码的 prod/dev 支系，而且 prod 搭建版本号是事先缩小过的。将 *.prod.js 文档用以工作环境。

如果不应用UMD(Universal Module Definition)模块化设计标准搭建新项目，能够应用IIFeS(及时函数调用关系式)马上搭建涵数(自实行匿名函数)，随后能够直接引用JavaScript文档。

vue(。运作时)。esm浏览器(。prod)。水射流科学研究…

用以根据原生态 ES 控制模块导进应用 (在网页中根据 来应用)。与全局性搭建版本号共享资源同样的进行时编译程序，依靠内联和硬编码的 prod/dev 个人行为。

应用搭建专用工具。

vue(。运作时)。esm-bundler.js

用以 webpack，rollup 和 parcel 等搭建专用工具。留有 prod/dev 支系的 process.env.NODE_ENV 守护句子 (务必由搭建专用工具更换)。不给予缩小版本号 (装包后与其他编码一起缩小)。import 依靠 (比如：@vue/runtime-core，@vue/runtime-compiler)导进的依靠项也是 esm bundler 搭建版本号，并将先后导进其依靠项 (比如：@vue/runtime-core imports @vue/reactivity)。这代表着你能独立安裝/导进这种依靠，而不容易造成这种依靠项的不一样案例，但你务必保证他们都为同一版本号。电脑浏览器内模版编译程序：vue.runtime.esm-bundler.js (默认设置) 仅运作时，并规定全部模版都需要事先编译程序。这也是搭建专用工具的默认设置通道 (根据 package.json 中的 module 字段名)，由于在应用搭建专用工具时，模版一般是事先编译程序的 (比如：在 *.vue 文档中)。vue.esm-bundler.js 包括运作时c语言编译器。假如你应用了一个搭建专用工具，但依然要想运作时的模版编译程序 (比如，DOM 内 模版或根据内联 JavaScript 字符串数组的模版)，请应用这一文档。你需要配备你的搭建专用工具，将 vue 设定为这一文档。

应用服务端展现方式。

vue.cjs(。prod)。水射流科学研究…

根据 require() 在 Node.js 服务端3D渲染应用。假如你将程序与含有 target: ‘node’ 的 webpack 装包在一起，并恰当地将 vue 外界化，则将载入此文档。dev/prod 文档是预搭建的，可是会依据 process.env.NODE_ENV 全自动载入相对应的文档。

来源于官方网站的介绍，实际事项将在下文中应用，差别将一起被了解和发觉。使我们再次。

根据当地引入立即改动引入详细地址:

在界面上，建立了一个新的文件目录vuejs。随后在提及详细地址后，它是:

由于这儿免费下载的是固定不动版本号，不用特定版本号。

编码截屏是:

设计效果图如下所示:

3.应用npm来搭建和安裝。

最先，必须安裝Node.js，能够应用npm命令。还可以应用棉纱。此外，在应用Vue.js搭建规模性运用时，提议安装npm必须特别注意的是，在我国应用npm的效率会尤其慢，因此能够应用中国的产品开展加快，或是为npm搭建自身的独享服务项目。

应用连接点版本号和npm版本查询是不是安裝并确保了较新的版本号。

随后，您还可以应用npm install命令来安裝和应用它。

npm install vue@next–-save表明当今新项目起效。如果不加上，默认设置状况下将在全局性范畴内起效。

从而能够看得出，npm搭建专用工具早已将自己必须的全部有关依靠项免费下载到文件列表中。

Vue还给予了撰写单文件部件的专用工具。假如要应用单文件部件，还必须安裝@vue/compiler-sfc:

npm install -D @vue/compiler-sfc

除开@vue/compiler-sfc，您还必须为选定封装工具挑选一个配对的单文件部件加载器或软件。

在绝大多数状况下，大家更喜欢应用根据webpack的Vue CLI搭建专用工具来建立降到最低的Vue.js应用软件。

4.应用命令行界面专用工具搭建应用软件。

命令行界面命令行界面，一般来说，它是根据应用软件的內部页面来完成一些无需操作面板就可以进行的工作中。

针对Vue3，这里应用最新版的Vue-CLI V4.5，指令改成:@vue/cli最新版的组装方法为:

yarn global add @vue/clinpm install -g @vue/cli

Npm方式

棉纱方式:

假如必须更新到当今新项目中的最新版，能够应用升級边上的指令vueup grade–升級，这针对大中型版本号不是强烈推荐的。假如必须转移大版本号，提议参照转移手册。

随后能够应用Vue/CLI搭建应用软件。

建立一个hello world应用软件。

vue create hello-world默认设置是Vue2的版本号，能够转换到Vue3的版本号。随后点击键入。

转至hello-world的运行文件目录。

cd hello-world

用npm运行新项目。

npm run serve浏览器打开，应用http://localhost:8080浏览，查验实际效果:

5.应用Vite搭建Vue应用软件。

Vite是一个web开发和搭建专用工具，因为其原生态的ES控制模块导进方式，能够完成雷电冷网络服务器运行。和迅速热部署。

在终端设备指令中键入一个指令，就可以应用Vite搭建一个Vue新项目。

应用npm init建立应用软件。

npm 6.x和7.x有差别..

npm 6.x

npm init vite@latest --template vue

Npm 7 ，必须附加加双短水平线。

npm init vite@latest -- --template vue随后我进到新项目文件目录，尤其难堪。名人老大哥零晨3: 00递交了Vue.js的3.2.13版本号，造成npm安装一直提醒找不着相匹配的信息内容。不害怕技术性能量的人就怕技术性能量仍在作战。往往找不着，是由于独享服务项目的存有有一定的延迟时间，没有办法立即更新npm依靠。解决方案是临时关掉个人服务项目或提高速度，并运行官方网来源于安裝。

cd npm installnpm run dev浏览器打开查询实际效果:

应用棉纱建立新项目。

yarn create vite --template vuecd yarnyarn dev

电脑浏览器实际效果跟上面一样， 没有截屏。cd yarnyarn dev电脑浏览器的实际效果跟上面一样，但截屏不包括以内。

应用pnpm建立新项目。

pnpm dlx create-vite --template vuecd pnpm installpnpm run dev

电脑浏览器查询实际效果和第一个实际效果一致， 不会再截屏。pnpm installp NPM run dev电脑浏览器的查询实际效果和第一款一样，因此不容易截屏。

pnpm

Pnpm是一种新的搭建方式，类似maven，相对性单独地储存全部依靠文档。那样做的益处是，当您的依靠项反复时，他们不容易在自身的应用软件中反复，进而节约了空中间的储存空间和安裝速率。应用npm install -g pnpm开展组装和应用。你能实际查询一下https://www.pnpm.cn/installation。

早已叙述了多种多样操作方法，很多详尽的知识必须在事后的具体应用全过程中详细说明。