VUEjs - Webpack 笔记

最近学习 VUEjs 陆陆续续的看了一些教程,有很多,而且还收费的,后来无意间看到了这个
小马视频网站地址的技术博客,非常棒的教程,浅显易懂,而且很多都是实战经验的东西,非常感谢作者小马.
原教程源文件地址

下面是学习时做的笔记

2.命令行安装

知识点

  • vue命令工具安装

官网

https://github.com/vuejs/vue-cli

实战演习

1
2
3
4
5
6
7
#最新版本确认 (2.x)
$ npm show vue-cli //这个命令检测的是2.X版本的VUE
$ [sudo] npm install -g vue-cli@2.9.3
#安装版本确认
$ vue -V
#命令帮助
$ vue -h

vue3.X 版本的

如果之前安装了2.X版本的VUE 需要使用npm uninstall vue-cli -g命令来卸载

1
2
3
4
npm show @vue/cli` 检测版本
[sudo] npm install -g @vue/cli@2.9.3 //@是可选的.
$ vue -V //检测版本
$ vue -h //帮助

4.webpack模板工程

知识点

建立webpack模板工程
官网

实战演习

1
2
3
4
5
$ vue init webpack myweb
$ cd myweb
$ npm run dev
$ npm run build
$ code .

webpack工程目录介绍

  • src:源文件文件夹
  • dist:打包文件夹
  • package.json:项目设置文件

5.引入Bootstrap4(或者引入其他前端框架)

知识点

  • vue-webpack工程导入bootstrap4框架

实战演习

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
在命令行中:
$ cd myweb
$ npm install bootstrap --save --save-exact

npm install vue-router --save --save-exact

上面这句是说安装 bootstrap 依赖, --save 表示把本依赖添加到package.json 文件中,并且 --save-exact 表示精确版本(不带上标^的)

$ nano main.js //表示打开main.js文件,并且添加 下面的代码,也可以通过编辑器插入代码.
...
import 'bootstrap/dist/css/bootstrap.min.css'
...
#编辑视图文件,测试Bootstrap功能
$ cd src
$ nano App.vue

下面的代码加载到 <template>标签内的 div 标签内部
...
<button class="btn btn-primary">确定</button>
<button class="btn btn-success">使用</button>
<button class="btn btn-danger">注意</button>
...
$ npm start

如果需要安装其他框架,比如uikit 则
npm install uikit --save --save-exact
并且在 main.js 文件中插入 import 'uikit/dist/css/uikit.min.css'

6.使用Ajax库-axios

知识点

为网页增加远程数据存取能力(Ajax)
HTTP库axios(浏览器 or Node.js)
axios:Promise based HTTP client for the browser and node.js
https://github.com/axios/axios

实战演习

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
$ cd myweb
$ npm install --save --save-exact axios vue-axios
#注册组件
$ nano main.js

...
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
...
#各个组件
$ nano HelloWorld.vue
...

<pre>{{content}}</pre>
...
export default {
name: "HelloWorld",
data() {
return {
content: ""
};
},
mounted() {
this.axios.post("http://api.komavideo.com/news/list").then(body => {
this.content = body.data;
});
}
};
...
VS Code workspace setting
纠正VSCode-vetur插件的4空格格式化问题

{
"prettier.tabWidth": 4
}

7.自定义css样式

知识点

  • 定义属于自己的样式单文件my.css

实战演习

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$ cd assets
$ nano my.css
...
.myclass1 {
color: red;
border: 1px solid blue;
}
...
$ cd ../
$ nano App.vue
...
#这里必须是该文件对于my.css的相对路径
import './assets/my.css'
...
<div class="myclass1">你好!</div>
...

8.组件的结构

###知识点

VUE命令行开发模式为我们带来的组件开发方式。

###组件文件夹

所有的组件都被统一放在工程中的组件文件夹中。

/ SRC```
1
2
3
4
5
6
7
8

###组件格式

* template:组件html内容
* 脚本:组件js脚本(ES6)
* style:组件css样式单

##实战演习

<模板>


</ h1>
</ DIV>
</模板>

wordpress 全站静态化输出HTML文档

wordpress 全站静态化输出HTML文档

最近使用WP重新制作了公司官网,只有几个比较少的页面,实在是不想整的太臃肿,所以想着能不能直接把WORDPRESS 输出成静态页面呢.

