はじめに
前回の記事でVue3.0
でCropperjs
を使用する方法をまとめました。今回はビルド高速化の為にこれにVite
を使った方法を記載します。
方法
1.パッケージの作成 + Viteのインストール + cropperjsのインストール
vue create aaaaa
cd aaaaa
npm init vite-app vue-todo-list
cd vue-todo-list
npm install
npm install cropperjs
2.vue-todo-list/src/App.vue
を書き換える
vue-todo-list/src/App.vue
<template>
<img ref="cropImg" alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Hello Vue 3.0 + Vite + Cropperjs" />
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import Cropper from 'cropperjs';
import "cropperjs/dist/cropper.css";
export default {
name: 'App',
components: {
HelloWorld
},
mounted() {
this.cropper = new Cropper(this.$refs.cropImg, {
background: false,
modal: false,
highlight: false,
viewMode: 1
});
},
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
3.実行
npm run dev
4.結果は以下のようになります
環境
ubuntu20.04
参考
Viteの使用方法: https://qiita.com/Toshiaki0315/items/1ab4e479007bb0f76f06