从零开始的VUE项目(二)：ELEMENT UI静态页面开发

• 1.页面布局
• 2.全局组件引用
• 3.引入jquery
• 4.引入zTree组件
• 5.非全局组件引用

1.页面布局

页面整体布局官方文档
页面布局如图：
页面实现100%扩充至全页面：

//app.vue下添加css
//清楚页面默认的间隔
*{
  margin:0;
  padding: 0;
}
//实现页面100%填充
html,body,#app,#mastContainer{
  height: 100%;
}

2.全局组件引用

3.引入jquery

3.1 通过vscode命令行窗口运行 npm install jquery 命令。实际上vue项目创建之初在node_modules中已存在jquery，运行该命令是为了在package.json中增加相应的配置，也可以直接手写进该文件中。

3.2 创建vue.config.js文件。我通过@vue/cli（vue -V 版本4.0）创建的项目，默认没有vue.config.js文件，需要自己手动创建。在文件中输入：

const webpack = require('webpack')
module.exports={
    configureWebpack:{
        plugins: [
            new webpack.ProvidePlugin({
              $:"jquery",
              jQuery:"jquery",
              "windows.jQuery":"jquery"
            })
        ]
    }
}

3.3 组件中引入依赖。

//在script标签中引入即可
<script>
import $ from 'jquery'
</script>

4.Vue引入zTree

vscode命令行工具执行： npm install ztree
相应页面引入ztree依赖： 一定要引入jquery，ztree基于jquery。
在man.js中引入可全局使用

ztree初始化：

//在export default.data中配置相及初始化
export default {
    data:function(){
        //通过return 返回数据，防止有多个ztree之间互相影响
        return {
            //ztree基础设置
            setting:{},
            zTreeData:[
                { name:"父节点1 - 展开", open:true,
				children: [
					{ name:"父节点11 - 折叠"},
					{ name:"父节点12 - 折叠"},
					{ name:"父节点13 - 没有子节点", isParent:true}
				]},
			    { name:"父节点2 - 折叠",
				children: [
					{ name:"父节点21 - 展开", open:true},
					{ name:"父节点22 - 折叠"},
					{ name:"父节点23 - 折叠"}
				]},
			    { name:"父节点3 - 没有子节点", isParent:true}                           
            ]
        }
    },
    //定义当前组件中的事件
    methods:{},
    //页面渲染后执行
    mounted(){
        //初始化ztree并全部展开
        $.fn.zTree.init($("#treeDemo"), this.setting, this.zTreeData).expandAll(true);
    }
}

5.非全局组件引用

• 全局组件配置
  vue组件引入：
  
  引入依赖：不需要在components中声明
  仅在某个vue组件中引入。在script标签中引入