老项目引入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 。

 

补充：

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