这几天在学习vue，就想给我的毕设改善一下，使用vue改写邀请管理员界面，涉及到很多复杂的DOM操作，jquery很难执行，如图：
结果展示图
我从vue-multiselect用到了vue-select，从vue-tagsinput用到vue-input-tag到vue-tagger再到vue-tagsinput，从Browserify用到了Webpack，把vue组件文档看了好几遍，终于做出来了！历时3天！
各种坑
可以跳过，直接看下面的正确解题方法
最开始使用Vue-multiselect，npm安装后，只有一个lib目录，这也是我怀疑此包不能使用的原因，根据官方文档，需要使用：
import Multiselect from 'vue-multiselect'
但是查了一下，chrome不支持此语法，所以借助babel转换为es5：Babel在线转换es6
然而，将下面的js（官方文档）转换后：
并不能在浏览器中使用，因为其中含有require()语句，这是node语法，需要commonJs环境，然后找到Browserify ，可以转换js在浏览器中使用，但是转换过程中报错
Error: Cannot find module 'vueify' from '/home/lyndon/work/FormReview/public/node_modules/vue-multiselect'
没有安装vueify，查了一下：
https://github.com/vuejs/vueify/issues/93
If I then install vueify with --legacy-bundling it works fine.
$ npm install --legacy-bundling vueify
- balanced-match...
$ ./node_modules/.bin/browserify -t vueify -o app.js main.js; echo $?
0
又报错：
Error: Cannot find module 'babelify' from '/home/lyndon/work/FormReview/public/node_modules/vue-multiselect'
接着又安装了：
"devDependencies": {
"babel-cli": "~6.24.1",
"babel-core": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-runtime": "^6.23.0",
"babelify": "^7.3.0",
"browserify": "^14.3.0",
"vueify": "^9.4.1"
},
./node_modules/.bin/browserify -t vueify -e assets/js/invite.js -o assets/js/build/invite.js
这些乱七八糟的库，这下终于转换成功了，但是，使用此js，浏览器还是报错了。
然后，按照vueify上面所说，写了
demo.vue:
invite.js:
var Vue = require('vue');
var App = require('./demo.vue');
var vm = new Vue({
el: '#vm-form',
render: function (createElement) {
return createElement(App)
},
...
继续转换编译，成功，然后刷新浏览器，这下好了，浏览器报了一大堆错误
永不言弃
学习vue组件和webpack：
单文件组件
webpack-simple
webpack使用
使用vue-cli脚手架
在webpack-simple示例项目中修改，加入vue-multiselect，编译后各种错误，改成Vue-select，成功运行！哈哈哈！
使用npm run build编译出js文件！
在组件中使用vue-resource一直报错，最后使用axios：
// invite.vue:
import axios from 'axios';
axios.get('/web/admin/getOwnForms')...
'change-input': {
created: function () {
window.inp = this;
},
props: ['condition'],
render: function (createElement) {
var self = this
console.log(this.condition);
if (this.condition.field != null && ['checkbox-group', 'radio-group', 'select'].indexOf(this.condition.field.type) != -1) {
return createElement(
'v-select',
{
multiple,
attrs: {
'v-model': "condition.value",
':options': "condition.field.values"
},
domProps: {
value: self.condition.value
},
on: {
input: function (event) {
self.condition.value = event.target.value
}
}
}
);
} else {
//'根据表单控件动态变换后面的填写域，但是实际不会跟着改变。故采用动态组件。
但是又有问了，一开始conditions为计算属性，根据add_condition改变而改变，watch这个conditions只有第一次有用，改成深度监听也不行，改变策略，将conditions改为正常属性，watch add_condition和conditions，这下点加号conditions增加一个object，页面也跟着变化了。
正确解题方法
- 安装webpack环境：
- 可以根据webpack-simple安装方法，使用vue-cli安装。
- 也可以直接运行npm init生成package.json文件，改写该文件，加入webpack，然后运行npm install，如果根目录没有.babelrc文件，必须加上：
.babelrc：
{
"presets": [
["latest", {
"es2015": { "modules": false }
}]
]
}
webpack.config.js：
module.exports = {
//输入路径
entry: './assets/js/src/invite.js',
//输出路径
output: {
path: path.resolve(__dirname, './assets/js'),
publicPath: '/assets/js/',
filename: 'invite.js'
},
...
主要文件：
invite.js:
import Vue from 'vue'
import App from './invite.vue'
new Vue({
el: '#app',
render: h => h(App)
});
invite.vue:
invite.blade.php
@extends('layouts.app')
@section('content')
邀请管理员
@endsection
@section('js')
@endsection