脚本

安装vue支持

npm install vue

创建项目

vue create my-project
# OR
vue ui

路径

• public
  存放一些公共的资源，比如图片，在引用的时候以/开始，例：
  在public下的logo.png：/logo.png

• src
  存放静态资源，一般js、css文件放在这里，在引用的时候以./开始，例：
  在src下的index.css：./index.css

指令

• v-once
  通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定

<span v-once>{{msg}}</span>

• v-html
  双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

• v-bind
  绑定html标签属性

<div v-bind:style="style">center</div>

var data = {
    style: 'text-align:center'
}

方法

• _.debounce
  _.debounce 是一个通过 Lodash 限制操作频率的函数。

• v-model

你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

组件

• component

• prop

传入数据到组件中

• babel
  参考文档

依赖

vue-router

• props传值

{
    path: '/contract/edit',
    name: 'contract-edit',
    component: ContractEdit,
    props: {
      title: '合同信息录入'
    }
}

vue-axios

element-ui

• 安装

npm i element-ui -S

• 引入

在 main.js 中写入以下内容：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

使用Axios

vue+element系统搭建：https://www.kancloud.cn/iiplay/vue-element

配置

vue.config.js

vue.config.js配置项：https://cli.vuejs.org/zh/config/#vue-config-js

webpack.config.js

其中vue.config.js中的devServer与webpack中的一样，可参考

webpack.config.js配置项：https://www.webpackjs.com/configuration/dev-server/

跨域

• vue.config.js

module.exports = {
  publicPath: '',
  devServer: {
    host: 'localhost',
    port: 9090,
    proxy: {
      '/api': {
        target: 'http://localhost:9000',
        changeOrigin: true
      }
    }
  }
}

• axios

请求地址不能加ip和端口，因为在配置里已经做过代理，如果再加上请无法请求到

axios.get('/api/person/list.json')
.then(response => {
  console.log(response)
})
.catch(err => {
  console.log('yiva ' + err)
})

命名规范