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教程视频，有需要的朋友私信我。