vue如何引入Split Pane组件和样式：在需要的地方导入<el-splitpane>标签

要在Vue项目中引入Element UI的Split Pane组件并应用其样式，你需要按照以下步骤操作：

1. **安装Element UI**：
如果你尚未安装，首先确保在项目目录下安装Element UI。打开终端，输入以下命令：

   npm install element-ui --save

或者如果你使用的是yarn，则使用：

   yarn add element-ui

2. **添加Element UI到main.js或入口文件**：
将Element UI的全局引用添加到项目的入口文件（通常是`src/main.js`）中，确保在其他import语句之前加载：

   import Vue from 'vue';
   import ElementUI from 'element-ui';
   import 'element-ui/lib/theme-chalk/index.css'; // 引入Element UI的默认主题

   Vue.use(ElementUI); // 注册Element UI

3. **在组件中导入和使用Split Pane**：
在需要使用Split Pane的某个Vue组件内，导入`el-splitpane`标签并开始使用：

   <template>
     <div id="app">
       <el-splitpane :resizable="true" :size="splitSize" v-model="activePane">
         <el-pane>左侧内容</el-pane>
         <el-pane>右侧内容</el-pane>
       </el-splitpane>
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         activePane: 'left', // 或者 'right'
         splitSize: '50%', // 初始大小比例
       };
     },
   };
   </script>

这里设置了两个panes（左侧和右侧），`:resizable="true"`表示允许用户拖动调整大小，`v-model="activePane"`用于切换当前选中的pane。