在vue中使用jquery

首先默認你已經有了一個vue程序，如果你想在vue中使用jquery，那麼請繼續閱讀。

當然，加入你沒有一個vue程序，這裡也給出創建一個vue程序的命令。當然，你肯定裝了vue-cli，不然你不會點進這篇博客

<code>vue init webpack vue-demo01/<code>

項目的目錄類似如下：

對了，這個demo裡使用了element-ui

安裝方式：

<code>npm i element-ui -S/<code>

配置方式：

可以直接拷走

<code>import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);/<code>

jquery安裝

直接運行下面的命令

<code>npm run jquery/<code>

jquery引用

在需要使用jquery的組件裡，引入jquery後，即可正常使用

<code>  import $ from 'jquery'/<code>

舉例

HelloWorld.vue

<code><template>

  


    <el-tree>

  


/<template>





<style><br><br>/<style>/<code>

list.json

<code>[{

  "label": "一級 1",

  "children": [{

    "label": "二級 1-1",

    "children": [{

      "label": "三級 1-1-1"

    }]

  }]

}, {

  "label": "一級 2",

  "children": [{

    "label": "二級 2-1",

    "children": [{

      "label": "三級 2-1-1"

    }]

  }, {

    "label": "二級 2-2",

    "children": [{

      "label": "三級 2-2-1"

    }]

  }]

}, {

  "label": "一級 3",

  "children": [{

    "label": "二級 3-1", 


    "children": [{

      "label": "三級 3-1-1"

    }]

  }, {

    "label": "二級 3-2",

    "children": [{

      "label": "三級 3-2-1"

    }]

  }]

}]/<code>

運行效果：

如果需要源碼，在下面下載

下載地址：https://download.csdn.net/download/iiiliuyang/12127883

如果這篇博客對你有用，點個贊再走唄~

閱讀更多 劉陽不吃飯 的文章

關鍵字: 下面 安裝 命令