问了同窗好友，做后台都会前端vue的写法了，想着自己也学一学。于是下载了webstorm进行开发。

1.webstorm创建工程

1.环境搭建

node

下载node,并安装：此地址跳入官网：​​https://nodejs.org/en/download/​​​
然后请win-R输入cmd，enter后对命令行操作

检查node,npm环境

命令行输入node -v以及npm -v能看到版本号下一步

淘宝镜像安装

npm install -g cnpm --registry=http://registry.npm.taobao.org

安装webpack

cnpm install

安装vue脚手架

npm install vue-cli -g

2.安装webstorm

此处较简单，随意贴个链接，记得找破解或购买，不然过期不能用​

3.创建vue工程

File->New->Project->Vue.js，然后各种选路径，以下只提下关键点：

1.左侧选择

一定要选Vue.js，不然创建的是空工程

2.Location名称

此路径包括工程名，比如工程名为Pro,在H://project下，那么此处写H://project/Pro

vue.js工程创建和跨域请求spring framework踩坑_jquery

3.写工程名（具体不太记得）

如果前面写驼峰式，此处要全部写小写，不然可能过不了

4.YES,NO参考

Install vue router?yes 路由，可以改变访问前端地址，这个最好用。
Use your eslint to lint your code?no 注意，这个选no!!!!这个东西用来检测代码格式的十分严格，只能打两个空格，行末不能有分号，这个检查没必要，给自己添麻烦，所以选no.
然后的问题就随意，是xx tests就是测试类，可用可不用，公司不要求可以都选no.
最后一个问题，should we run npm install…这个是yes，不然用它干嘛。。。

5.端口

因为vue单独运行，需要单独接口，在config/index.js配置，注意和占用端口不同，我本地开了好几个web项目，那么端口和已有的都不能一致，最好随意改个不常用的。10000-65535之间比较好

vue.js工程创建和跨域请求spring framework踩坑_jquery_02

ps:和现有运行工程重复的效果是看不到vue，看到已注册端口的工程。

6.运行

右上角有个带箭头的Debug Application点一下，选第一个Edit Configuration，然后在左上角+号选择npm，配置如下：

vue.js工程创建和跨域请求spring framework踩坑_jquery_03


名字可以起也可以不起，dev那里一定要选

然后点击右上角那个绿色的播放按钮就可以运行了

运行后在chrome中输入localhost:8080【此端口为配置的端口】

4.配JQ

package.json加入​​"jquery" : "^3.2.1",​​

vue.js工程创建和跨域请求spring framework踩坑_json_04

jquery包安装

cnpm install jquery --save-dev

安装完成后，build/webpack.base.conf.js
第一行加入（use strict前）：

var webpack=require('webpack')

module.exports = {};这部分的大括号中加入：

plugins: [
    new webpack.ProvidePlugin({
      $:"jquery",
      jQuery:"jquery",
      "windows.jQuery":"jquery"

src/main.js加入：

import $ from 'jquery'

这里webstorm可能不识别，不管它，在vue代码HelloWorld.vue的

function(){
     console.log("123");
});

注意此时要重启一下npm

附，后台jsonp跨域代码：

@RequestMapping(value = "/getMsg", method = RequestMethod.GET)
    public void msg(HttpServletRequest request,HttpServletResponse response) {
        String callback = request.getParameter("callback");
        try {
            response.getWriter().print(callback+"({\"data\":\"123\"})");
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

js跨域代码：

"http://localhost:8899/getMsg",
      dataType:'jsonp',
      cache: false,
      type:'get',
      jsonp:'callback',
      crossDomain: true,
      success:function(data){
        alert(JSON.stringify(data));
      },
      error:function(XMLHttpRequest, textStatus, errorThrown)

因为前后端分离一定要跨域用jsonp，切记！拿到数据格式：{“data”,”123”}