Wordpress 纯 HTML
需要 PHP支持 不需要
需要数据库 MySQL 不需要
耗费资源多 耗费资源少
更新方便 更新不方便

安装wp插件

  1. 搜索并安装simply static
  2. 打开simply static设置: 在输出设置中 选择离线保存.
  3. 在额外目录中 添加额外的 CSS 或者 需要额外输出的文件夹地址.
  4. 点击 生成

HTML 调试

当然simply static并不能一劳永逸,有些地方还是不尽人意的,需要手动调整.打开浏览器的调试器,看看到底哪些地方报错,然后逐一调试.

  1. 比较常见的就是文件缺失.这个在simply static插件中添加目录地址即可.
  2. wprdpress自带的emoji脚本出错,这个直接注释掉HTML文档中的 JS脚本即可.
  3. 多余的外部链接 比如 Feed,wp-embed等等,这些都可以手动删除.

部署

HTML作为静态网页,而且还是相对目录生成的,所以可以在任何地方使用.比如OSS,比如FTP服务器上.

不足

由于官网并不是经常需要调整,所以更新这个还好说.
图片和JS脚本跟HTML文件深度耦合,不方便做CDN.目前还没有特别好的办法.也许可以研究一下Webpack打包,然后分离出来图片和JS,单独链接起来.

electron 项目打包

electron 项目打包

怎么将我们开发好的应用打包成.app.exe的执行文件,这就涉及到了重要的打包环节, 这里使用electron-quick-start项目进行打包

目前,主流的打包工具有两个electron-packagerelectron-builder

Mac打包window安装包需下载wine

brew install wine

如果有丢失组件,按照报错信息进行下载即可

electron-packager

electron-packager把你的electron打包成可运行文件(.app, .exe, etc)

执行npm i electron-packager -D进行安装

electron-packager . 快速打包

打包详解

1
electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> --out=out --icon=assets/app.ico --asar --overwrite --ignore=.git
  • sourcedir 项目入口 根据package.json的目录
  • appname 包名
  • platform 构建平台 包含 darwin, linux, mas, win32 all
  • arch 构建架构 包含ia32,x64,armv7l,arm64
  • out 打包后的地址
  • icon 打包图标
  • asar 是否生成app.asar, 不然就是自己的源码
  • overwrite 覆盖上次打包
  • ignore 不进行打包的文件

第一次打包需要下载二进制的包耗时会久一些,以后走缓存就快的多了。

命令比较长,每次要是都用这个命令来打包会很烦,可以使用第二种方法;

2、首先在项目根目录下面的 package.json 里添加代码,

1
2
3
"start": "electron .",
"packager": "electron-packager ./ SleeponWeb --mac --out ./OutApp --version-app 1.0.0 --overwrite --icon=./assets/app.icns"
},

PS:这里要注意,字段里的 项目名字,version,icon路径要改成自己的;
PS:注意,图标文件需要为 icns 格式的.

打包后目录为

其中electron-quick-start可以直接打开运行

缓存地址

  • Mac ~/Library/Caches/electron/
  • Windows $LOCALAPPDATA/electron/Cache or ~/AppData/Local/electron/Cache/
  • Linux $XDG_CACHE_HOME or ~/.cache/electron/

electron-builder

electron-builder是一个完整的解决方案,对于macos、windows、linux下的electron app,它可以提供打包及构建的相关功能。同时,它还提供开箱即用的“自动更新”功能支持

npm i electron-builder -D 下载

electron-builder打包

出现如下


同样是第一次打包时间会比较长,别着急,静候佳音。

会默认打包在dist目录,包含如下

mac文件里有运行时文件,默认使用asar方式进行打包

electron-builder --dir 只会生成包文件,对测试有用


本教程引用原文

Java Script 学习笔记

有关作用域

在JS的全局中,所有声明的变量都是 window的对象属性。

例如:

1
2
3
4
var a = 100;//声明变量a等于100
//这时候 a 会增加到 window 的属性中,所以:

window.a === a //true

在函数体中的变量,如果没声明,则依然会把变量赋予全局(window)例如:

