「Javascript/vue/node/helloworld」の版間の差分
提供: 初心者エンジニアの簡易メモ
(→基本構成) |
|||
| (同じ利用者による、間の4版が非表示) | |||
| 行7: | 行7: | ||
vue init webpack-simple project1 | vue init webpack-simple project1 | ||
npm install # package.json記述分のインストール | npm install # package.json記述分のインストール | ||
| + | |||
| + | ==tree== | ||
| + | <nowiki>├── README.md | ||
| + | ├── index.html | ||
| + | ├── package-lock.json | ||
| + | ├── package.json | ||
| + | ├── src | ||
| + | │ ├── App.vue | ||
| + | │ ├── assets | ||
| + | │ │ └── logo.png | ||
| + | │ └── main.js | ||
| + | └── webpack.config.js</nowiki> | ||
==node起動== | ==node起動== | ||
npm run dev | npm run dev | ||
| − | + | 2秒ぐらいで起動し、常駐状態になる | |
===node 404s will fallback to /index.htmlと出る場合=== | ===node 404s will fallback to /index.htmlと出る場合=== | ||
| 行45: | 行57: | ||
export default { | export default { | ||
name: 'app', | name: 'app', | ||
| − | data () { | + | data() { |
return { | return { | ||
msg: 'Welcome to Your Vue.js App' | msg: 'Welcome to Your Vue.js App' | ||
} | } | ||
| + | }, | ||
| + | mounted() { | ||
| + | // インスタンスがマウントされた直後に実行 | ||
} | } | ||
} | } | ||
2021年6月9日 (水) 18:07時点における最新版
目次
nodeのvueクライアントインストール
npm install -g vue-cli vue --version
vueでプロジェクトのスケルトン作成
vue init webpack-simple project1 npm install # package.json記述分のインストール
tree
├── README.md ├── index.html ├── package-lock.json ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ └── main.js └── webpack.config.js
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'
}
},
mounted() {
// インスタンスがマウントされた直後に実行
}
}
</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')
インデントエラー
インデントを正しく記述しないとエラーとなる
