This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html lang="en"> | |
... | |
<body> | |
... | |
<div id="app"></div> | |
<!-- built files will be auto injected --> | |
</body> | |
</html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div id="app"> | |
<img alt="Vue logo" src="./assets/logo.png"> | |
<HelloWorld msg="Welcome to Your Vue.js App"/> | |
</div> | |
</template> | |
<script> | |
import HelloWorld from "./components/HelloWorld.vue"; | |
export default { |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div class="hello"> | |
<h1>{{ msg }}</h1> | |
... | |
</div> | |
</template> | |
<script> | |
export default { | |
name: "HelloWorld", |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Define a new component called button-counter | |
Vue.component('button-counter', { | |
data: function () { | |
return { | |
count: 0 | |
} | |
}, | |
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>' | |
}) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script> | |
export default { | |
name: "HelloWorld", | |
props: { | |
... | |
} | |
}; | |
</script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
"scripts": { | |
"serve": "vue-cli-service serve", | |
"build": "vue-cli-service build", | |
"lint": "vue-cli-service lint" | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
>npm run serve | |
> [email protected] serve C:\dev\github\the-vue-handbook-demo-cli-example\example | |
> vue-cli-service serve | |
INFO Starting development server... | |
98% after emitting CopyPlugin | |
DONE Compiled successfully in 4535ms |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
>npm run | |
Scripts available in example via `npm run-script`: | |
serve | |
vue-cli-service serve | |
build | |
vue-cli-service build | |
lint | |
vue-cli-service lint |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
> npm --version | |
6.4.1 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
> npm install -g npm@latest | |
C:\Users\komazec\AppData\Roaming\npm\npm -> C:\Users\komazec\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js | |
C:\Users\komazec\AppData\Roaming\npm\npx -> C:\Users\komazec\AppData\Roaming\npm\node_modules\npm\bin\npx-cli.js | |
+ [email protected] | |
added 387 packages from 770 contributors in 35.656s |