Vue打包之后查看源码（vue项目打包后怎么查看源码）
本文目录一览：
- 1、怎么保存这个网站的源码？这个是vue写的模版，我想把这个源码导出来，反编译vue源码
- 2、慕课网上没搜到vue源码，有没有课程透彻分析Vue 源码的？
- 3、vue-lazyload 源码解析
- 4、怎么把vue的动态数据在查看源代码中展示
- 5、详解Vue webapp项目通过HBulider打包原生APP（vue+webpack+HBulider）
- 6、vue压缩后的js可以反编译出来吗
怎么保存这个网站的源码？这个是vue写的模版，我想把这个源码导出来，反编译vue源码
对于文件 右键 点击 下载，但是文件夹貌似不行，你只能展开然后下载了
慕课网上没搜到vue源码，有没有课程透彻分析Vue 源码的？
有，你在实战里找是huangyi讲的，印象中是从 Vue 的跨平台编译入手，从 Vue 的几个核心能力开始分析Vue 源码。 Vue 的静态全局 API 与属性， Vue 的响应式原理，异步组件、组件化、diff 算法等等方面，都是进行了详细的分析，最后还附带了vuex和vuerouter。
vue-lazyload 源码解析
/src/lazy.js
定义变量接收实例化参数。
lazy.js 默认导出一个函数，该函数返回一个 Lazy 类，形成闭包，保持对 Vue 的引用。
判断是否支持Webp图片
/src/listener.js
定义变量接收实例化参数。
filter 方法将配置的 filter 对象中的方法执行，接收两个参数，一个为 ReactiveListener 实例，一个为 options 参数对象。
initState 方法给元素添加 data-set 属性，值为图片地址 src，并且定义了图片状态对象 state 。在 Lazy 中已经根据像素比选择了最适配屏幕的图片，顾这里不需要考虑 srcset 属性。另外，我们自定义指令是 v-lazy，到目前为止，还没有给图片的 src 属性赋值。
render 方法，是在 Lazy 中实例化 ReactiveListener 时传递过来的参数。
回过头再来结合 lazy.js 中的 lazyLoadHandler 方法与 ReactiveListener 暴露的方法来看。
/src/lazy-container.js
LazyContainer 的核心是 container 下的选择器selector(默认 img 标签)遍历后调用 lazy 的 add 方法进行绑定，自定义指令 v-lazyload-container。
/src/lazy-component.js
上述实现元素绑定主要是通过自定义指令 v-lazy ， v-lazy-container 。那么 LazyComponent 则是通过注册的 lazy-component 组件，完成绑定，默认渲染成为 div 标签，作为 img 的容器。
/src/lazy-image.js
通 LazyComponent 组件，只不过 LazyImage 注册的 lazy-image 组件，渲染成的是 img 标签，多了 src 属性。
通过自定义指令 v-lazy 将设置背景图的元素或者 img元素，通过 _addListenerTarget 方法收集与数组 TargetQueue 中，并遍历触发懒加载的方法， addEventListener 绑定在该元素上，触发的事件为 lazyLoadHandler ；
在需要懒加载的元素上设置属性 data-src ，这是期望的图片地址(filter 配置项可以预先过滤赋值)，元素上自定义 lazyLoad 表示图片状态(状态变更后，adapter 中触发回调)；
ListenerQueue 数组中收集的是 ReactiveListener 类的实例，主要是用于懒加载不同状态下的图片加载，loading - loaded - error；
当触发 EventListener 了，执行 lazyLoadHandler 方法，根据算法，进入 viewport 后， ReactiveListener 元素如果与触发元素匹配，则进行图片的加载及渲染。
怎么把vue的动态数据在查看源代码中展示
Chrome或同内核的浏览器，使用开发者工具(f12)-network可以看到ajax请求回来的数据
详解Vue webapp项目通过HBulider打包原生APP（vue+webpack+HBulider）
1、webapp项目已经通过vue-cli搭建的脚手架写好了，然后通过webpack打包成一个部署文件list，如下：
2、打开HBulider,打开目录，选择这个list，项目名称自己更改。（或者直接新建一个app项目，然后把里边的unpackage和manifest这两个保留下来，其他的替换成自己dist文件里边的内容）
这个时候是web项目，需要改为APP项目（如果直接新建的app，请忽略此步）
更改前：
更改后：
3、在HB中打开这个dist，可以看到有一个manifest.json的文件。这个文件是用来配置应用信息的。入口文件一定要对应好，我用VUE写的单页应用，所以就一个index.html。
然后配置图标
按着自己项目的要求配置就行了，HB下面列举的很详细。
4、接下来可以通过手机用USB线与电脑连接进行真机调试。（必须通过USB线连接才可以，人家HB不支持什么通过无线连接的方式）windows电脑不用说了，可以用一些360助手什么的就可以解决了。如果你的手机是安卓的，在苹果电脑下面就没那么好搞了。后来通过百度加自己的摸索也搞出来。方法就是在苹果电脑上下载一个使用
Android
File
Transfer这个软件。要收费时，点击试用就可以了。手机上需要打开usb调试，然后选择
内置光盘
就可以与苹果电脑连接了。手机自己也有提示（真的很暖心）
连接成功之后，就可以进行真机调试了。
注：网上很多说自己的VUE项目项目打开一片空白，记得改一下config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。先看一下默认的路径。
module.exports
=
{
build:
{
env:
require('./prod.env'),
index:
path.resolve(__dirname,
'../dist/index.html'),
assetsRoot:
path.resolve(__dirname,
'../dist'),
assetsSubDirectory:
'static',
assetsPublicPath:
'/',
productionSourceMap:
true,
assetsPublicPath默认的是
‘/'
也就是根目录。而我们的index.html和static在同一级目录下面。
所以要改为
‘./
'
另外还需要注意一点。src里边router/index.js路由配置里边默认模式是hash，如果你改成了history模式的话，打开也会是一片空白。所以改为hash或者直接把模式配置删除，让它默认的就行
。
//
mode:
'history'
//
默认hash
5、如果真机测试没有问题。那么就可以真正的进行打包成APP了。
打包成功后，可以通过手动下载，或者直接打开下载目录里边下载好的。把这个xxxx.apk文件通过qq或者其他的发送到你的手机上，点击安装。就可以了。
6、最后，展示一下手机上的效果。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:详解Vue
webapp项目通过HBulider打包原生APP
vue压缩后的js可以反编译出来吗
vue压缩后的js可以反编译出来，反编译方法为：
1、在桌面找到自己下载的浏览器软件，点击浏览器图标。
2、在浏览器中随便找个网址登入。
3、在网页上右键鼠标，弹出右键菜单中选择“审查元素”选项（或按F12），弹出开发工具弹框，在弹框中选择“Sources”选项。如下图所示。
4、在左侧网络文件列表中随便找个js文件（如：mt_show_1.8.js文件），点击该文件并查看文件内容。发现文件一行展示证明被压缩过了。
5、找到该文件内容左下角的“{}”标签，找到后并点击该标签。
6、随后左侧会生成一个格式化后的文件（如：mt_show_1.8.js:formatted文件），查看js文件内容，内容展示成正常的格式了。现在就可以读懂里面的代码了。
