创建一个简单的 VUE.JS 应用程序 [英] Creating a simple VUE.JS application
问题描述
我正在尝试按照此文章中的步骤在应用程序中使用来自 Vue 的简单多边形裁剪器一>.
我使用以下方法创建了我的应用:
vue init webpack myproject
现在,我需要将示例模板添加到我的应用程序(它有一个 src
文件夹),但我不确定如何修改或将这段代码添加到我的应用程序中.根据链接的文章,模板应如下所示:
//全局从'vue'导入Vue;从 'vue-polygon-cropper' 导入 VuePolygonCropper;Vue.component(VuePolygonCropper);//当地的从'vue-polygon-cropper'导入VueCropper;导出默认{组件:{VueCropper}}
<div id="应用程序"><polygon-crop :imageSource="'/demo.png'";ref=canvas"></polygon-crop><button @click.prevent="crop">Crop</button><button @click.prevent="undo">Undo</button><button @click.prevent="redo">Redo</button><button @click.prevent="reset">Reset</button>
</模板><脚本>导出默认{name: '应用程序',方法: {作物:函数(){this.$refs.canvas.crop();},撤消:函数(){this.$refs.canvas.undo();},重做:函数(){this.$refs.canvas.redo();},重置:函数(){this.$refs.canvas.reset();}}};
我不确定 global 或 local 的含义是什么.我的src
文件夹结构如下:
C:\ThermoAnalyser\vue_js\myproject\src 目录27/12/2020 上午 11:37 <DIR>.27/12/2020 上午 11:37 <DIR>..27/12/2020 11:37 AM 374 App.vue27/12/2020 上午 11:37 <DIR>资产27/12/2020 上午 11:37 <DIR>成分27/12/2020 上午 11:37 360 main.js27/12/2020 上午 11:37 <DIR>路由器2 个文件 734 字节5 目录 301,183,393,792 字节空闲
您将无法仅使用此代码片段来运行此组件,您需要做一些事情来解决此问题.
在我们深入之前,我希望您确定您是否安装了这个 vue-polygon-cropper
组件.如果您导航到与src"位于同一级别的 package.json文件夹,你会在那里看到提到 vue-polygon-cropper,如果没有,请通过 npm install vue-polygon-croper
安装它.
让我们先看看你的 部分:1- 在模板中,您调用一个组件
<polygon-crop>
但是,您的脚本中没有以该名称注册的组件(您尝试注册的是VuePolygonCropper",因此您应该尝试改用
组件.
2-我看到您在资产中复制并粘贴了徽标图像,这是测试它的好方法!但是,通过他们在 github 上提供的创建者示例进行挖掘,似乎此组件需要图像文件的完整路径而不是相对路径.所以,而不是/src/assets/logo.png 尝试做 :imageSource="require('../assets/logo.png')"
我假设资产徽标位于比当前组件高一级的文件夹中.所以你的模板应该是这样的:
<div id="应用程序"><VuePolygonCropper :imageSource = "require('../assets/logo.png')"ref="画布"></VuePolygonCropper><button @click.prevent="crop">裁剪 </button><button @click.prevent="撤销">撤消</button><button @click.prevent="redo">重做</button><按钮@click.prevent="重置">重置</button>
</template>
现在开始编写脚本!
只需导入 VuePolygonCropper 并在组件部分将其作为组件提及.您不需要导入 vue 并执行 Vue.component(VuePolygonCropper)
.注册这个组件的正确方法是这样的