引用Vue的方式

一,明确需求

在 开发环境 还是 生产环境 使用,使用不同的引入方式;

二, 引入方式

1, 直接下载 vue 依赖包到本地;通过 <script src="">标签引入使用; 有开发版和生产版本!

<script src="./asset/vue/vue.js"></script>

2,  使用 CDN , 注意连接到一个明确的版本号,避免版本更新造成不可预知的影响;

 

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

原生 ES Moudles

<script type="module"> 

        import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.esm.browser.js'

</script>

NPM(最稳定版)

 npm install vue

构建大型应用时,推荐使用 NPM 安装,,能更好的与 webpack或Browserify模块打包器配合使用;Vue也提供配套工具来开发单文件组件;

命令行工具(CLI  脚手架)

为单页面应用( SPA ) 快速搭建繁复的脚手架,为现代前段工作流提供了开箱即用的构建设置.快速运行起带有热重载,保存时lint校验,以及生产环境可用的构建版本.

在 npm包的 dist/ 目录下 有不同的 Vue.js 构建版本:

分类:  UMD   ||  Common.js   ||  ES Module(基于构建工具使用)  || ES Module(直接用于浏览器)

完整版: vue.js   ||  vue.common.js  ||   vue.esm.js   ||   vue.esm.browser.js

只包含运行时版本  vue.runtime.js  || vue.runtime.common.js ||   无

完整版(生产环境)  vue.min.js  || 无 || 无 ||  vue.esm.browser.min.js

只包含运行时版(生产环境)  vue.runtime.min.js || 无 || 无 ||  无

注释: 

完整版: 同时包含编译器和运行时的版本

编译器:用来将模板字符串编译为 JavaScript 渲染函数的代码

运行时: 用来创建 Vue实例,渲染并处理虚拟DOM等的代码,基本上就是除去编译器的其他一切;