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