1
2
3
4
5
6
7
function test() {
var r = y = 200;//只声明了变量r,没有声明变量y
};
test();
//这时候 如果
window.r ;//会报错找不到,而
window.y; //则不会报错。因为在函数体里面,y没有被声明,所以这个y直接被赋值给了全局对象 window

在全局范围内:
var nc = 100然后写一个方法

1
2
3
4
5
function tv (){
var nc = 456789
console.log(nc)
};
tv();

这时候输出的是 456789,因为函数体内部有nc变量,如果函数体内部没有,则输出全局对象 window中的nc属性.

另外,如果上面这段函数体中,没有进行函数声明 var (声明),就直接复制,那么运行函数后,则nc函数也被赋值给了全局对象,覆盖原来的nc值.

预编译的逻辑

预编译,是指在函数执行的前一刻

  1. 创建AO对象(Activation Object 作用域–执行期上下文)
  2. 先找形参和变量声明,将变量声明和形参作为AO对象的属性命名,值为 undefined
  3. 将实参和形参统一。
  4. 在函数体里面找函数声明,把赋予函数体赋予函数名。

实例:

1
2
3
4
5
6
7
8
9
10
11
12
function cc (){
console.log(a);
var a = 123;
console.log(a);
function a () {}; // 这个是函数声明,带有函数名的,是函数声明
console.log(a);
var b = function (){}; // 这是函数表达式,不能在预编译时被提升
console.log(b);
function d (){};
}

cc (1);
  1. 预编译开始,创建了一个OA{}对象.

    1
    2
    3
    AO {

    }
  2. 先找形参和变量声明,将变量声明和形参作为属性名.

    1
    2
    3
    4
    AO {
    a : undefined;
    b : undefined;
    }
  3. 将实参和形参统一.

1
2
3
4
5
//把 cc(1) 传入的 1 赋值给变量a.
AO {
a : 1;
b : undefined;
}
  1. 找到函数名,把函数体赋值给函数名
1
2
3
4
5
AO {
a : function a () {};
b : undefined;
d : function d (){};
}
  1. 这时候函数的AO对象创建完成,开始执行函数体了
1
2
3
4
5
6
7
8
9
10
11
// 执行函数体时,是按照顺序执行.
function cc (){
console.log(a); // 当第一次打印 a的时候,这时候,会在AO对象里面找函数名 a.而这时候函数名 a的值是: function a () {} 一个函数体.
var a = 123; // 执行到这里时,123又赋值给了 AO对象中的 a
console.log(a);//所以这时候这个 a 等于 123了.
function a () {}; // 这句在创建 AO对象时已经读取过了.所以略过.
console.log(a); // 所以这里打印的 a 依然还是 123
var b = function (){}; // 这时候 把一段函数体 赋值给了 b.
console.log(b); // 所以这时候打印的b 是函数体
function d (){}; //最后这条已在创建AO对象时候赋值过了,所以略过
}

所以最后打印的输出为:

1
2
3
4
ƒ a () {}
123
123
ƒ (){}

全局预编译的过程

跟函数体的预编译过程一样,全局预编译会生成一个GO对象.
同样的 执行上面 函数体 预编译的过程步骤,不过GO不会有实参了.所以省略了一步.

JS的对象

对象的创建方法:

  1. 对象字面量的方法,就是直接使用 var 变量名 = {}这样就可以.
  2. 还有两种,构造函数创建方法和自定义的方法.
1
2
3
4
5
6
var obj = new Object();//系统自带的构造函数
obj.name = 'abc'; //这样可以给对象添加属性了.(最好使用单引号,因为PHP默认是单引号,写双引号就需要转义了)

//另外一种自定义构造方法是
function presson (){};
var presson1 = new presson();//使用关键字new可以构造出presson1这个对象.

由于在js中构造函数跟正常的函数没有任何区别,所以为了区别对象和函数名,在使用构造函数的时候,构造函数名应该使用 大驼峰式命名规则. PressonKion

1
2
3
4
5
6
7
8
9
//构造工厂的方法.
function Car (){
this.name = 'BMW',
this.height = '1400',
this.lang = '4900',
this.weight = 1000
};

var car1 = new Car();//这样就构造出了一个 car 的对象.

如果需要在函数构造的时候自定义对象的属性值,怎么办?
直接传参尽量就行了.比如:

