# node-vue

**Repository Path**: react-module/node-vue

## Basic Information

- **Project Name**: node-vue
- **Description**: node vue-webpack前后端分离学习记录
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2017-12-12
- **Last Updated**: 2021-08-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## node vue项目开发
看了近一周的vue开发，有诸多感触，我之前接触过react、angular所以特别想学学久仰大名的vue。学习半天以后发现，接触到的东西多了，学习起来就是容易很多，vue的指令我能个联想到angular的指令，vue组件化设计类似于react的组件化设计，包括一些router的设置跟react里的路由或者nodejs里的路由都差不多，vuex更是根据redux、flux改写的，虽然我还搞不太明白怎么用，至于vue的模板渲染，跟expres渲染ejs没有太大的区别。使用vue可以完全脱离jq，虽然我还没感受到不用jq有什么神奇的赶脚，但是我觉得这种双向数据绑定的还是挺方便的，此文档用来记录我学习vue的一些新的知识。

### 指令
1. `v-bind` 主要用于动态绑定DOM元素属性，即元素属性实际的值是 有vm实例中的data属性提供的。
2. `v-model` 主要对表单元素进行双向数据绑定，在修改表单元素的值时，实例vm中对应的vm对应的属性也同时更新。
3. `v-if`,`v-show`,`v-else`这几个指令来说明模板和数据间的逻辑关系
  - v-if和v-else的作用是根据数值来判断是否输出该dom元素，以及包含的子元素。
  eg:
  `<div v-if="yes">yes</div>`
  当vm实例中的data.yes=true时，模板引擎会编译这个dom节点，输出`<div>yes</div>`
  值得注意的是：v-else要紧跟v-if否则不起作用。
  - `v-show`与`v-if`的效果差不多，都是通过判断真假显示内容，唯一不同的是，v-show不显示的时候是`display:none`,也就是保留了dom节点，但是v-if不会。        
4. `v-for` 用于列表渲染，可以循环遍历数组和对象,注意`v-for="b in 10"`目前指的是1-10的迭代
5. `v-on` 事件绑定，简写`@:`
6. `v-text` `<p v-text="msg"><p>`相当于innerText,与{{msg}}相比，避免了闪现的问题。
7. `v-HTML` 类似于innerHTML,也可以避免闪现
8. `v-el` 这个指令相当于给dom元素添加了个索引，例如`<div v-el="demo">this is a test </div>`,如果想获取当前dom里的值,可以`vm.$els.demo.innerText`,注意：html不区分大小写，驼峰式的写法会自动转成小写，可以通过`-`的方式转换成大写。
9. `v-ref`  与`v-el`类似 通过`vim.$refs`访问
10. `v-pre` 跳过编译这个元素
11. `v-cloak` 感觉没啥用
12. `v-once`新增内置指令，用于标明元素或组件只渲染一次。


### 模板渲染

1. `v-for` 主要用于列表渲染，讲根据接受到的数组重复渲染v-for绑定到的dom元素及内部子元素，并可以通过设置别名的方式，获取数组内数据渲染到节点中。
eg:
```
<ul v-for="item in items">
  <li>{{item.title}}</li>
  <li>{{item.description}}</li>
</ul>
```

2. `v-for`内置`$index`变量，可以在调用`v-for`的时候调用，例如`<li v-for="(index,item) in items">{{index}}-{{$index}}</li>`
3. 修改数据
 -  直接修改数组可以改变数据
 -  不能直接改变数组的情况
    - 1.vm.items[0]={},这种情况下无法修改，解决：`vm.item.$set(0,{})`或者`vm.$set('item[0]',{})`
    - 2.vm.item.length=0
4. `v-for`遍历对象，可以使用`（key,value）`的形式自定义key变量。
      ```
      <li v-for="(key,value)" in objectDemo>
         {{key}}---{{$key}}:{{vue}}
      </li>
      ```
5. template标签
用来作为模板渲染的跟节点，但是渲染出来不存在此节点

### 事件绑定与监听
`v-on`可以绑定实例属性methods中的方法作为事件的处理器，`v-on:`后面可以接受所有的原生事件名称。
 - 简写 `@:`
 - 可以绑定methods函数，也支持内联js，但是仅限一个语句。
 - 绑定methods函数和内联js都可以获取原生dom元素，event.
 - 绑定多个事件时，为顺序执行。

