vue單頁頁面開發教程及注意事項

以下圖：

 

1.安裝node.js webpack

node -v 查看版本

webpack -v

2.安裝腳手架 vue-cli

npm install -g vue-cli

3. 在項目文件夾建立項目（如上圖）

vue init webpack-simple zbsq( )

vue init webpack zbsq( ) npm install

4.npm run dev 啓動本地環境預覽頁面

5.npm run build 打包文件

 

常見問題：

1.打包把js打包在一個文件，防止白屏現象（隱藏掉如下內容，最終打包在一個app.js文件）

2.打包後js文件路徑不對修改這裏

3.手機預覽本地頁面（修改node.js域名）

我用的是vux起的一個項目（移動端，基於vue的），由於是移動端的，須要在手機上測試，發現用 http://localhost:8081/訪問的挺好的，可是換到ip就訪問不了，期初我覺得是代理的緣由，將電腦的代理給關掉了。仍是不行，而後改成127.0.0.1訪問，發現能夠訪問，用0.0.0.0訪問也能夠，就是ip不行。而後就各類google，百度。別人家的方法---都試了好多，發現沒效（有點懷疑人生，懷疑是否是我電腦的問題），可是結果就在這，ip就是不能夠訪問！！！！

      本着一個程序員的本能--不解決這個bug，誓不罷休的精神。我開始看本身的build文件， config文件。最終找到了根源----在config裏面的index.js裏面的module.exports下面的dev下面的host:'localhost' 改成 host:'0.0.0.0',就能夠訪問啦！！！而後開心愉快的開始碼代碼！！！！！！

（注意：這裏的ip地址最好用命令行查詢本機ip 命令行：ipconfig/all）

4.路由跳轉

this.$router.push('/drawPage?type='+typ+'&huodong='+huodon)

5.全局變量使用

（1）、存全局變量

vm.$store.commit('updateType',type)

vm.$store.commit('updateHuodong',huodong)

（2）、取全局變量使用

var typ = this.$store.state.type

var huodon = this.$store.state.huodong

（3）、全局變量文件

 

 

 補充版本（遇到的困難上述沒有的，可繼續看以下圖）