問了同窗好友，做後臺都會前端vue的寫法了，想著自己也學一學。於是下載了webstorm進行開發。

1.webstorm建立工程

1.環境搭建

node

檢查node,npm環境

命令列輸入node -v以及npm -v能看到版本號下一步

淘寶映象安裝

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

安裝webpack

cnpm install webpack -g

安裝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

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之間比較好

ps:和現有執行工程重複的效果是看不到vue，看到已註冊埠的工程。

6.執行

右上角有個帶箭頭的Debug Application點一下，選第一個Edit Configuration，然後在左上角+號選擇npm，配置如下：

名字可以起也可以不起，dev那裡一定要選

然後點選右上角那個綠色的播放按鈕就可以運行了

執行後在chrome中輸入localhost:8080【此埠為配置的埠】

4.配JQ

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

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跨域程式碼：

 $.ajax({
      url:"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) {
        alert(XMLHttpRequest.status);
         alert(XMLHttpRequest.readyState);
        alert(textStatus);

      }});

因為前後端分離一定要跨域用jsonp，切記！拿到資料格式：{“data”,”123”}