在上述示例中,我测试了使用提供的 CDN 服务来引用 Vue.js 框架,这也是 Vue.js 官方教程中推荐的服务。至于是该引用开发环境的版本,还是生产环境的版本,这就要取决于具体的使用场景了。在通常情况下,我会选择在程序开发阶段引用反馈信息相对丰富的开发环境版本,而等到程序发布之时再切换至更追求执行效率的生产环境版本。下面来了解一下使用 CDN 这种引用方式的优势:
当然了,这种引用方式归根结底都得依赖于网络环境,甚至很多时候是国外的网络环境,由于众所周知的原因,我们的网络环境经常会受到各种不可抗力的影响,所以我个人更倾向于将框架文件下载到本地来引用。
正如上面所说,如果想减少意外状况,最好的选择是将 Vue.js 的框架文件下载到本地,然后再引用它们。下载这类文件的方式有很多,现如今为了便于更新版本,人们通常会选择使用 npm 这类包管理器来下载 JavaScript 的各种程序库和应用框架。具体做法就是在之前创建的code
目录下执行以下命令:
如果安装过程一切顺利,接下来就只需要在 HTML 文档的<script>
标签中引用框架文件的路径即可,像这样:
<!-- 开发环境版本,包含了有帮助的命令行警告 --> <!-- 生产环境版本,优化了文件大小和载入速度 -->
在这里,选择开发环境版本还是生产环境版本的依据是一样的,就不再重复了。下面来验证一下框架文件是否被成功引入。
我将通过编写一个"Hello World"程序来验证 Vue.js 框架是否已被成功引入,具体步骤如下:
在code
目录下创建一个名为01_sayHello
的项目目录,并在该目录下设置以下两个子目录:
img
目录:用于存放图片资源。
js
目录:用于存放自定义 JavaScript 脚本文件。
接下来只需将相关的 Web 服务运行起来(该服务器可以是 Apache 或者 Nginx,也可以是 VSCode 的 Live Sever 插件),然后如果在 Web 浏览器中看到如下页面,就说明 Vue.js 框架已经被引入到了程序中,并被成功执行起来了。
更多相关免费学习推荐:
}
以上就是Vue.js 学习记录之一:学习规划和了解 Vue.js的详细内容,更多请关注php中文网其它相关文章!
不用删除,但是要配置不打包 cdn 引入的模块,需要在 webpack 中设置不打包 vue 等使用 cdn 引入的模块。
当然也可以删除,但是不建议。如果你安装项目的时候使用了 eslint 这样的语法编辑器,就会直接报错,类似 Vue undefined
这样,可以用 window.Vue
来调用,不建议,因为这会丢失语法提醒。若是安装了 typescript 那么还要写额外的全局类型等,所以不建议删除。
如何在打包时忽略已经用 cdn 引入的模块?
属性名是引入的模块名,值是需要替换的变量,这个值必须和 cdn 中提供的一样,其作用是不打包使用外部引入的扩展,也就是 build 的时候不打包这也模块。详见 webpack 外部扩展。
不使用 cdn 的情况打包的 dist 文件夹(注释掉 vue.config.js 添加的代码就可测试):
使用 cdn 的情况打包的 dist 文件夹:
另外,如果想继续优化打包,建议了解异步路由,异步加载等,谨慎使用 require.context
。
版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。