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>
<tabTrigger>vue
</tabTrigger>
</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钩子
<transition
v-
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进行控制
