Vue入门笔记

177 阅读2分钟

一、两个版本对应的文件名

两个版本分别是完整版和运行时版(非完整版)

完整版 / 非完整版

image.png

总是使用非完整版,然后配合vue-loader和vue文件。

这样做又以下三点好处:

  1. 可以保证用户体验,用户下载的JS文件体积更小,但是只支持h函数
  2. 保证开发体验,开发者可以在vue文件里写HTML标签,不写h函数
  3. 脏活用loader做,vue-loader会把vue文件里的HTML转为h函数,这样就可以不写h函数得到h函数

主要优缺点

1. Vue.js(完整版)

  • 优点:逻辑清晰简单,好写好用。
  • 缺点:

(1)开发需要额外配置版本引用
(2)视图模板写在HTML/template里,代码量大的时候显得冗余。
(3)需要通过compiler解析器才能把HTML/template模板编译成Dom去渲染,意外增大代码体积
(4)代码体积较非完整版大30%,用户体验较差。

2. Vue.runtime.js非完整版

  • 缺点:对初级开发者可能不友好
  • 优点:

(1)render函数之强大,它较于HTML/template模板内要写繁琐冗余的代码而言要高效简洁很多,甚至还能在函数体里面进行一些额外的代码逻辑。
(2)不需要解析器,webpack等配置有vue loader,vue loader的作用是在代码打包的时候r调用compiler自动解析编译。
(3) 代码体积较小,提升用户体验。

三、如何用 codesandbox.io 写 Vue 代码

创建步骤:

1.进入沙盒官网codesandbox.io/,点击右上角按钮Create Sandbox(不用登录)

2.在弹出的页面选择创建Vue沙盒

当页面出现下图所示时即表示创建成功,之后就能随心所欲的写代码啦。

3.如果需要导出文件直接点击下载即可,选择Export to ZIP。