Vue入門乾貨，以及遇到的坑

1、安裝環境及Vue腳手架搭建

參考文檔：https://www.jianshu.com/p/1626b8643676

 

 

2、開發文檔

官方文檔：https://cn.vuejs.org/v2/guide/

 

 

 

3、第三方插件

官方推薦：https://github.com/vuejs/awesome-vue

 

 

 

4、HTTP Requests

一、vue-resource    安裝：npm install vue-resource  --save

二、axios            安裝： npm install axios --save

 

 

 

5、UI庫

一、Mint UI： http://mint-ui.github.io/#!/zh-cn      （餓了麼團隊）

二、iView：   https://www.iviewui.com/           （TalkingData）

三、Cube-ui： https://didi.github.io/cube-ui/#/zh-CN  （滴滴）

 

1-3 若是有html/Css javascript基礎看完基本上就能夠簡單上手vue的項目了

4-5 能夠在項目實際運用中考慮選擇哪一種方式

 

建立項目後如下幾點新手容易遇坑

1、路由

Router / index.js頁面，重定向和路由配置

 

export default new Router({
// mode:'history', //直觀效果就是地址欄能夠去除# 可是打包後會有BUG 具體百度即知
routes: [
{
path: '/',
redirect: '/HelloWorld'
},
{
path: '/HelloWorld',
name: 'HelloWorld',
component: HelloWorld
}
]
})

 

2、打包部署

資源打包後路徑問題（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教程視頻，有須要的朋友私信我。