【vue.js #1 】環境構築をしてから開発直前まで
【vue.js #1 】環境構築をしてから開発直前まで:
シングルページアプリケーションを作ってみたいと思ったのでvue.jsの環境作りをする際の参考に残します。
ちなみにvue.jsを選んだ理由は、vue, react, angularの中で日本語ドキュメントが充実していたので一番はじめやすそうだったからです！
npmがすでに使える環境を用意する必要があります。（自分はすでにできているので割愛しちゃいます）
npmコマンドで、vue-cliパッケージをインストール
完了です。
試しにfirst-vue というプロジェクトを作成。
プロジェクト名や説明、作成者等質問されますがEnterで先へ進めても問題ありませんでした。
プロジェクト直下に移動すると、ディレクトリができているのが確認できます！
index.htmlファイルもプロジェクト直下に配置されています。
index.htmlがあったので、開いてみます。
buildすると、./dist/index.htmlにファイルが作られます。
./dist/index.htmlを開くと、
こちらがvue.jsのコアになるindex.htmlファイルのようです。
表画面も確認できます。
一旦ここまでで、開発に入れるようです！
プロジェクト直下のindex.htmlファイルの役割などは後ほど追記します。
vue.js 公式サイト
はじめに
シングルページアプリケーションを作ってみたいと思ったのでvue.jsの環境作りをする際の参考に残します。ちなみにvue.jsを選んだ理由は、vue, react, angularの中で日本語ドキュメントが充実していたので一番はじめやすそうだったからです！
angular > react > vue の順で習得が難しいそうです。vue > angular > react の順で日本語ドキュメントが充実しています。
前提
npmがすでに使える環境を用意する必要があります。（自分はすでにできているので割愛しちゃいます）
vue.jsの環境構築手順
vueのインストール
npmコマンドで、vue-cliパッケージをインストール$ npm install -g vue-cli~
プロジェクト作成
試しにfirst-vue というプロジェクトを作成。プロジェクト名や説明、作成者等質問されますがEnterで先へ進めても問題ありませんでした。
$ vue init webpack first-vue
index.htmlファイルを見つける
プロジェクト直下に移動すると、ディレクトリができているのが確認できます！index.htmlファイルもプロジェクト直下に配置されています。
$ cd first-vue $ ll total 100 drwxr-xr-x 8 root root 4096 Jan 18 21:24 ./ drwxrwxr-x 3 vagrant vagrant 4096 Jan 18 21:24 ../ -rw-r--r-- 1 root root 402 Jan 18 21:24 .babelrc drwxr-xr-x 2 root root 4096 Jan 18 21:24 build/ drwxr-xr-x 2 root root 4096 Jan 18 21:24 config/ -rw-r--r-- 1 root root 147 Jan 18 21:24 .editorconfig -rw-r--r-- 1 root root 51 Jan 18 21:24 .eslintignore -rw-r--r-- 1 root root 791 Jan 18 21:24 .eslintrc.js -rw-r--r-- 1 root root 213 Jan 18 21:24 .gitignore -rw-r--r-- 1 root root 271 Jan 18 21:24 index.html drwxr-xr-x 1026 root root 36864 Jan 18 21:25 node_modules/ -rw-r--r-- 1 root root 2695 Jan 18 21:24 package.json -rw-r--r-- 1 root root 246 Jan 18 21:24 .postcssrc.js -rw-r--r-- 1 root root 552 Jan 18 21:24 README.md drwxr-xr-x 5 root root 4096 Jan 18 21:24 src/ drwxr-xr-x 2 root root 4096 Jan 18 21:24 static/ drwxr-xr-x 4 root root 4096 Jan 18 21:24 test/
index.htmlの中身
index.htmlがあったので、開いてみます。$ vim index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>first-vue</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
<script>タグもなく、javascriptが読み込まれていない...。
buildする。
$ npm run dev
./dist/index.htmlにindex.htmlが作成されます。$ vim ./dist/index.html ------- <!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>first-vue</title><link href=/static/css/app.30790115300ab27614ce176899523b62.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js></script><script type=text/javascript src=/static/js/vendor.4a04c5bd29b0304c7 bd7.js></script><script type=text/javascript src=/static/js/app.b22ce679862c47a75225.js></script></body></html> -------
./dist/index.htmlを開くと、
<script>タグも含まれています。<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>first-vue</title><link href=/static/css/app.30790115300ab27614ce176899523b62.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js></script><script type=text/javascript src=/static/js/vendor.4a04c5bd29b0304c7 bd7.js></script><script type=text/javascript src=/static/js/app.b22ce679862c47a75225.js></script></body></html>
表画面も確認できます。
一旦ここまでで、開発に入れるようです！
プロジェクト直下のindex.htmlファイルの役割などは後ほど追記します。
vue.js 公式サイト
コメント
コメントを投稿