Javascript/vue/node/helloworld
提供: 初心者エンジニアの簡易メモ
目次
nodeのvueクライアントインストール
npm install -g vue-cli vue --version
vueでプロジェクトのスケルトン作成
vue init webpack-simple project1 npm install # package.json記述分のインストール
node起動
npm run dev
2秒ぐらいで起動する
node 404s will fallback to /index.htmlと出る場合
ttp://hoge.localhost/の場合
以下を追加
package.json
"scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --host=hoge.localhost", }
html修正
<template> <div id="app"> ほげほげ </div> </template>
divタグのappのid内に文字列を追加すると数秒で自動でhtmlに反映される。
記述ミスをすると、デバッグモードが画面内にでる。
基本構成
<template> <div id="app"> <img src="./assets/logo.png"> <h1>{{ msg }}</h1> </div> </template> <script> export default { name: 'app', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; }
vueのデバッグ
console.log('hoge')
インデントエラー
インデントを正しく記述しないとエラーとなる