1
2
3
4
5
function Car (name,color){
this.name : name,
this.color : color
};
var car1 = new Car ('bmw','red') //传参给构造工厂,这样构造出来的car1对象的 name属性就是 bmw,而 color 属性就是 red 了.

构造函数的基本原理:

  1. 必须要在构造的时候加上关键字 new ,
  2. 当使用构造函数的时候会在函数内AO 对象先生成一个隐式加上一个 this{}的空对象.
  3. 当对象构造完成后,会隐式的进行一个返回对象的操作 return this.

JQ中的 AJAX请求

JQ中的 AJAX请求

$.ajax({
type: “post”,
url: ‘http://xxx.sss‘,
async: false, // 使用同步方式
// 1 需要使用JSON.stringify 否则格式为 a=2&b=3&now=14…
// 2 需要强制类型转换,否则格式为 {“a”:”2”,”b”:”3”}
data: JSON.stringify({
“post”:{
“loginname”: $(‘input[name=”uid”]’).val(),
“password”: $(‘input[name=”pass”]’).val(),
“fb_openid”: “”,
“username”: “”,
“age”: “”,
“headimgurl”: “”,
“sex”: “”
}
// a: parseInt($(‘input[name=”a”]’).val()),
// b: parseInt($(‘input[name=”b”]’).val()),
// now: new Date().getTime() // 注意不要在此行增加逗号
}),
contentType: “application/json; charset=utf-8”,
dataType: “json”,
success: function(data){
console.log(“请求完成”,data)
}

JS中的时间格式化方法

JS中的时间格式化方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//本方法是得到了时间戳后把时间戳转换成可读时间的方法
Date.prototype.Format = function (fmt) { //author: meizz
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
};
1
2
3
4
调用: 

var time1 = new Date().Format("yyyy-MM-dd");
var time2 = new Date().Format("yyyy-MM-dd HH:mm:ss");

通过JS来查询系统

通过JS来查询系统

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type="text/javascript">
var u = navigator.userAgent,
app = navigator.appVersion;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
// alert('是否是Android:'+isAndroid);
// alert('是否是iOS:'+isiOS);
if(isAndroid){
document.getElementById('email').href = "javascript:android_email()";
alert("这是安卓系统");
} else if (isiOS) {
document.getElementById('email').href = "mailto:service@sleepon.us?subject=Hello &body=Hello Sleep"
alert("这是ios系统");
} else {
document.getElementById('email').href = "mailto:service@sleepon.us?subject=Hello &body=Hello Sleep"
alert("这是Win系统")
};

function android_email(){
//window.location.href="protocol://h5?event=android_email"
alert('安卓触发成功')
};
</script>

html的 a 标签点击触发js函数的3种方法

html的 a 标签点击触发js函数的3种方法

方法1<a href="" onclick="fun()">我是a标签</a>
方法2<a href="javascript:fun()">我是a标签</a>
方法3<a id='fun' >我是a标签</a>然后用js的都没选择器选择这个ID.
document.getElementById('fun').click(function(){ fun(); });

如果你想要用JS来实现点击a标签的跳转效果。

那么你不能直接对a标签执行click()函数

因为实际上,只有点击a标签中的文字,才能触发跳转。

知道了这一点,我们只需对a标签中的文字执行click函数就可以达到目的

1
2
3
<a id="tagA" href="http://www.hello.com"><span>hello</span></a>
……
$("#tagA span").click();//这样就可以达到跳转到的效果,仅仅$("#tagA").click();是不会跳转

NodeJs 学习笔记01

PM也需要学Nodejs么?

作为一名合格的PM,除了基本的需求管理,对于产品的开发的技术点也是非常重要的.至少知道产品开发的工作原理,什么是框架,什么是前后端分离,什么是数据库范式等等.
所以作为一名半路出家的PM,学习好后端的原理就意义非凡了.

Nodejs 是干什么的?

一句话概括就是:从基于Chrome V8引擎下的javascript运行环境,它从浏览器的环境中剖离开来,进入到后端开发的领域.

安装node

可以在官网安装

验证node安装效果:
node -v
验证npm安装:
npm -v

如果能成功打印出版本号,则表示安装成功.

© 2018 Ken的博客 All Rights Reserved. 本站访客数人次 本站总访问量