未分類

Node.js + Vue でライブエディターを自作したい

ゴール

ここにある、Vuepによるライブエディターのローカル構築。

結局、Webpackのとこで苦戦して、まだ実行できず。

 

HTML/CSS/Javascriptのライブエディター

自分のサイト内でブラウザエディターを利用したいので、どうにか組み込める方法を探していきついたのが「Vuep」。

LiveWeaverみたいなエディターのプラグインやオープンソース版を探してたけど、組み込みまでいけそうなのが無かった。

Windows10にVue + Node.js環境

Node.jsのインストール

Windows上にとりまNode.jsサーバを建てる。

Node.js初なので、すべてここを参考にした。

ハローワールドまでさくっとクリア。

Vueとnpmのインストール

ここを参考に、パワーシェルからVueとnpmインストール。

とりま、環境構築

UbuntuにVue + Node.js環境

ここを参考にCurlとAptでインストール。

他の参考サイトはWindows10と同じ。

yran入れてみた。

 

Webpackを使う

sudo mkdir ~/hoge

cd ~/hoge

yarn add vue vuep codemirror
yarn add -D webpack webpack-cli webpack-dev-server vue vue-loader vue-template-compiler vue-style-loader css-loader babel-loader @babel/core @babel/preset-env

 

Webpackの使い方はここを参考に進めた。

 

 

 

-未分類

© 2021 技術科・情報科のサイト Powered by AFFINGER5