webcourse/Web
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

VS Code插件推荐

Browse Source
This commit is contained in:
qianguyihao 2018-06-15 21:41:27 +08:00
parent f4dbef94dd
commit eea26d809f
7 changed files with 451 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
00-前端工具/03-VS Code.md → 00-前端工具/02-VS Code.md
View File

@ -151,6 +151,48 @@ Sass 文件格式化。
20180611_2235.png 20180611_2235.png
### open in browser
在浏览器中打开。
### Auto Rename Tag
适用于 JSX、Vue、HTML。在修改标签名时，能在你修改开始（结束）标签的时候修改对应的结束（开始）标签，帮你减少 50% 的击键。
###Project Manager
项目管理，让我们方便的在命令面板中切换项目文件夹，当然，你也可以直接打开包含多个项目的父级文件夹，但这样可能会让 VSCode 变慢。
### highlight-icemode：选中相同的代码时，让高亮显示更加明显
VSCode自带的高亮显示，实在是不够显眼。用插件支持一下吧。
所用了这个插件之后，VS Code自带的高亮就可以关掉了：
在用户设置里添加`"editor.selectionHighlight": false`即可。
参考链接：[vscode 选中后相同内容高亮插件推荐](https://blog.csdn.net/palmer_kai/article/details/79548164)
### highlight-words：全局高亮（跨文件多色彩）
参考链接：[Visual Studio Code全局高亮着色插件(跨文件多色彩)经验纪要](https://zhuanlan.zhihu.com/p/31163793)
## Vue 相关的插件 ## Vue 相关的插件
@ -217,4 +259,23 @@ Sass 文件格式化。
问题1 问题1
解决；You can kill the Microsoft.VSCode.Cpp.IntelliSense.Msvc process to save the file successfully. 也就是 IntelliSense 这个进程。 解决；You can kill the Microsoft.VSCode.Cpp.IntelliSense.Msvc process to save the file successfully. 也就是 IntelliSense 这个进程。
## 参考链接
- [能让你开发效率翻倍的 VSCode 插件配置（上）](https://zhuanlan.zhihu.com/p/30976584)
### 某网友的VS Code 插件截图
20180611_2255.png

294
00-前端工具/01-Sublime Text在前端中的使用.md → 00-前端工具/03-Sublime Text在前端中的使用.md
View File

@ -1,147 +1,147 @@
### 新建文件时快速生成Html ### 新建文件时快速生成Html
**安装如下插件：** **安装如下插件：**
- FileHeader：自动创建文件开头模板，并且会根据最后的保存时间修改更新时间。[官网链接](https://github.com/shiyanhui/FileHeader)。 - FileHeader：自动创建文件开头模板，并且会根据最后的保存时间修改更新时间。[官网链接](https://github.com/shiyanhui/FileHeader)。
- CSS Format：css格式化。 - CSS Format：css格式化。
- Emmet：它能够让你在编辑器中书写CSS和HTML的缩写并且动态地拓展它，是一个能大幅度提高前端开发效率的一个工具。这个软件的安装过程比较久。[官网教程](http://docs.emmet.io/)。 - Emmet：它能够让你在编辑器中书写CSS和HTML的缩写并且动态地拓展它，是一个能大幅度提高前端开发效率的一个工具。这个软件的安装过程比较久。[官网教程](http://docs.emmet.io/)。
**开始使用：** **开始使用：**
新建文件，输入`html:5`，按[Ctrl + E] 或者 Tab 键， 新建文件，输入`html:5`，按[Ctrl + E] 或者 Tab 键，
参考链接：[Sublime Text 新建文件快速生成Html【头部信息】和【代码补全】、【汉化】](http://www.jianshu.com/p/f44e91bf9dfb) 参考链接：[Sublime Text 新建文件快速生成Html【头部信息】和【代码补全】、【汉化】](http://www.jianshu.com/p/f44e91bf9dfb)
## 常用插件 ## 常用插件
### SublimeCodeIntel：JavaScript代码自动提示（不好用） ### SublimeCodeIntel：JavaScript代码自动提示（不好用）
安装完成后，通过路径Perferences->Package Settings->SublimeCodeIntel->Setting - Defalut打开配置文件。 安装完成后，通过路径Perferences->Package Settings->SublimeCodeIntel->Setting - Defalut打开配置文件。
将 将
``` ```
"codeintel_selected_catalogs": ["jQuery"] "codeintel_selected_catalogs": ["jQuery"]
``` ```
改为： 改为：
``` ```
"codeintel_selected_catalogs": ["JavaScript"] "codeintel_selected_catalogs": ["JavaScript"]
``` ```
保存后重启软件。 保存后重启软件。
参考链接：[#](http://blog.csdn.net/hehexiaoxia/article/details/54134756) 参考链接：[#](http://blog.csdn.net/hehexiaoxia/article/details/54134756)
### javascript complet：JavaScript代码自动提示 ### javascript complet：JavaScript代码自动提示
- [官网链接](https://packagecontrol.io/packages/JavaScript%20Completions) - [官网链接](https://packagecontrol.io/packages/JavaScript%20Completions)
- [GitHub链接](https://github.com/pichillilorenzo/JavaScript-Completions) - [GitHub链接](https://github.com/pichillilorenzo/JavaScript-Completions)
在google上搜关键字"sublime javascript complete"找到的。另外还搜到一个[SublimeAllAutocomp lete](https://github.com/alienhard/SublimeAllAutocomplete) 在google上搜关键字"sublime javascript complete"找到的。另外还搜到一个[SublimeAllAutocomp lete](https://github.com/alienhard/SublimeAllAutocomplete)
### JsFormat：JS代码格式化 ### JsFormat：JS代码格式化
快捷键是：选中JS代码，然后按ctrl+alt+f。 快捷键是：选中JS代码，然后按ctrl+alt+f。
或者，先用快捷键打开命令面板 “ctrl + shift + p”, 再输入 “Format: Javascript” 就可以使用格式化命令 或者，先用快捷键打开命令面板 “ctrl + shift + p”, 再输入 “Format: Javascript” 就可以使用格式化命令
### Sublime Server ### Sublime Server
我们如果右键在浏览器中打开html网页，其实是以**文件路径**的方式打开的，导致很多api无法操作。最好的办法是：将html在服务器上打开。 我们如果右键在浏览器中打开html网页，其实是以**文件路径**的方式打开的，导致很多api无法操作。最好的办法是：将html在服务器上打开。
我们如果安装 `Sublime Server`，就可以让网页在本地的服务器上打开。 我们如果安装 `Sublime Server`，就可以让网页在本地的服务器上打开。
安装成功之后，使用步骤如下： 安装成功之后，使用步骤如下：
（1）选择菜单栏"Tools --> SublimeServer --> Start SublimeServer"启动服务器。 （1）选择菜单栏"Tools --> SublimeServer --> Start SublimeServer"启动服务器。
（2）在html文档里，右键选择 "View in SublimeServer"。 （2）在html文档里，右键选择 "View in SublimeServer"。
如果想关闭服务器，直接把Sublime Text 整个软件关掉就好。其他的关闭方式容易导致软件卡死。 如果想关闭服务器，直接把Sublime Text 整个软件关掉就好。其他的关闭方式容易导致软件卡死。
## 代码快速生成 ## 代码快速生成
（1）`>`符号的技巧： （1）`>`符号的技巧：
输入`ul>li*9`，然后按tab键，生成的代码如下；（符号`>`是包含的关系） 输入`ul>li*9`，然后按tab键，生成的代码如下；（符号`>`是包含的关系）
```html ```html
<div> <div>
<li>a</li> <li>a</li>
<li>a</li> <li>a</li>
<li>a</li> <li>a</li>
<li>a</li> <li>a</li>
<li>a</li> <li>a</li>
<li>a</li> <li>a</li>
<li>a</li> <li>a</li>
<li>a</li> <li>a</li>
<li>a</li> <li>a</li>
</div> </div>
</div> </div>
``` ```
## sublime text 快捷键 ## sublime text 快捷键
| Win快捷键 | Mac快捷键 |作用 | 备注 | | Win快捷键 | Mac快捷键 |作用 | 备注 |
|:-------------|:-------------|:-----|:-----| |:-------------|:-------------|:-----|:-----|
|html:5+tab||html结构代码|| |html:5+tab||html结构代码||
|tab||补全标签代码|| |tab||补全标签代码||
|tab|补全标签代码| |比如，在html文件中输入`div`，然后 按住tab键后，会自动生成`<div></div>`。|| |tab|补全标签代码| |比如，在html文件中输入`div`，然后 按住tab键后，会自动生成`<div></div>`。||
| **Ctrl + Shift + D** | Cmd + Shift + D|复制当前行到下一行 | | | **Ctrl + Shift + D** | Cmd + Shift + D|复制当前行到下一行 | |
| Ctrl+Shift+K || 快速删除整行 | | | Ctrl+Shift+K || 快速删除整行 | |
|Ctrl+鼠标左键单击||集体输入|| |Ctrl+鼠标左键单击||集体输入||
|Ctrl+H|Option+Cmd+F|查找替换||| |Ctrl+H|Option+Cmd+F|查找替换|||
| Ctrl+/ || 注释单行 | | | Ctrl+/ || 注释单行 | |
| Ctrl+Shift+/ || 注释多行 | | | Ctrl+Shift+/ || 注释多行 | |
|Ctrl+L| | 快速选中整行，继续操作则继续选择下一行，效果和 `Shift + ↓` 效果一样| | |Ctrl+L| | 快速选中整行，继续操作则继续选择下一行，效果和 `Shift + ↓` 效果一样| |
|**Ctrl+Shift+L**| | 先选中多行，再按下快捷键，会在每行行尾插入光标，即可同时编辑这些行| 经常与上一个快捷键结合起来使用 | |**Ctrl+Shift+L**| | 先选中多行，再按下快捷键，会在每行行尾插入光标，即可同时编辑这些行| 经常与上一个快捷键结合起来使用 |
|**Ctrl + Shift +【↑/↓**| Ctrl + Cmd +↑/↓ | 移动当前行 | | |**Ctrl + Shift +【↑/↓**| Ctrl + Cmd +↑/↓ | 移动当前行 | |
|F11||全屏|| |F11||全屏||
## 推荐阅读 ## 推荐阅读
- [Sublime Text使用技巧](https://github.com/smyhvae/tools/blob/master/01-%E4%B8%AA%E4%BA%BA%E6%95%B4%E7%90%86/Sublime%20Text%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7.md) - [Sublime Text使用技巧](https://github.com/smyhvae/tools/blob/master/01-%E4%B8%AA%E4%BA%BA%E6%95%B4%E7%90%86/Sublime%20Text%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7.md)
我自己整理的。 我自己整理的。
## 参考链接 ## 参考链接
- [像 Sublime Text 一样使用 Chrome DevTools](https://chinagdg.org/2015/12/%E5%83%8F-sublime-text-%E4%B8%80%E6%A0%B7%E4%BD%BF%E7%94%A8-chrome-devtools/) - [像 Sublime Text 一样使用 Chrome DevTools](https://chinagdg.org/2015/12/%E5%83%8F-sublime-text-%E4%B8%80%E6%A0%B7%E4%BD%BF%E7%94%A8-chrome-devtools/)

0
00-前端工具/02-WebStorm的使用.md → 00-前端工具/04-WebStorm的使用.md
View File

0
00-前端工具/04-Atom在前端的使用.md → 00-前端工具/05-Atom在前端的使用.md
View File

23
20-前端综合/2018年-前端日记.md
View File

@ -83,7 +83,7 @@ Vue.component('my-div', $.extend({
### 2018-05-08 ### 2018-05-08
- sku的概念 - sku、spu的概念
### 2018-05-09 ### 2018-05-09
@ -163,6 +163,11 @@ v-on:keyup="querysku = querysku.replace(/\D/,'')"
- jingwen推荐的iconMoon图标网站。网址：<https://icomoon.io/> - jingwen推荐的iconMoon图标网站。网址：<https://icomoon.io/>
### 2018-06-01
- `PingFangSC`字体是iOS独有的字体。`PingFangSC-Regular`是常规字体，`PingFangSC-Semibold`是加粗字体。如果我在代码里设置了这个字体，那么，ios上可以看到效果，但是Android上看不到效果，仍然会采用Android系统默认的字体。
### 2018-06-04 ### 2018-06-04
@ -193,9 +198,7 @@ git cherry-pick myLog
相当于是，我现在是**并行**开发两个功能了，要怎么通过git来进行协作呢？ 相当于是，我现在是**并行**开发两个功能了，要怎么通过git来进行协作呢？
目前考虑到有几种答案。 目前考虑到的姣好的方式是：
方式1:
- 从master拉分支`branch1`，此分支专门用来开发功能1，改功能1的bug。 - 从master拉分支`branch1`，此分支专门用来开发功能1，改功能1的bug。
@ -221,7 +224,17 @@ git cherry-pick myLog
- 通过 jQuery 获取Dom的时候，比如`$('#topNavTop').css('background','red')`记得要指明是 id 还是 class。 - 通过 jQuery 获取Dom的时候，比如`$('#topNavTop').css('background','red')`记得要指明是 id 还是 class。
- 每次开发一个新的需求，每次开发一个新的需求，记得要问清楚：“H5和” - 每次开发一个新的需求，记得要问清楚：“H5和小程序”都要做吗？要做的话，工作量基本乘以2。
### 2018-06-14
- pv、uv的概念

70
21-Vue基础/03-Vue中的Ajax请求.md
View File

@ -270,7 +270,7 @@ vue-resource 依赖于 Vue。所以，我们要按照先后顺序，导入vue.js
this.pname = ''; this.pname = '';
// 3、直接将列表数据重新加载一次，即可刷新页面上的数据 // 3、添加完成后，只需要手动再调用一次getlist（将列表数据重新加载一次），即可刷新页面上的数据
this.getlist(); this.getlist();
}); });
@ -481,3 +481,71 @@ vue-resource 依赖于 Vue。所以，我们要按照先后顺序，导入vue.js
除了 vue-resource 之外，还可以使用 `axios` 的第三方包实现实现数据的请求。 除了 vue-resource 之外，还可以使用 `axios` 的第三方包实现实现数据的请求。
## 通过Vue全局配置api接口的url地址
api接口的url地址包括：绝对路径+相对路径。
我们在做Ajax请求的时候，所填写的url建议填**相对路径**，然后把**绝对路径**放在全局的位置。
Vue就提供了这个功能。举例如下：
```html
<script>
// 如果我们通过全局配置了，请求的数据接口 根域名，则 ，在每次单独发起 http 请求的时候，请求的 url 路径，应该以相对路径开头，前面不能带 / ，否则 不会启用根路径做拼接；
Vue.http.options.root = 'http://smyhvae/';
// 全局启用 emulateJSON 选项
Vue.http.options.emulateJSON = true;
var vm = new Vue({
el: '#app',
data: {
name: '',
list: [ // 存放所有品牌列表的数组
]
},
created() { // 当 vm 实例 的 data 和 methods 初始化完毕后，vm实例会自动执行created 这个生命周期函数
this.getAllList()
},
methods: {
getAllList() { // 获取所有的品牌列表
// 分析：
// 1. 由于已经导入了 Vue-resource这个包，所以 ，可以直接通过 this.$http 来发起数据请求
// 2. 根据接口API文档，知道，获取列表的时候，应该发起一个 get 请求
// 3. this.$http.get('url').then(function(result){})
// 4. 当通过 then 指定回调函数之后，在回调函数中，可以拿到数据服务器返回的 result
// 5. 先判断 result.status 是否等于0，如果等于0，就成功了，可以 把 result.message 赋值给 this.list ; 如果不等于0，可以弹框提醒，获取数据失败！
this.$http.get('api/getprodlist').then(result => {
// 注意： 通过 $http 获取到的数据，都在 result.body 中放着
var result = result.body
if (result.status === 0) {
// 成功了
this.list = result.message
} else {
// 失败了
alert('获取数据失败！')
}
})
}
}
});
</script>
```
如上方代码所示，第一步是在全局的位置写**绝对路径**：
```javascript
Vue.http.options.root = 'http://smyhvae/';
```
第二步是在Ajax请求的url中写**相对路径**：（注意，前面不要带`/`）
```javascript
this.$http.get('api/getprodlist')
```

155
21-Vue基础/04-Vue动画.md Normal file
View File

@ -0,0 +1,155 @@
04-Vue动画.md
## 前言
动画的作用：提高用户的体验，帮助用户更好的理解页面中的功能。
## 使用过渡类名实现动画
### 官方文档的解释
过渡类名如下：
动画进入：
- v-enter：动画进入之前的**初始**状态
- v-enter-to：动画进入之后的**结束**状态
- v-enter-active：动画进入的时间段
PS：第一、第二个是时间点；第三个是时间段。
动画离开：
- v-leave：动画离开之前的**初始**状态
- v-leave-to：动画离开之后的**结束**状态
- v-leave-active：动画离开的时间段
PS：第一、第二个是时间点；第三个是时间段。
### 使用举例
温馨提示：`v-enter-to`和`v-leave`的状态是一样的。而且一般来说，`v-enter`和`v-leave-to`的状态也是一致的。所以，我们可以把这四个状态写成两组。
现在我们来做个例子：点击按钮时，让div显示/隐藏。
**1、引入**：
如果我们不使用动画，应该是这样做：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue2.5.16.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="toggle" @click="flag=!flag">
<!-- 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 -->
<h3 v-if="flag">这是一个H3</h3>
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
flag: false
},
methods: {}
});
</script>
</body>
</html>
```
**2、使用动画**：（通过Vue的过渡类名来实现）
现在，我们加**淡入淡出**的动画，让div显示和隐藏。代码如下：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue2.5.16.js"></script>
<!-- 2. 自定义两组样式，来控制 transition 内部的元素实现动画 -->
<style>
/* v-enter 【这是一个时间点】 是进入之前，元素的起始状态，此时还没有开始进入 */
/* v-leave-to 【这是一个时间点】 是动画离开之后，离开的终止状态，此时，元素 动画已经结束了 */
.v-enter,
.v-leave-to {
opacity: 0;
}
/* v-enter-active 【入场动画的时间段】 */
/* v-leave-active 【离场动画的时间段】 */
.v-enter-active,
.v-leave-active {
transition: all 1s ease; /*期间，设置过渡的属性：all表示所有的属性、时间为1秒、过渡的状态*/
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="toggle" @click="flag=!flag">
<!-- 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 -->
<!-- 1. 使用 transition 元素，把 需要被动画控制的元素，包裹起来 -->
<!-- transition 元素，是 Vue 官方提供的 -->
<transition>
<h3 v-if="flag">这是一个H3</h3>
</transition>
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
flag: false
},
methods: {}
});
</script>
</body>
</html>
```