vue項目中需注意的點（一）

時間 2019-11-24

標籤 vue 項目注意简体版

原文原文鏈接

1、vue-source【全局】配置須要注意的問題

Vue.http.options.emulateJSON = true; Vue.http.options.emulateHTTP = true;

1. emulateHTTP

emulateHTTP（布爾值）。默認值爲:false，設置值爲true時，PUT, PATCH和DELETE等請求會以普通的POST方法發出，而且HTTP頭信息的X-HTTP-Method-Override屬性會設置爲實際的HTTP方法。。javascript

2. emulateJSON

emulateJSON(布爾值)。默認值爲：false,設置值爲true時，數據（不管是get仍是post）都會以formdata（表單提交方式）的形式發送數據。因此咱們在給後臺傳遞參數的時候須要加JSON.stringify(參數)處理一下。
若是服務器沒法處理編碼爲application/json的請求，能夠啓用emulateJSON選項。啓用以後，請求會以application/x-www-form-urlencoded爲MIME type，就像普通的HTML表單同樣。css

2、正則轉義

Ps:需求在使用富文本編輯器（我使用的是Ueditor）時，傳到後臺數據須要對「雙引號」進行轉義html

str.replace(/\"/g,'\\"');//進行轉義而後轉給後臺 str.replace(/\\"/g,'"');//從後臺拿到的數據進行反轉義

3、混合開發中的異步部請求處理

混合開發中咱們會用到安卓或者ios同事提供的jsBridge，來調用原生事件。但咱們在請求後臺的接口中須要把「這個參數」傳遞過去，因此咱們就須要用異步處理。vue

import jsBridge from 'common/js/jsbridge'; // 引入jsBridge jsBridge.getHeader().then((data)=>{//成功處理函數},(err)=>{//失敗處理函數});//注意此處的「getHeader()」函數不必定和個人同樣名稱。這個是別小夥伴（安卓或IOS）定的

4、vue腳手架(vue-cli)生成項目渲染注意點

在用vue生成的項目中,，針對index.html、app.vue、main.js三者之間關係java

項目目錄

|----src |--App.vue |--main.js |----index.html

簡要說明

mian.js將項目的依賴關係（包括vue,vue-router,axios,mintui等等插件）引入，其中也包括App.vue（主要展現區）文件，渲染到index.html中。這其中有幾種配合方案千萬不要混淆，不然效果會出不來。ios

第一種寫法

index.html中：vue-router

<div id="app" style="width:100%;height: 100%;"></div>

main.js中：vue-cli

new Vue({ template:<App/>, components: {App} }).$mount('#app');

第二種寫法

index.html中：json

<div id="app" style="width:100%;height: 100%;"> <router-view></router-view> </div>

main.js中：axios

new Vue({
    components: {App}
}).$mount('#app');

第三種寫法

index.html中：

<div id="app" style="width:100%;height: 100%;"> <App></App> </div>

main.js中：

new Vue({
    components: {App}
}).$mount('#app');

第二種寫法文件內容

index.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>h5</title> </head> <body> <div id="app" style="width:100%;height: 100%;"> <router-view></router-view> </div> </body> </html>

mian.js

import Vue from 'vue'; import App from './App'; new Vue({ components: {App} }).$mount('#app');

App.vue

<template> <div class="app-wrapper"> <router-view></router-view> </div> </template> <script> export default {}; </script> <style lang='scss' rel="stylesheet/scss" type="text/css" scoped> .app-wrapper{ width:100%; height:100%; } </style>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。