> quickstart-demo@0.1.0 serve > vue-cli-service serve 'vue-cli-service' 不是内部或外部命令，也不是可运行的程序或批处理文件。 Waiting for the debugger to disconnect...

时间: 2023-07-17 22:12:03 浏览: 133

vue2.0基于vue-cli+element-ui制作树形treeTable

该组件基于技术栈，主要涉及vue-cli生成的webpack项目脚手架，在此脚手架项目基础上完成的，整合了element-ui开源vue的UI项目 1.vue-cli的安装使用 npm install -g vue-cli 全局安装vue-cli之后，使用该脚手架的相关命令，可快速生成一个比较规范的vue项目结构 vue init <template> <project> 例子 vue init webpack treeTable 这样一个快速的项目结构生成，如下所示，中间一路回车就可以了，主要是设置了是否支持eslint等等 2.整合element-ui 在本文中，我们将深入探讨如何使用Vue 2.0、vue-cli和Element UI来创建一个树形的TreeTable组件。Vue CLI（Vue CLI 2.x）是一个强大的脚手架工具，它可以帮助开发者快速搭建规范化的Vue项目结构。Element UI则是一个流行的Vue UI库，提供了丰富的组件，包括我们所需要的Table组件。让我们详细了解一下Vue CLI的安装和使用。通过运行`npm install -g vue-cli`，可以在全局范围内安装Vue CLI。安装完成后，你可以使用`vue init`命令创建一个新的项目。例如，输入`vue init webpack treeTable`会创建一个名为`treeTable`的项目，其中包含了基于Webpack的项目结构。在创建过程中，你可以选择是否启用ESLint等配置。接下来是整合Element UI到项目中。进入生成的项目目录（如`cd treeTable`），然后运行`npm i element-ui -S`安装Element UI。在`main.js`文件中，你需要导入Element UI并应用它，如下所示： ```javascript import ElementUI from 'element-ui'; import 'element-ui/lib/theme-default/index.css'; Vue.use(ElementUI); ``` Element UI提供了许多功能丰富的组件，如表格（Table）。在这个案例中，我们将利用Element UI的Table组件来构建一个具有树形结构的Table。为了实现树形Table，我们需要编写一个自定义组件，这里以`TreeGrid.vue`为例。这个组件的核心在于将原始数据转换为适合树形展示的结构。`dataTranslate.js`文件中定义了一个名为`DataTransfer`的函数，它能够将数组数据转换为带有层级和扩展状态的树形数据结构。例如： ```javascript function DataTransfer(data) { // ... DataTransfer.treeToArray = function (data, parent, level, expandedAll) { // ... Vue.set(record, '_expanded', expandedAll); // ... if (record.children && record.children.length > 0) { let children = DataTransfer.treeToArray(record.children, record, _level, expandedAll); tmp = tmp.concat(children); } // ... }; // ... } export default DataTransfer; ``` 然后在`TreeGrid.vue`组件中，你可以使用这个转换后的数据来渲染树形表格。`<el-table>`标签结合Element UI的Table组件属性，可以实现表格的显示和交互。例如，你可以这样设置数据源： ```html <template> <el-table :data="data" border style="width: 100%">  </el-table> </template> ``` 并确保在组件的`script`部分引入和使用转换工具： ```javascript import { MSDataTransfer } from '@/utils/index.js'; export default { data() { return { data: [], // 原始数据 // ... }; }, mounted() { this.data = MSDataTransfer.treeToArray(this.rawData); // 转换原始数据 }, // ... }; ``` 至此，你已经成功地创建了一个基于Vue 2.0、vue-cli和Element UI的树形TreeTable组件。这个组件可以根据需要进一步定制，比如增加筛选、排序、懒加载等功能，以满足更复杂的需求。记得查阅Element UI的官方文档（http://element.eleme.io/#/zh-CN/component/quickstart）获取更多组件的使用方法和示例。

这个错误通常是因为缺少全局安装的 Vue CLI 工具所导致的。请确保在运行 `vue-cli-service serve` 命令之前已经全局安装了 Vue CLI。你可以使用以下命令进行全局安装： ``` npm install -g @vue/cli ``` 安装完成后，再次尝试运行 `vue-cli-service serve` 命令应该就不会报错了。

阅读全文

> quickstart-demo@0.1.0 serve > vue-cli-service serve 'vue-cli-service' 不是内部或外部命令，也不是可运行的程序 或批处理文件。 Waiting for the debugger to disconnect...

相关推荐

vue-frontend-quickstart:Vue网站的入门模板-无节点

ember-quickstart-app

vuefire-quickstart @ sejrvuefire-quickstart-已记录的Firebase与webpack和eslint的集成，由@sejr提供。-Vue.js开发

primevue-quickstart:使用VueCLI的PrimeVue快速入门应用程序

基于vue开发微信小程序mpvue-docs跳转页面功能

quickstart-thanos：用于Thanos监控的docker-compose堆栈

详解Ubuntu安装angular-cli遇到的坑

azure-quickstart-terraform-configuration：这是azure-quickstart-templates到terraform配置的转换

akka-http-quickstart-scala.g8

【java毕业设计】校内跑腿业务系统源码（springboot+vue+mysql+说明文档）.zip

【java毕业设计】大学志愿填报系统源码（springboot+vue+mysql+说明文档）.zip

基于java的网吧管理系统答辩PPT.pptx

基于java的基于SSM架构的网上书城系统答辩PPT.pptx

tornado-6.1-cp37-cp37m-win32.whl

气泡排序、插入排序、选择排序、快速排序、希尔排序、堆排序、合并排序-SortAlgorithm.zip

Keyboard Maestro 11.0.3-macwk.dmg

基于微信小程序的鲜花销售微信小程序答辩PPT.pptx

【java毕业设计】智能推荐旅游平台源码（springboot+vue+mysql+说明文档）.zip

tornado-6.2b1-cp39-cp39-musllinux_1_1_x86_64.whl

最新推荐

【java毕业设计】校内跑腿业务系统源码（springboot+vue+mysql+说明文档）.zip

【java毕业设计】大学志愿填报系统源码（springboot+vue+mysql+说明文档）.zip

基于java的网吧管理系统答辩PPT.pptx

基于java的基于SSM架构的网上书城系统答辩PPT.pptx

tornado-6.1-cp37-cp37m-win32.whl

Aspose资源包：转PDF无水印学习工具

管理建模和仿真的文件

【R语言高性能计算秘诀】：代码优化，提升分析效率的专家级方法

在构建视频会议系统时，如何通过H.323协议实现音视频流的高效传输，并确保通信的稳定性？

Go语言控制台输入输出操作教程

> quickstart-demo@0.1.0 serve > vue-cli-service serve 'vue-cli-service' 不是内部或外部命令，也不是可运行的程序或批处理文件。 Waiting for the debugger to disconnect...