Vue.js最初のめも

vue.jsを始めたので最初の最初のざっくりめも

 

Study Vue.js

 

公式チュートリアル

全部日本語。すごい。

 

ドットインストール

versionは0.11.4なので結構古い。しかし参考にはなる。
有料会員限定。

 

Laracasts

無料でversion2で、このリンク先以外にも沢山ある。
ただし英語。大分参考になった。

 

Vue.js入門 ―:連載|gihyo.jp … 技術評論社

ところどころ参考にしてる。

 

codeprep

やったことない。

 

AtomPackages

もはやお約束だが、atomのパッケージ。

 

vue-autocomplete

自動補完。

 

language-vue

vue用のシンタックスハイライト。

 

vue-snippets

スニペット。

 

vue-hyperclick

定義元へのジャンプ。
以下のコマンドを実行して必要なパッケージを入れる必要がある。
apm install vue-hyperclick js-hyperclick hyperclick language-vue

 

language-vue-component

使っていない。

 

ChromeExtention

vueファイルをブラウザで開くと、こんなのが出てくるので

ココにアクセスして、chrome拡張機能を追加する。
こんなのが追加される。

 

めも

html属性に:を足すとv-bindになる
html属性に@を足すとv-onになる。

 

Vue-CLIでインストール

公式ドキュメントに従いvueをインストールする。
$ npm init
$ npm install vue
$ npm install --global vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install

gitも入れておく。
$ git init

ローカルサーバー立ち上げる。
$ npm run dev

保存と同時にリアルタイムで更新される。

初期のディレクトリ構成については以下がわかりやすい。
【参考】vue-cliでVue.jsをインストールしたときのファイルについて – Qiita

 

SCSS

scssは以下のように書くと適用される。

 

追加した時

何かのパッケージを追加したらsrc/router/index.jsにimport...を追記。

 

作成した時

自分でコンポーネント作成した時。
1.ファイル作って編集
2.index.jsにimport...とrouteを追加。もしくは、使うファイルに直接以下を追記。

コメントを残す