このブログの目的

自分が何をしたかを残しておきたいので、はじめました。完全に自分用です。基本的にやったことを列挙していって、思ったことを書きなぐる感じで行きます。

Vueの公式チュートリアルを眺めた

jp.vuejs.org

とりあえず眺めたが、専門用語すぎて言ってる事がよくわからない。

プログレッシブフレームワーク？
ディレクティブ？？
束縛？？？

何もわからなかったので、いつものように Qiita のお世話になることに…

QiitaにあったVue.jsチュートリアルを触る

qiita.com

触りました。

nodeとnpmはNLP100本ノックをnodeで解こうと試みた背景があって、導入済みでした

% node -v
v10.15.1

% npm -v
6.4.1

プロジェクトの作成

% npm init
% npm install vue-cli
% npx vue --version
2.9.6

とりあえず何もわからないので、全てYes!!

% npx vue init webpack tutorial_vuejs_todo_management

? Project name tutorial_vuejs_todo_management
? Project description A Vue.js project
? Author KamuiRoeru <me1802@s.akashi.ac.jp>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

とりあえず実行！！！

% cd tutorial_vuejs_todo_management
% npm install
% npm run dev

うごいた。

githubにあげとくと楽らしいので、適当に作っておきました。

% git init
% git add .
% git commit -m "initial commit"
% git remote add https://github.com/kamuiroeru/tutorial_vuejs_todo_management.git
% git push origin master

github.com

依存関係の脆弱性

なんか警告出てる…

f:id:kamuiroeru:20190508191009p:plain — 警告

調べると、なんかパッケージのバージョンが古くて脆弱性ありありだそうで。

webpack-dev-server がやばいらしい。

www.l08084.com

解消します。

% npm install -g npm-check-updates
% ncu
# 中略
 webpack-dev-server                               ^2.9.1  →     ^3.3.1
# 中略

めっちゃ出てきた…

% ncu -u
% rm -rf package-lock.json
% npm update

% ncu
All dependencies match the latest package versions :)

警告消えたやったぜ！

ファイル構成を眺める

特にこだわりはないのですが、WebStormで眺めた。

<template>で html
<script> で javascript
<style scoped> でこのスコープだけの CSS

を書いたやつが .vueファイルなんだな〜

コンポーネントがよくわからなかったので公式ページ見た。ちょっとだけわかった気がする。