vue项目补充点
1、安装样式库iview(示例安装)
运行命令:npm install --save iview(卸载为uninstall),--save因生产环境需要,
在main.js文件中加入配置
import Iview from 'iview'
import 'iview/dist/styles/iview.css'
Vue.use(Iview)
2、安装babel-polyfill(一般必须安装)
原因:Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、
Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。
特别注意:可以解决状态管理vuex在IE上的兼容性问题!!
运行命令:npm install --save-dev babel-polyfill,--save-dev因开发环境需要,
在main.js文件中加入配置
import 'babel-polyfill'
3、安装sass(如果在项目中用到了话)
运行命令:npm install --save-dev sass-loader,npm install --save-dev node-sass,
在build文件夹下的webpack.base.conf.js的rules里面添加配置:
{ test: /\.sass$/, loaders: ['style', 'css', 'sass'] }
4、HTTP拦截(带请求加载框)
首先安装axios,命令:npm install --save axios;
在src文件夹下创建utils文件夹,其中加入http.js文件,
在main.js添加代码import Http from './utils/http',Vue.prototype.$http = Http;
具体参考vueproject实战项目
https://github.com/BarryCC/vue-project-template
5、路由拦截(不确定):
在components创建404.vue文件,在router.js文件中引用,具体参考vueproject实战项目
https://github.com/BarryCC/vue-project-template
6、组件递归:
组件是可以通过name属性来在它们自己的模板中调用自身的。
eg:
name: 'stack-overflow',
template: '<div v-if='callSelf'><stack-overflow></stack-overflow></div>'
7、组件间循环引用:
在实际开发中,可能存在组件间的的循环引用,例如封装tree组件时,存在父子组件的相互引用,按普通引用方式会报错;
beforeCreate: function () {
this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue').default
}
Vue+iview系列:
1、iview中时间选择器的双向绑定问题解决方案:
@on-change="formValidate.releaseStartTime=$event"
:value = "formValidate.releaseStartTime"