007 - VUE + hexo blog

############      VUE.JS      ##########
在【设置】中  file types  选中html后手动添加：  *.vue
###网址：     cn.vuejs.org

模板语法

API 指令

全局API

methods
computed
watch


注意，不要在实例属性或者回调函数中（如 vm.$watch('a', newVal => this.myMethod())）使用箭头函数。
因为箭头函数绑定父级上下文，所以 this 不会像预想的一样是 Vue 实例，而是 this.myMethod 未被定义。

###  修饰符
修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit"></form>

###  v-bind 缩写
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

###  v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

???????????????????????????????????????？？“”？？？?????????????

style  用在组件上


自动添加前缀
当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀。

用 key 管理可复用的元素

<div v-bind:style="transform">

<div v-for="item of items"></div>

组件 和 v-for

###  列表渲染：

编译方法：
重塑数组


<a v-on:click.once="doThis"></a>

 ### Vue 为最常用的按键提供了别名：
 <input v-on:keyup.enter="submit">
.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right

鼠标事件
.left
.right
.middle

#   packjson中：
npm init
express：


【上传文件】
【配置】
npm install express --save
npm install bootstrap --save
npm install vue --save
npm install multer --save

引入Multer

【配置环境】
# 全局安装 vue-cli
npm install -g vue-cli --save
vue init webpack 004-vue-cli      安装时注意下边的选项

# 创建一个基于 webpack 模板的新项目
cnpm install 或者 npm install
npm start

### `注意下边的`  ### :
? Vue build standalone
? Install vue-router?                           Yes
? Use ESLint to lint your code?                 No
? Setup unit tests with Karma + Mocha?          No
? Setup e2e tests with Nightwatch?              No

【vue插件】
下载安装vue插件，在设置中 plugin 中 browse 搜索 vue.js 下载安装
在【设置】中  file types  选中html后手动添加：  *.vue

``
scope 限制作用域的，限制在这个组件中。
alias:{   别名
    @ : trsolve('src)
}


【别名、重定向】
vue.js --> 路由--> vue-router --> 重定向、别名

【配置】
npm install vue-style-loader --save
npm install css-loader --save
npm install node-sass --save
npm install sass-loader --save


########################     005-server     ##########################

【配置】
npm install mysql --save
npm install body-parser --save
npm install pinyin --save


【流程】：
1.npm init
2.创建数据表
3.添加数据库
4.
5.【引入后台服务器】config里的index.js   proxyTable配置: 'api':'http://localhost:3000'
6.
7. 转pinyin



##############  【socket.io】  ######
https://socket.io/

【配置】
npm install socket.io --save

只要有一个客户来，就创建一个socket.socket相当于接线员


服务端： npm install cookie-parse --save


#################  全新服务器

npm install socket.io --save
npm install mysql --save
npm install body-parser --save
npm install cookie-parse --save
npm install express --save



###############

VUE  ROUTER 

动画

浏览器输入： ipconfig地址:3000/#/keep

################      上传    ###########
npm run build

把004 build之后
改配置：
config --> index.js -->

../../005-server/index.html
../../005-server/public

最后上传005

需要修改 chat里的 服务器端口为3000端口

把006里的东西放到005里。

把io服务器地址url都改为 百度云申请的域名  http://a.duapp.com

百度云下载后，packjson中按照百度下载下来的改


css新特性






【博客 --> blog】   博客：http://www.ookamiantd.top/2017/build-blog-hexo-base/
(1) npm install -g hexo-cli
【在一个空文件夹下运行：】
(2) hexo init    # hexo会在目标文件夹建立网站所需要的所有文件
(3) npm install  # 安装依赖包

(4) 【下载主题】
1.cd进入themes。
2.git clone 主题的网址
3.狗改_config.yml中 主题名字为theme: 新主题名

(5) hexo g # 等同于hexo generate，生成静态文件
(6) hexo s # 等同于hexo server，在本地服务器运行

一直打不开的话，修改端口号：
(7) hexo server -p 4001


【上传】
先将_config.yml 中的 root:/ 改为 root: /blog/ （github下的文件夹名）
hexo g
将public下的文件上传到github