Vue入门干货,以及遇到的坑
一、安装环境及Vue脚手架搭建
参考文档:https://www.jianshu.com/p/1626b8643676
二、开发文档
官方文档:https://cn.vuejs.org/v2/guide/
三、第三方插件
官方推荐:https://github.com/vuejs/awesome-vue
四、HTTP Requests
1、vue-resource 安装:npm install vue-resource --save
2、axios 安装: npm install axios --save
五、UI库
1、Mint UI: http://mint-ui.github.io/#!/zh-cn (饿了么团队)
2、iView: https://www.iviewui.com/ (TalkingData)
3、Cube-ui: https://didi.github.io/cube-ui/#/zh-CN (滴滴)
1-3 如果有html/Css javascript基础看完基本上就可以简单上手vue的项目了
4-5 可以在项目实际运用中考虑选择哪种方式
创建项目后以下几点新手容易遇坑
一、路由
Router / index.js页面,重定向和路由配置
export default new Router({ // mode:'history', //直观效果就是地址栏可以去除# 但是打包后会有BUG 具体百度即知 routes: [ { path: '/', redirect: '/HelloWorld' }, { path: '/HelloWorld', name: 'HelloWorld', component: HelloWorld } ] })
二、打包部署
资源打包后路径问题(webpack npm run build方式)
config / index.js页面
host设置为0.0.0.0 可以以IP地址访问项目 默认localhost
build 下 assetsPublicPath : './' 加. 更换文件打包访问路径问题
build / utils.js 页面
if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath: '../../' //加入这行打包后index页面正常访问 }) } else { return ['vue-style-loader'].concat(loaders) }
原生js调用vue methods内钩子函数
window.Test = this.Test;
methods: {
Test() {
console.log(123);
}
}
window.Test(); //123
vue 全局初始化变量或者方法
//APP.vue主入口mounted函数里处理业务逻辑
export default {
name: 'App',
mounted () {
window.Test = 123;
}
}
//npm run build -- 去除.map文件
配置 config/index
productionSourceMap: false
还有整套vue教程视频,有需要的朋友私信我。