vue压缩后的js可以反编译出来,反编译方法为:
1、在桌面找到自己下载的浏览器软件,点击浏览器图标。
2、在浏览器中随便找个网址登入。
3、在网页上右键鼠标,弹出右键菜单中选择“审查元素”选项(或按F12),弹出开发工具弹框,在弹框中选择“Sources”选项。如下图所示。
4、在左侧网络文件列表中随便找个js文件(如:mt_show_1.8.js文件),点击该文件并查看文件内容。发现文件一行展示证明被压缩过了。
5、找到该文件内容左下角的“{}”标签,找到后并点击该标签。
6、随后左侧会生成一个格式化后的文件(如:mt_show_1.8.js:formatted文件),查看js文件内容,内容展示成正常的格式了。现在就可以读懂里面的代码了。
2.1 新建文件夹docs
配置package.json,添加下述两行
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}}
进入docs文件夹 创建 README.md文件
此时运行命令
npm run docs:dev
此时文件夹结构
study
+--docs
+----README.md
+--package.json
运行访问http://localhost:8080/
image.png
结束运行 ,执行命令
npm run docs:build
然后看文件变化 多了个node_modules
docs 多了个 .vuepress文件夹
study+--docs+----.vuepress+------ dist //打包后的文件夹+----README.md+--package.json+--node_modules
我们在.vuepress 创建
config.js 文件
添加
module.exports = {
title: 'Adroi媒体API 接口文档', // 设置网站标题
description : 'Adroi',
base : '/v1/adroi-h5/adroiapi/',
themeConfig : {
nav : [
{ text: '接口定义', link: '/apiword' },
{ text: '接口字段定义', link: '/api' },
{ text: '附录:错误码', link: '/error' }
],
sidebar: {
'/' : [
"/", //指的是根目录的md文件 也就是 README.md 里面的内容
"apiword", 根目录创建 apiword.md文件 "api",根目录创建 api.md文件 "error" 根目录创建 error.md文件 ]
},
sidebarDepth : 2
}}
image.png
3)添加静态图片
![An image](./baner.png)
4)添加指定样式
添加样式 分两种 一种不用预编译处理、一种使用
//不使用预编译处理//直接在md文件底部添上<style></style>
//使用预编译处理
首先需要安装所需的模块 举例:stylus
npm i stylus stylus-loader -D<style lang="stylus"></style>
5)vuePress可添加js代码
既然是尤大大的作品 那肯定是支持vue语法的
在MD文件中直接写入js的语法
<script>
export default{
//...do something
}</script>
6)代码发布或上传至服务器
关于发布问题:首先我们知道在打包后的文件都是静态文件之前的MD文件都被打包成html静态文件了,其次在文件config.js中 base至关重要
6-1发布在云盘中如百度云盘 github上可直接通过链接访问
在云盘上创建根目录如vuepress,然后在config中 bese这部分就填写/vuepress,然后进行打包操作,再然后把打包后的文件上传至云盘上的vuepress文件中
6-2 通过服务器发布
在服务器上安装Apache或者nginx 这里拿nginx举例:
至于nginx 安装 以及配置文件的解读使用 我这里就不详述了,不了解的童鞋可以自己查阅相关文件
同样base的填写很重要
//为了简单明了 我们把打包好的文件放入nginx中html文件下 之前的文件可以清空server {
listen 8081 //监听8081端口
server_name localhost//localhost:8081即可指向也可写别名如local.vuepress.com.cn 那我们访问这个端口的别名加端口就可以
location / {
root /nginx/nginx-1.9.15/html//至关重要你的入口文件在本机的位置
index index.html index.htm//入口文件
}
}
转载于:https://www.jianshu.com/p/7a2cc8a7f40c
npm run build
使用vue-cli创建的项目默认导入的是运行时版本并且是ESM模块化方式
核心: 把会改变数组的方法进行修补,当这些方法被调用的时候调用notify方法,遍历数组中的元素,把对象元素进行响应式处理
Watcher分为三类,Computed Watcher, 用户Watcher(监听器),渲染Watcher
模板编译的主要目的是将模板转换为渲染函数