### ui组件 [饿了吗](http://element.eleme.io)
#### 使用指南
1. 安装
>npm install cnpm install element-ui --save-dev    

2. 引入文件main.js
```
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI, { size: 'small' })
```
3. 使用
 - 在components文件夹下新建一个页面，从[饿了吗](http://element.eleme.io)找到自己喜欢的组件，比如走马灯 Carousel.vue 把代码复制到这个页面
 - 在需要的此组件的文件下，比如APP.vue里
 ```
 import Carousel from './components/Carousel'
 export default {
   name: 'app',
   components: {  //components加s
     Carousel: Carousel
   }
 }
 ```
 - 在模板里载入组件
 ```
 <template>
 <div id="app">
   <Carousel></Carousel>
   <img src="./assets/logo.png">
   <router-view/>
 </div>
 </template>
 ```
 - 这样就可运行了
### 自定义组件
例如我想在加一个导航组件名字叫做`headerBar`,我在components里加一个文件叫做`headerBar.vue`：
```
<template>
  <h2>这是一个导航</h2>
</template>
```
使用：
在App.vue中需要先导入这个组件，再注册这个组件，最后使用它
```
<template>
<div id="app">
  <headerBar></headerBar>
  //以标签形式使用，注意：避免使用原生html的标签
  <img src="./assets/logo.png">
  <router-view/>
</div>
</template>

<script>
import headerBar from './components/headerBar.vue'  //导入组件
export default {
  name: 'app',
  components: {
    headerBar: headerBar  //注册组件
  }
}
```
### 前后端分离
习惯了用node做全栈开发,现在用vue-webpack做前端开发，node做后端开发也挺爽的，前后端实现了分离。
1. 启动后端接口
>cd back
>cnpm install
>npm run dev

2. 启动前端服务器
>cd front
>cnpm install
>npm start

3. 进入登录页面，点击登录，控制台打印访问成功的信息,并成功跳转到helloworld页面

### 前后端通信
1. vue-resource
 - 安装vue-resource 并在main.js中引用
  ```
  import VueResource from 'vue-resource'
  Vue.use(VueResource)
  ```
 - 在config/index.js 配置 proxyTable代理服务器
 ```
 proxyTable: {
   '/api/**': {
     target: 'http://localhost:3000',
     pathRewrite: {
       '^/api': '/api'
     }
   }
 }
 ```
 - 使用
 ```
 this.$http.get('api/apptest')
        .then((response) => {
          // 响应成功回调
          console.log(response)
        }).catch(e => {
              // 打印一下错误
          console.log(e)
        })
    }
 ```
 - 缺点：在开发环境下没有问题，但是在生产环境下请求后端接口不成功
2. axios
 - 首先配置axios,在src下新建一个http.js
 ```
import axios from ‘axios'
 axios.defaults.timeout = 5000
 axios.defaults.baseURL = 'http://localhost:3000'
 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
export default axios
 ```
 - 在main.js中引入
 ```
 import axios from './http'
 Vue.prototype.axios = axios
 new Vue({
   el: '#app',
   router,
   axios,
   template: '<App/>',
   components: { App }
 })
 ```
 - 使用
get方法
```
login () {
  // 获取已有账号密码
  this.axios.get('/apptest')
    .then((response) => {
      // 响应成功回调
      console.log(response)
      // this.$router.go({name: 'main'})// 不管用
      this.$router.push({name: 'HelloWorld'})
    }).catch(e => {
      // 打印一下错误
      console.log(e)
    })
}
```
post方法
```
register () {
  console.log(this)
  // 获取已有账号密码
  let params = {
    user: this.userinfo.account,
    password: this.userinfo.password,
    directionId: this.userinfo.directionId
  }
  this.axios.post('/signup', params)
    .then((response) => {
      // 响应成功回调
      console.log(response)
    }).catch(e => {
      // 打印一下错误
      console.log(e)
    })
}
```

### 生产环境路径问题
在生产环境下发现打包以后路径不对，修改config下的index.js
```
build: {
  // Template for index.html
  index: path.resolve(__dirname, '../dist/index.html'),

  // Paths
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: './',  //原来是 assetsPublicPath: '/'
```

## 遇到的问题
1. `vue.esm.js?dcc1:574 [Vue warn]: Do not use built-in or reserved HTML elements as component id: Header`
原因：因为header在HTML5里面是个原生的标签，所以在开发的时候会提示错误。    
解决方法：修改components里面左边的header名称