TOMMYHU

首先要知道export，import ，export default是什么
ES6模块主要有两个功能：export和import
export用于对外输出本模块（一个文件可以理解为一个模块）变量的接口
import用于在一个模块中加载另一个含有export接口的模块。
也就是说使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文件）。这几个都是ES6的语法。

export和import（一个导出一个导入）
一个a.js文件有如下代码：

export var name="李四";
在其它文件里引用如下：

import { name } from "/.a.js" //路径根据你的实际情况填写 export default {   data () {     return { }   },   created:function(){     alert(name)//可以弹出来“李四”   } }
上面的例子是导出单个变量的写法，如果是导出多个变量就应该按照下边的方法，用大括号包裹着需要导出的变量：
var name1="李四"; var name2="张三"; export { name1 ,name2 }
在其他文件里引用如下：

import { name1 , name2 } from "/.a.js" //路径根据你的实际情况填写 export default {   data () {     return { }   },   created:function(){     alert(name1)//可以弹出来“李四”     alert(name2)//可以弹出来“张三”   } }
如果导出的是个函数呢，那应该怎么用呢,其实一样，如下
function add(x,y){    alert(x*y)   //  想一想如果这里是个返回值比如： return x-y，下边的函数怎么引用 } export { add }
在其他文件里引用如下：

复制代码
import { add } from "/.a.js" //路径根据你的实际情况填写
export default {
  data () {
    return { }
  },
  created:function(){
   add(4,6) //弹出来24
  }
}
[/codes]
export与export default
看完上面这几个例子，想必你一定了解了如何使用export，import,如果还是不懂可以自己动手试一试。上面讲的是export和import，但是export跟export default 有什么区别呢？如下：

1、export与export default均可用于导出常量、函数、文件、模块等
2、你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用
3、在一个文件或模块中，export、import可以有多个，export default仅有一个
4、通过export方式导出，在导入时要加{ }，export default则不需要

这样来说其实很多时候export与export default可以实现同样的目的，只是用法有些区别。注意第四条，通过export方式导出，在导入时要加{ }，export default则不需要。使用export default命令，为模块指定默认输出，这样就不需要知道所要加载模块的变量名。

var name="李四"; export { name } //import { name } from "/.a.js" 可以写成： var name="李四"; export default name //import name from "/.a.js" 这里name不需要大括号


再看第3条，在一个文件或模块中，export、import可以有多个，export default仅有一个，也就是说如下代码：
var name1="李四"; var name2="张三"; export { name1 ,name2 }

也可以写成如下，也是可以的，import跟他类似。
var name1="李四"; var name2="张三"; export name1; export name2;

一个人如果不想输，就要不断学好眼前的东西，它们将来都会大有用处…

Vue的报错：Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

刚刚运行一下以前的一个Vue+webpack的demo，运行之后没有出现想象中的效果，并且报错

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#

1、浏览器限制

2、跨域（域名，端口不一样都是跨域）

3、XHR（XMLHttpRequest请求）

同时满足三个条件才有可能产生跨域问题。

解决跨域问题方案。

1，从浏览器出发，允许浏览器跨域。

2，从XHR（XMLHttpRequest）出发

    （1）避免发生跨域。使用jsonp，由于jsonp请求是通过script的方式发送的（只有xhr的请求方式才有可能产生跨域问题），所以不会产生跨域问题。Spring MVC实现过程：前台使用ajax的get请求，将dataType设为“jsonp”；服务器创建一个类并继承抽象类AbstractJsonReponseBodyAdvice,最后注解@ControllerAdivece。使用jsonp的弊端，只能使用get方式请求，服务器需要改动代码，发送的不是xhr请求。

    （2）产生跨域后解决。

            从被调用方考虑，有三种情况，分别是服务器实现，nginx配置和apache配置。

            服务器实现需要注意两种情况，简单请求和非简单请求。简单请求是先执行请求再验证，非简单请求是先验证再请求。

          简单请求（比较常见）：方法为get，head，post,请求header里面没有自定义头，Content-Type的值为以下几种 text/plain,multipart/form-data,application/x-www-form-urlencoded。

            非简单请求（比较常见）：put,delect方法的ajax请求，发送json格式的ajax请求，带自定义头的ajax请求。

            简单请求处理方案：在响应头中添加

                Access-Control-Allow-Origin=“允许跨域的url”，即跨省域时，请求头Origin的值，所以一般是获取Origin的值。

                Access-Control-Allow-Method=“*”，允许的方法。

            非简单请求处理方案：在相应头中添加

                Access-Control-Allow-Origin=“允许跨域的url”，即跨域时，可以获取请求头Origin的值。

                Access-Control-Allow-Method=“*”，允许的方法

                Access-Control-Request-Headers=“Content-Type,自定义的header的key”。

             带cookies的跨域解决：在响应头添加

                Access-Control-Allow-Credentials,="true"，允许使用cookies

               ngnix配置：



apache配置：没搞过

若是使用spring框架：使用@CrossOrigin注解既可以实现服务端跨域

官网介绍，vue操作dom的正确姿势

exp
this.getList()//获取数据并初始化表格 this.$nextTick(fuction(){    //表格渲染完毕    })

npm view  element-ui version --json
如果之前已经注册了淘宝源，那么出来的是个版本号
官方源出来一系列的版本信息，包括最新的版本

这里删除了package-lock.json
然后修改了package.json将element-ui版本号到2.4.3
执行
npm i
如果无法安装使用国内的cnpm
执行
cnpm i
安装成功，npm start查看前端界面，升级后界面报错，建议根据错误排查，如果部分页面可以查看，那么就拿一个问题页面做减法，一个个删除来查找错误

比如有组数据是很多页面都要用的，我想把它写在一个js文件里作为公共方法。

public.js
import axios from 'axios'; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; import { get_industrylist } from './api.js' export const getIndustryList = async function () {         let data = await new Promise((resolve)=>{         axios.post(get_industrylist).then((res) => {             console.log(res)             if(res.data.code === 200){                 // console.log('getIndustryList', res.data.data.industrylist)                   resolve(res.data.data.industrylist)             }                 })     })     return data     }
然后在某个页面里使用它。

Tanant.vue
... created(){     getIndustryList().then((v)=>{             this.options = v           })   }, ...

在编写vue文件中引入模块
import model from "@/common/model"; // 这里路径前面的“@”符号表示什么意思？ resolve: {     // 自动补全的扩展名     extensions: ['.js', '.vue', '.json'],     // 默认路径代理     // 例如 import Vue from 'vue'，会自动到 'vue/dist/vue.common.js'中寻找     alias: {         '@': resolve('src'),         '@config': resolve('config'),         'vue$': 'vue/dist/vue.common.js'     } }
@ 等价于 /src 这个目录，避免写麻烦又易错的相对路径

代码如下：
function(arr,index,tindex){   //如果当前元素在拖动目标位置的下方，先将当前元素从数组拿出，数组长度-1，我们直接给数组拖动目标位置的地方新增一个和当前元素值一样的元素，   //我们再把数组之前的那个拖动的元素删除掉，所以要len+1   if(index>tindex){     arr.splice(tindex,0,arr[index]);     arr.splice(index+1,1)   }   else{   //如果当前元素在拖动目标位置的上方，先将当前元素从数组拿出，数组长度-1，我们直接给数组拖动目标位置+1的地方新增一个和当前元素值一样的元素，   //这时，数组len不变，我们再把数组之前的那个拖动的元素删除掉，下标还是index     arr.splice(tindex+1,0,arr[index]);     arr.splice(index,1)   } }
index是当前元素下标，tindex是拖动到的位置下标。
from：http://www.cnblogs.com/zwhblog/p/7941744.html#4004715