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 UIhttp://mint-ui.github.io/#!/zh-cn      (饿了么团队)

2、iView:   https://www.iviewui.com/           TalkingData

3、Cube-uihttps://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教程视频,有需要的朋友私信我。

posted @ 2018-04-08 23:29  唐崇杨  阅读(553)  评论(1编辑  收藏  举报