一、安装环境及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
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;
还有整套vue教程视频,有需要的朋友私信我。