老項目引入Vue,ElementUI實踐

1.老項目指只有jquery， html，css，js ，freemarker 等的原始項目。

2.引入ElementUI步驟：

a. 進入elementUI官網 CDN處

<!-- 引入樣式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入組件庫 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

下載 element-ui.js 和 element-ui.css 以及 字體庫 有2個(icon主要是UI庫中的一些小圖標)

3.進入Vue 官網 下載 vue.js

4.本地引入 （可以引用本地下載好的文件）

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

 <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>

字體庫路徑特別注意與css文件同文件夾 fonts下面

5.使用 new Vue({}) 創建Vue實例開始使用。

6.可以使用mixins 。

 

補充：

jq中如何調用vue中的方法來自：https://blog.csdn.net/dakache11/article/details/84335322

vue:
var app = new Vue({
    el:'#main',
    data:{},
    method:{
        fn:function(){
        }
}
 
jq:
$('#main').click(function(){
    app.fn();
)