条件および環境
- Windows 10（1803以降、Windows Subsystem for Linux 有効化）
- Ubuntu（WSL、ストアアプリ版をインストール）
- Visual Studio Code（以下 VSCode）
- VSCode拡張機能＝Japanese Language Pack for VS Code ／ Vetur ／ Veutify-vscode
- Vue CLI v3.8.3
- Vue.js 2.6.10
- Vuetify @1.5.16
WIndows 10、WSL版Ubuntu で手軽な Vue.JS の開発＆テスト環境。という想定です。
Ubuntu インストール後、１度アップデートを実施してください。
sudo apt -y update
VSCode から WSL版Ubuntu のコマンドを叩けるようにする
1) デスクトップ上に作業用フォルダ「VueJS」を作成する。
2) VSCode を起動し、[ファイル] → [フォルダーを開く] で [VueJS] フォルダーを開く。
3) [ファイル] → [基本設定] → [設定] を開き、[ワークスペース] タブを選んでから 右上 {} アイコンで [settings.json] を開く。
4) [settings.json] に下記の内容を転記する
{
"terminal.integrated.shell.windows": "C:/Windows/System32/wsl.exe"
}
5) VSCode を閉じ、起動しなおす。
6) キーボード [Ctrl + P] でターミナルを開く。
npm と nodejs をインストール＆設定
VSCode のターミナルで、下記コマンドを実行する
sudo apt install -y nodejs npm sudo npm install n -g sudo n stable sudo apt purge -y nodejs npm exec $SHELL -l node -v
VueCLI をインストール
同じくVSCode のターミナルで、下記コマンドを実行する
sudo npm install -g @vue/cli
VueCLI コマンドで Vue.JS サイト環境をインストールする
同じく VSCode のターミナルで、下記コマンドを実行する
vue create hello-world
いくつかの質問が表示されるので、下記のとおり選択する。
Vue CLI v3.8.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? Yes
? Pick a linter / formatter config: ESLint with error prevention only
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json
? Save this as a preset for future projects? No
しばらく待つと、サンプルプロジェクトが自動で出来あがる。
Vus.JS サンプルサイトを実行する
完了後の出力のとおり、下記コマンドを実行するとサンプルサイトが確認できる。
cd hello-world npm run serve
上記コマンド後、下記が出力される。
App running at: - Local: http://localhost:8080/ - Network: http://192.168.0.2:8080/
Chrome で http://localhost:8080/ を開いてみる。
Vuetify を VueCLI コマンドで追加インストールする
vue add vuetify
しばらくすると質問が表示されるので、回答して完了させる。
? Choose a preset: Default (recommended)
Vuetify が組み込まれたので、再度、サンプルサイトを開いてみる。
npm run serve
サンプルページが Vuetify に変わっている。
【メモ】 Vuetify のバージョン確認コマンド
npm ls --depth 0 vuetify
参考・学習資料
de:code (decode) 2019 | 開発者をはじめとする IT に携わるすべてのエンジニアのためのイベント
→ de:code2019 公開資料内 動画「MW82 がんばらない Vue.js」
Vuetify Tutorial - YouTube
npm で公開用にビルドする
npm run build
上記コマンドでビルドを実行すると、プロジェクトフォルダ直下に dist フォルダーが作成されます。
この中に index.html 等が入っており、これらをそのまま公開すれば完了です。
ただ、公開URLがルート / 直下でない場合は下記の「トラブル＆解決集」を確認下さい。
問題解決集
- Vuetify のサンプルをコピペでもアイコンが表示されないことがある
<v-toolbar-side-icon>や<v-carousel>で起こりました。
触りすぎて因果関係がはっきりしませんが、アイコンフォントが不足するようです。
Vuetify 公式サイトのインストール＆設定を見れば解決します。
Installing Icons — Vuetify.js
VueCLI で作成すると main.js の部分は /src/plugin/vuetify.js のようです。
md mdi が勝手に変わるとか変わらないとか？だれか翻訳＆解明してください。
- ビルドしたけど、画面が真っ白のまま何も表示されない
URLが「http://〇〇〇.net/hello-world/」のようなルート直下じゃない場合、
プロジェクトフォルダーhello-world直下にvue.config.jsを作成し調整が必要らしい。
module.exports = {
publicPath: "./",
assetsDir: ""
}
他にも、外部サービス用の JavaScript を貼り付けるとき（例えば Google Analytics 的な）
最後に貼り付けないと、画面が真っ白のままだったりします。
質が悪いことに npm run serve だと普通に閲覧できます。
Vue.js の公式にも書いていますが npm run build 時とはバージョンが異なるようです。
- 外部フォントを使うときは追加で「sass-loader」が必要
npm install sass-loader node-sass --save-dev
/src/assets/ 内にフォントを配置し style.scss ファイルを作成する必要がある。
下記は style.scss のサンプル。
@font-face {
//CHE-DUST.TTF
font-family: 'CHE-DUST';
src: url('~@/assets/font/CHE-DUST.TTF') format('truetype');
}
部分的に使用したい場合は、<span> で囲って style="font-family: 'CHE-DUST' で適用。
- 遷移先ページアンカー <a href="/about#tag01"> <a id="tag01"> リンクを実現する
router.js に scrollBehavior() を追記することで遷移先の<a id="">に移動させられる。
Vue.js 公式ドキュメントには to from などのパラメーターが書いてあるが、
localtion.hash しか使用しないため、ビルド時にエラーが出るので抹消してしまう。
遷移先の id は数字のみだと動作しないため、アルファベットから始めること。
export default new Router({
base: process.env.BASE_URL,
routes: [
scrollBehavior() {
// ハッシュがある時にはその地点へとスクロールする
const selector = location.hash
return selector ? { selector } : { x: 0, y: 0 }
}
他に何か思い出したら加筆するかもしれません。
おつぽよ。
