vue 转json_vue转json

vue打包之后的vendor文件会有两个版本的vue

routes

a.执行打包命令：npm run build

vue 转json_vue转json

b.打包之后生成的文件夹为根目录下的dist文件：

c.进入dist中

在运行这个index.html之前先说说一些打包配置问题：

在config文件夹下可以看到一个index.js文件，打开其中可以看到有几个属性分别是：

assetsRoot: path.resolve(__dirname, '../dist')//其实这个就是刚才打包后的根目录文件夹dist,所有的文件都会输出到这里

assetsSubDirectory: 'static' //默认是把css,fonts,images,js输出到这个文件夹下，但是我的改成了 assetsSubDirectory: '' 所以上图就直接输出到dist下了，即这个参数配置的是静态文件的输出目录

在index.document . title = to . meta . web_titlehtml文件中可以看到每个js,css文件的引用路径，在上运行时如果发生找不到文件如下图

大多数情况下都是参数配置问题，可以根据index.html文件下的路径进行测试进行解决，如果不行可以留言一起交流。

Vue3+elemetPlus支持动态路由和菜单管理UI框架

web_title: route_data [ index ]. meta . web_title //网站标题

内容较多请耐心阅读，你认真读完一定获益匪浅

这是一个基于vuecli+element-plus共同搭建的一个开源vue3动态路由和动态菜单开源框架，总体来说这个项目是非常。你通过使用它直接实现动态路由和菜单管理功能，实现快速开发。支持二级菜单管理和嵌套路由管理。

"element-plus": "^1.0.2-beta.70",

"vue": "^3.0.0",

"vue-router": "^4.0.0-0"

1、unituicli3是一个基于vue3搭建的一个项目，它是 与时俱进 的， 极具时代性，紧跟vue3的脚步 。

2、项目仅仅集成了element-plus和vue-router两个必备的JaScript库，除此之外没有再集成任何JaScript库。这也就意味着你可以根据自己的项目需要去安装自己需要的JaScript库， 避免因为项目集成库过多给你带来烦恼 。

3、强劲的组件管理器，我们为了帮助你实现可视化管理动态路由和菜单，我们内置了《组件管理》功能组件，使 路由和菜单管理可视化 。同时我们为了更好地实现项目管理，在vue2版本的基础上新增了可选json导出功能，让你可以快速实现json数据生成，生成用户权限路由和菜单。

4、美丽的视图框架，我们 内置了一个后台管理UI框架 ，你可以通过使用它实现admin项目的快速生成和搭建。当然你也可以自己搭建自己喜欢的UI框架结构。

5、 更少的干扰 。为了让项目更加纯净，将项目控制权更多的交给开发者，我们新建了unitui文件夹位于src文件夹下用于存放我们内置的部分，为了便于你项目的启动和理解你可以直接将ivews和components文件夹内容清空，重新搭建你的组件，因为这些目录下的文件这些并不重要。

Unituicli3因为《组件管理》而显得强大，因为这是 核心组件 ，将动态路由（添加、删除、修改）、嵌套路由和菜单管理（添加、删除、修改）变得可视化，而且支持json数据生成使前后端间交互变得可能，你只需要将生成的json储存在数据库便可实现权限编辑。

我们虽然尽力减少对开发者的影响，但是做出一些修改是不可避免的。

import { createApp } from 'vue'

import ElementPlus from 'element-plus';

import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)

app.use(router).mount('#app')

// 注册全局组件

import Uicon from './unitui/sub/Uicon.vue'

appponent('Uicon',Uicon)

你如果不是使用elementPlus作为你的UI你可以参考上面内容做出适当修改

这是一个全局注册的图标选择器，你可以在任意组件通过 使用图标选择器，它挂载在main.js文件中，你如不是使用element你需要做出修改，否则可能 影响图标选择的功能使用 。

实际效果

这是一个非常重要的内置组件，它主要用于模拟登录时的作和信息生成，它会读取位于assets/json/文件夹下的两个json生成菜单和路由信息，json内容模拟后端返回的内容。

其中最重要的是路由的生成，你在登录后路由json信息返回后调用init_route方法，代码如下：

