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>