Node.jsでElementPlusを使う

　面倒だった。

成果物

• github

情報源

• quickstart
• ElementPlusを使ってみる

コード

　npmや専用コマンドなどがある。

start.sh

npm i -g @vue/cli
#   版を確認する
vue -V
#   最新版にする
vue add vue-next

# プロジェクト作成
PJ_NAME=my_project
vue create "${PJ_NAME}"
cd "${PJ_NAME}"
npm init -y
npm i -D element-plus

# ビルド＆実行
npm run serve

index.html

<div id="app"></div>

main.js

import { createApp } from 'vue'
import { ElButton, ElSelect, ElDatePicker } from 'element-plus';
import lang from 'element-plus/lib/locale/lang/ja'
import 'dayjs/locale/ja'
import locale from 'element-plus/lib/locale'
import App from './App.vue';

locale.use(lang)

const app = createApp(App)

app.component(ElButton.name, ElButton);
app.component(ElSelect.name, ElSelect);
app.component(ElDatePicker.name, ElDatePicker);

app.mount('#app')

App.vue

<template>
  <el-button type="primary" @click="onClick">Element UI のボタンだよ</el-button>
</template>

<script>
export default {
  name: 'App',
  setup() {
    const onClick = ()=>{
      alert('よくも押してくれたな！');
    };
    return {
      onClick,
    };
  },
}
</script>

対象環境

• 2021-02-14
• Raspbierry pi 4 Model B
• Raspberry Pi OS buster 10.0 2020-08-20 ※
• bash 5.0.3(1)-release

$ uname -a
Linux raspberrypi 5.4.83-v7l+ #1379 SMP Mon Dec 14 13:11:54 GMT 2020 armv7l GNU/Linux