VueJS项目 - awesome-vue

vue-cli引用jquery, bootstrap, bootstrap-table

• 引用jquery
  找到vue-project/build/webpack.base.conf.js文件，在module.exports下添加plugins,
  需要在之前，引用webpack,

  var webpack = require('webpack');

  参考

  plugins: [new webpack.optimize.CommonsChunkPlugin('common.js'),new webpack.ProvidePlugin({jQuery: "jquery",$: "jquery"})] 

• 引用bootstrap
  在main.js中引用

  import ‘./assets/libs/bootstrap/css/bootstrap.min.css’
  import ‘./assets/libs/bootstrap/js/bootstrap.min’

  前提是你引用了jquery,不然会报错

  import $ from ‘jquery’

• 引用bootstrap-table

  • 未实现，后期学习 vuetable-2

vue生成dist目录不能运行

修改vue-project/config/index.js中的

    module.exports = {build: {assetsPublicPath: './'}

vue snippet for sublime text

<snippet><content><![CDATA[
<template>${1}
</template><script>export default {data () {return {}}
}
</script><style scoped></style>
]]></content><!-- Optional: Set a tabTrigger to define how to trigger the snippet --><tabTrigger>vue</tabTrigger><!-- Optional: Set a scope to limit where the snippet will trigger --><!-- <scope>Text.vue</scope> -->
</snippet>

vue引用font-awesome

[font-awesome官网](http://fontawesome.io/icons/)
相关文件解析时会报错，是否需要配置？
可以通过vue-cli来引用[vue-awesome](https://www.npmjs.com/package/vue-awesome)
```
import Vue from 'vue'/* Pick one way between the 2 following ways */// only import the icons you use to reduce bundle size 
import 'vue-awesome/icons/flag'// or import all icons if you don't care about bundle size 
import 'vue-awesome/icons'/* Register component with one of 2 methods */import Icon from 'vue-awesome/components/Icon'// globally (in your main .js file) 
Vue.component('icon', Icon)// or locally (in your component file) 
export default {components: {Icon}
}
```
在html中使用
```
<!-- basic -->
<icon name="beer"></icon><!-- with options -->
<icon name="refresh" scale="2" spin></icon>
<icon name="comment" flip="horizontal"></icon>
<icon name="code-fork" label="Forked Repository"></icon><!-- stacked icons -->
<icon label="No Photos"><icon name="camera"></icon><icon name="ban" scale="2" class="alert"></icon>
</icon>
```

link icon生成浏览器图标

<link rel="icon" href="/favicon.ico" type="image/x-icon" />

• vue-router生成路由
• vue下transition和javascript钩子
  css类：
  v-enter， v-enter-active， v-leave， v-leave-active
  javascript钩子

<transitionv-on:before-enter="beforeEnter"v-on:enter="enter"v-on:after-enter="afterEnter"v-on:enter-cancelled="enterCancelled"v-on:before-leave="beforeLeave"v-on:leave="leave"v-on:after-leave="afterLeave"v-on:leave-cancelled="leaveCancelled"
><!-- ... -->
</transition>

注意ES6风格的语法IE9不支持，以下是ES5语法：

methods: {// --------// 进入中// --------beforeEnter: function (el) {// ...},// 此回调函数是可选项的设置// 与 CSS 结合时使用enter: function (el, done) {// ...done()},afterEnter: function (el) {// ...},enterCancelled: function (el) {// ...},// --------// 离开时// --------beforeLeave: function (el) {// ...},// 此回调函数是可选项的设置// 与 CSS 结合时使用leave: function (el, done) {// ...done()},afterLeave: function (el) {// ...},// leaveCancelled 只用于 v-show 中leaveCancelled: function (el) {// ...}
}

IE9对于ES6不兼容

箭头函数不支持： () => {} 修改为： function() {}
省略函数字段不支持 created () {} 修改为： created: function(){}

vue-cli对于bootstrap-table适配性不好

v-for的item绑定到v-model会失效

<div id="editor"><input v-for="item in arr" v-model="item"/>
</div>

new Vue({el: '#editor',data: {input: '# hello',in1: '1',arr: ["in1", "in2", "in3", "in3"]}
})

无法通过item的值对于元素的model进行控制