init_route(route_data) {

const init_route_data = []; //定义一个路由数组储存生成的路由信息

for (let index = 0; index < route_data.length; index++) {

//循环

//有children时生成路由数组方法

init_route_data[index] = {

path: route_data[index].path, //路由

name: route_data[index].name, //路由名

component: () => import(`@/${route_data[index]ponent}`),

// component: (resolve) => require([`@/views/${route_data[index]ponent}`], resolve), //加载后端json描述的vue文件

meta: {

//路由一些附加信息

show_site: //是否全屏显示

web_title: //网站标题

chilerror: function(xhr, type){dren: [] //嵌套路由

};

for (let i = 0; i < route_data[index].children.length; i++) {

init_route_data[index].children[i] = {

path: route_data[index].children[i].path, //路由

name: route_data[index].children[i].name, //路由名

component: () => import(`@/${route_data[index].children[i]ponent}`),

// component:(resolve) => require([`@/views/${route_data[index].children[i]ponent}`], resolve), //加载后端json描述的vue文件

meta: {

//路由一些附加信息

web_title: //网站标题

}};

}} else {

//没有children时生成路由数组方法

init_route_data[index] = {

path: route_data[index].path, //路由

name: route_data[index].name, //路由名

component: () => import(`@/${route_data[index]ponent}`),

// component:(resolve) => require([`@/views/${route_data[index]ponent}`], resolve), //加载后端json描述的vue文件

meta: {

show_site: //是否全屏显示

web_title: //网站标题

}};

// console.log(index);

// console.log(init_route_data); //打印生成初始化路由数组

for (let index = 0; index < route_data.length; index++) {

//由于addRoutes已经废弃，所以需要循环使用addRoute进行数组添加

this.$router.addRoute(init_route_data[index]); //循环添加数组

}this.init_menu(); //执行菜单生成方法

其他三个你可以随意修改

init_route.js内容：

import router from '@/router'

function init_route() {

if (sessionStorage.getItem("route_data") != null) {

const route_data = JSON.parse(sessionStorage.getItem("route_data"));

// console.log(route_data);

const init_route_data = []; //定义一个路由数组储存生成的路由信息

for (let index = 0; index < route_data.length; index++) {

//循环

//有children时生成路由数组方法

init_route_data[index] = {

path: route_data[index].path, //路由

name: route_data[index].name, //路由名

component: () => import(`@/${route_data[index]ponent}`),

// component: (resolve) => require([`@/views/${route_data[index]ponent}`], resolve), //加载后端json描述的vue文件

meta: {

//路由一些附加信息

show_site: //是否全屏显示

web_title: //网站标题

children: [] //嵌套路由

};

for (let i = 0; i < route_data[index].children.length; i++) {

init_route_data[index].children[i] = {

path: route_data[index].children[i].path, //路由

name: route_data[index].children[i].name, //路由名

component: () =>

// component:(resolve) => require([`@/views/${route_data[index].children[i]ponent}`], resolve), //加载后端json描述的vue文件

meta: {

//路由一些附加信息

web_title: //网站标题

}};

}} else {

//没有children时生成路由数组方法

init_route_data[index] = {

path: route_data[index].path, //路由

name: route_data[index].name, //路由名

component: () => import(`@/${route_data[index]ponent}`),

// component:(resolve) => require([`@/views/${route_data[index]ponent}`], resolve), //加载后端json描述的vue文件

meta: {

show_site: //是否全屏显示

web_title: //网站标题

}};

// console.log(index);

// console.log(init_route_data); //打印生成初始化路由数组

for (let index = 0; index < route_data.length; index++) {

//由于addRoutes已经废弃，所以需要循环使用addRoute进行数组添加

router.addRoute(init_route_data[index]); //循环添加数组

}// 这里放置刷新

// console.log('app');

// const index=window.location.href.lastIndexOf("#")

// const =window.location.href.substring(index+1,window.location.href.length);

// this.$router.push()

init_route()

此时便可完成刷新自动初始化

App.vue源码：

1、如果你不喜欢我们的ui框架，你需要开发新的ui时，没有ui框架的支持《组件管理》功能可能不能正常显示（显示空白），你可以将unitui/ subadmin/ SubAdmin.vue文件中style部分改为：

width: ;

/ 非ui框架将height写为height: 100vh; /

height: 100vh;

background-size: cover;

ition: relative;

background-color: #ffffff;

border-radius: 10px;

}1、没能尽可能减少对框架的干扰，你仍然需要保持对main.js的适当修改。

从零开始的vue后台管理-连接数据库

首先现在vue项目里面找到config这个文件，配置里面的index.js

然后再配置生产环境的参数，也就是dev.env.js

在prod.env.js里面配置

给config/index.js里面的内容做个注释show_site: //是否全屏显示

我在src里面创建了一个文件夹axios，api.js是我封装axios方法的文件，globalData.js是存放后台接口的文件。

在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的库，可运行在浏览器端和node.js中。他有很多的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以vue也是果断放弃了对其库vue-resource的维护，直接我们使用axios库。

globalDat菜单管理a.js

然后是最重要的引用（important）

import api from '@/axios/api.js'

import gd from '@/axios/globalData.js'

config/index里面host: 'localhost', 需要注意，否则运行会underfind

vue项目实现动态路由和动态菜单搭建插件式开发框架免费源码

},import(`@/${route_data[index].children[i]ponent}`),

以往我们在开发vue项目的时候，总是通过将路径和路由写在route/index.js文件中，然后直接进行访问即可，一般实现权限匹配都是通过菜单下面的权限参数和路由守卫进行一个验证拦截和权限匹配，然而这样安全性仍然不足。因为我们在route/index.js中已经写满了所有的路由，这样子不仅造成静态路由内容过多、修改困难，同时当静态路由内容过多的时候，我们在路由中的内容就显得极其复杂。

而后端对前端的控制也显得较为无力，无法实现严格性的控制。

我们只需要将写好的组件放置到我们的view视图下，然后我们通过动态的路由和菜单实现路由添加和菜单进行匹配，我们便可实现对插件进行访问，我们减少了对route/index.js内容写入，同时也有利于减少内存的占用。

我们通过动态路由的形式，我们生成的菜单权限更加的完善，不仅实现依靠菜单与路由守卫拦截实现鉴权，也可以通过动态路由实现动态加载vue文件，控制更加深度

我们通过动态路由的形式，我们可以将项目分给不同的人进行完成，便于组建一个开发团队，因为他们所开发的组件，我们只需要在具备基本的jascript库的情况下。我们直接进行动态路由的一个挂载和菜单生成便可完成项目合作，减少了对route/index.js文件的作，保证项目的完整性。

我发现在非node环境的开发条件下，我们可以实现远程的vue文件加载，这不仅为我们开发提供了便利，同时也有利于我们及时修改文件，以达到项目的需求，更有利于保障安全，实现vue文件加载。

Vue：2.6.11。

Vue-route：3.2.0。

主页

聊天

通过后端返回的一个路由json数据，我们通过前端生成符合路由路由静态内容数组的一个数组，然后再通过addRoute进行一个循环添加，我们以此生成动态路由。在登陆时获取后端返回的菜单信息，我们进行菜单的一个循环生成，由此我们的一个动态项目就已经完成。

第二怎样对动态路由和菜单项目进行一个管理。

我们首先可以通过搭建一个组件通过添加路由信息和管理菜单实现二者的动态匹配。我们只需要对路由信息进行一个添加和修改，并和菜单相互间进行匹配，我们便可实现简单的路由挂载。

组件管理

此时将数据提交的后端由后端进行数据保存，我们此时的组件只需要放在views文件夹下，添加路由进行文件加载，我们便可实现路由管理。

登陆页面配置。

我们需要在静态文件夹下创建一个menu.json和route.json。两个json文件模拟登录时返回的数据。

我们在登录页面模拟获取数据之后，我们通过菜单的一个方法进行生成菜单，通过路由的方法生成路由数组并进行循环添加，然后执行路由跳转。

第二配置路由初始化内容。我们将route/index.js的路由信息填为空是非常不理智的，而且会报错，因为路由初始化在加载前已经完成。有些页面完全不需要权限便可访问，比如登录、注册、找回密码和404错误，这种不需要权限的页面，我们还是需要将其直接以静态的形式写在route/index.js文件中。

Index初始数据

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue . use ( VueRouter )

const routes = [{

path: '/' , //访问

name: 'login' , //路由名称

component : () => import ( '@/unitui/pages/Login.vue' ), //加载模板文件

meta: {

web_title: "登录" //网站标题

}},

{path: '/register' , //访问

name: 'register' , //路由名称

component : () => import ( '@/unitui/pages/Register.vue' ), //加载模板文件

meta: {

web_title: "注册" //网站标题

}},

{path: '/forget' , //访问

name: 'forget' , //路由名称

component : () => import ( '@/unitui/pages/Forget.vue' ), //加载模板文件

meta: {

web_title: "找回密码" //网站标题

}},

name: '404' , //路由名称

component : () => import ( '@/unitui/pages/404.vue' ), //加载模板文件

meta: {

web_title: "404错误" //网站标题

}},

]const router = new VueRouter ({

})

router . beforeEach (( to , from , next ) => {

console . log ( to );

next ()

})

export default router

第三，关于防止刷新后丢失的问题。我们需要在app.vue文件中的mods方法中定义一个路由生成方法。

示例：

init_route () { //初始化路由，防止刷新丢失

if ( sessionStorage . getItem ( "route_data" ) != null ) { //只有后端已经返回数据的情况下才允许生成

const route_data = JSON . parse ( sessionStorage . getItem ( "route_data" )); //获取路由信息

const data = []; //默认路由数组

for ( let index = 0 ; index < route_data . length ; index ++) { //生成路由信息

data [ index ] = {

path: route_data [ index ]. path , //访问

name: route_data [ index ]. name , //路由名称

component : resolve =>

require ([ `@/views/ ${ route_data [ index ]. component } ` ], resolve ), //加载模板文件

meta: {

show_site: route_data [ index ]. meta . show_site , //是否全屏显示

}};

}for ( let index = 0 ; index < data . length ; index ++) { //循环添加路由

this . $router . addRoute ( data [ index ]);

}在mounted中进行方法调用，防止刷新的时路由丢失，导致发生错误。该方法内容基本和登陆页面的菜单出路由初始内容基本相同，但我们别的是，我们需要判断登陆所获取的路由信息是否存在，只有在存在的时候及后端已经返回了路由信息，即证明登录成功的时候，我们才会动态添加路由。

在刷新之后，默认跳转到path:’’的一个路由界面中去，此时我们解决方法只需要将path:’’路由进行一个删除,将其删除就变可正常访问。

第二动态路由跳转时发生Cannot find module xxx错误。

意思是无法加载我们指定的一个vue文件，这是由于route3.0版本后import方式不支持传入变量，此时我们只需要将其改为require方式便可。

我们此次动态vue项目开发已经基本完成，我的开发的项目是基于element-ui进行，那么如果你需要源码参考。可以私信回复unit便可获取。

qianKun + VUE 实现微前端架构 (基于vue2实现)

vue3可以和python后端通过发送请求来进行交互。

创建两个项目作为实现demo，一个为主应用，一个为子应用

3.配置函数文件 microAppSroot: true,etting

4.微应用出口文件 index.js

5.在App.vue内配置微应用容器及跳转菜单

6.在main.js文件内引入微应用出口文件 index.js

7.运行后展示

8.在配置完子应用后的主应用展示

点击子应用菜单

1.修改子应用路由文件内路由实例属性： base 为 "/child"

2.在main.js文件内导出生命周期钩子

3.配置Webpack、跨域与端口号

在vue.config.js内添加：

4.运行后展示

package.json

怎样在vue中使用ts（详细教程）

//依据后端返回的json数据生成路由

本篇文章主要介绍了如何在vue中使用ts的示例代码，现在分享给大家，也给大家做个参考。

本文介绍了如何在vue中使用ts的示例代码，分享给大家，具体如下：

注意：此文并不是把vue改为全部替换为ts，而是可以在原来的项目中植入ts文件，目前只是实践阶段，向ts转化过程中的过渡。

ts有什么用？

类型检查、直接编译到原生js、引入新的语法糖

为什么用ts？

TypeScript的设计目的应该是解决JaScript的“痛点”：弱类型和没有命名空间，导致很难模块化，不适合开发大型程序。另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程。

typescript不仅可以约束我们的编码习惯，还能起到注释的作用，当我们看到一函数后我//循环后端返回的json们立马就能知道这个函数的用法，需要传什么值，返回值是什么类型一目了然，对大型项目的维护性有很大的提升。也不至于使开发者搬起石头砸自己的脚。

Angular: 我们为什么选择TypeScript?

TypeScript 是 JaScript 的超集

TypeScript 使得抽象清晰可见

TypeScript 使代码更容易阅读和理解

是的，我知道这看起来并不直观。让我用一个例子来说明我的意思。让我们来看看这个函数jQuery.ajax()。我们能从它的签名中得到什么信息?

我们能确定的是这个函数有两个参数。我们可以猜测这些类型。也许个是字符串，第二个是配置对象。但这只是猜测，我们可能错了。我们不知道什么选项进入设置对象(它们的名称和类型)，或者该函数返回什么。

在不检查源代码或文档的情况下，我们不可能调用这个函数。检查源代码并不是一个好的选择——拥有函数和类的目的，是在不知道如何实现它们的情况下使用它们。换句话说，我们应该依赖于他们的接口，而不是他们的实现。我们可以检查文档，但这并不是的开发经验——它需要额外的时间，而且文档经常过期。

因此，尽管很容易阅读jQuery.ajax(,settings)，真正理解如何调用这个函数，我们需要阅读它的实现或它的文档。

以下是一个类型版本：

它给了我们更多的信息。

这个函数的个参数是一个字符串。

设置参数是可选的。我们可以看到所有可以传递到函数中的选项，不仅是它们的名称，还包括它们的类型。

函数返回一个JQueryXHR对象，我们可以看到它的属性和函数。

类型化签名肯定比未类型化的签名长，但是:string，:JQueryAjaxSettings和JQueryXHR并不是混乱的。 它们是提高代码的可理解性的重要文档。我们可以更深入地理解代码，而不必深入到实现或读取文档中。 我的个人经验是，我可以更快地阅读类型化代码，因为类型提供了更多的上下文来理解代码。

摘自 Angular: 我们为什么选择TypeScript?

ts好学吗？

TypeScript的一个设计亮点就是它并没有抛弃JaScript的语法另起炉灶，而是做成了JaScript的超集（这个功劳应该记在Anders上），这样任何合法的JaScript的语句在TypeScript下都是合法的，也就是说学习成本很低，如果你对JaScript有比较深入的了解，那么其实可以很快的上手TypeScript，因为它的设计都是针对JaScript的使用习惯和惯例。

一些简单的例子，一看即懂：

基础类型

接口

类型检查器会查看printLabel的调用。 printLabel有一个参数，并要求这个对象参数有一个名为label类型为string的属性。 需要注意的是，我们传入的对象参数实际上会包含很多属性，但是编译器只会检查那些必需的属性是否存在，并且其类型是否匹配。

当然还有一些高级的用法，这里就不做过多的介绍了，了解更多

如何在vue项目中应用ts？

1、首先安装ts

npm install --se-dev typescript npm install --se-dev ts-loader2、在根目录建tsconfig.json文件

3、在配置中添加 ts-loader

4、把 .ts 后缀添加上就OK了，在webpack.base.conf.js文件下

现在就可以在我们原本的项目中使用ts文件了。

如何实践？

1、如何在js中引用ts文件？

由于js文件没有类型检测，当我们把ts文件引入的时候，ts文件会转化成js文件，所以在js文件中引用ts文件的方法类型检测机制不会生效。也就是说只有在ts文件内才会有类型检测机制。

那么怎么在js文件中使用类型检测机制呢？小编自己封装了一套typeCheck的decorator方法，仅供参考！用法如下：

检测deleteItem方法参数： 为object类型，index为number类型，如果类型不匹配将会抛出异常

部分代码献上：

ts的类型检测配合typeCheck基本上已经满足了我们的需要。

2、如何在ts中引用js文件？

由于js文件中没有类型检测，所以ts文件引入js文件时会转化为any类型，当然我们也可以在 .d.ts文件中声明类型。

如 global.d.ts 文件

当然有的时候我们需要使用一些库，然而并没有声明文件，那么我们在ts文件中引用的时候就会是undefined。这个时候我们应该怎么做？

比如我想要在util.ts文件中用 ‘query-string'的时候我们就会这样引用：

然而当你打印querystring 的时候是undefined。如何解决呢？小编的方法也仅供参考

新建module.js文件

utile.ts 文件

解决了。打印qs不再是undefined，可以正常使用qs库了哦。

至此本文就将ts在vue中的配置介绍结束，此文只代表个人看法，考虑到项目的扩展性，所以没有全部替换成ts，只是尝试性在vue中引入ts，还有很多需要改进的地方，如果有更好的建议和意见可以联系我！

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

JS实现将链接生成二维码并转为的方法

基于vue1和vue2获取dom元素的方法

nodejs+mongodb aggregate级联查询作示例

用vscode开发vue，有很多报红，实际上没有错误，可以正常启动？

alert('Ajax error!')

这种情况通常是因为VSCode的插件或者配置不正确，导致对Vue项目的语法检查有误。请尝试以下步骤来解决这个问题：

$("[name=test]").each(function () {

确保你已经安装了Vetur插件。这是一个很受欢迎的Vue开发插件，可以支持Vue语法高亮、智能提示、代码补全等功能。在VSCode中，点击左侧的插件图标，搜索“Vetur”，然后安装它。

如果你已经安装了其他的Vue插件，请尝试禁用它们，以避免插件之间的冲突。

确保你的项目中包含一个.eslintrc.js或者.eslintrc.json文件，用于配置ESLint的规则。在这个文件中，你可以添加以下内容来配置Vue的规则：

module.exports = {

env: {

node: true,

extends: [

'plugin:vue/vue3-essential',

'eslint:recommended',

],

parserOptions: {

parser: 'babel-eslint',

rules: {

'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',

'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',

};

确保你的项目中有一个.vscode文件夹，其中包含一个settings.json文件。如果没有，请创建一个。在settings.json文件中，添加以下内容，以便让VSCode使用Vetur和ESLint插件：

{"eslint.validate": [

"jascript",

"jascriptreact",

{"language": "vue",

"autoFix": true

}],

"vetur.validation.template": true,

"vetur.validation.script": true,

"vetur.validation.style": true

}保存所有更改，然后重启VSCode。

经过以上步骤，VSCode应该能正确识别Vue项目中的语法，红线问题也应该得到解决。如果问题仍然存在，请检查你的项目依赖是否正确安装，以及配置文件是否设置正确。

vue 如何实现跨域

跨域问题是因为浏览器的同源策略引起的，一种浏览器的安全机制，要求 协议，域名，端口 ，都要一致！

出于浏览器的同源策略限制，浏览器会拒绝跨域请求。

什么叫跨域？非同源请求，均为跨域。名词解释：同源 —— 如果两个页面拥有相同的协议（protocol），端口（port）和主机（host），那么这两个页面就属于同一个源（origin）。

怎么解决跨域？最常用的三种方式： JSONP、CORS、tMessage 。

jsonp，只支持get，不支持t，需要调用前端和被调用后端配合（比较常用）

后端Http进行转发，两次请求，效率低，安全（类似Nginx反向）

服务端设置响应头，允许跨域，适于小公司快速解决问题

Nginx搭建API接口

Zu}}ul搭建API接口

后四种都属于服务端设置，对于目前还是一个纯前端的我来说，先把前端的搞懂再说，所以在此只说前端

jsonp工作原理理解

jsonp实际上是通过动态插入js的方式实现的跨域，因为通过script标签引入js文件没有跨域一说

web客户端通过调用脚本的方式去调用跨域服务端动态生成的js文件（一般以json为后缀），同时传递一个callback参数给服务端，服务端以这个参数名为函数名，调用此函数以参数的形式将数据传到web端，这样就实现了前端跨域请求服务端数据。

【JSONP的优缺点】

优点：兼容性好（兼容低版本IE）

缺点：1.JSONP只支持GET请求； 2.XMLHttpRequest相对于JSONP有着更好的错误处理机制

CORS ：是W3C 的一种新的方案，能使支持 XMLHttpRequest 的跨域请求。CORS 实现起来非常方便，只需要增加一些 HTTP 头，让能声明允许的访问来源。

tassetsPublicPath: '/' 这个就是静态文件的引用前缀Message : window.tMessage(message,targetOrigin) 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持 window.tMessage方法。

vuejs和jquery可以混着用吗

}}

1、Vue 的是不建议直接作 DOM 的，Vue 的用途在于视图和数据的绑定。如果通过JQuery 直接作 DOM 的话，势必会造成视图数据和模型数据的不匹配，这样 Vue 就失去它存在的意义了；

#sub_admin_back {

2、JQuery 和 VueJS 合理使用并不会造成冲突，因为他们的侧重点不同，VueJS 侧重数据绑定和视图组件，JQuery 侧重异步请求和动画效果。如果使用JQuery + VueJS 开发，一定要在 Vue 渲染完所有的 HTML组件之后再通过 JQuery 处理，而使用 JQuery 时应避免直接作 DOM ，但是应用动画是允许的；

3、JQuery 与 VueJS 相互配合可以非常高效的完成异步任务，首先通过 JQuery 发出 Ajax 请求，接受到服务端传递的 JSON 数据后，再通过 Vue 将数据绑定到组件上，由 JQuery 进行动画处理，整个过程就如行云流水般自然；

4、说句题外话，Vue 的目的不是取代 JQuery，它是为了解决前后端分离而出现的。如果没有数据变化，只是单纯的样式变化，则没有必要去大费周章进行视图模型的绑定，并且还不利于 SEO 优化。