Build HelloWorld project based vue-cli
This is the first project index.html page, do not change the name;
main.js at the entrance src This is the project profile, the name will not change
Now we delete the files under src, and then write a new HelloWorld;
We create a new component App.vue
There validation error, we turn off eslint verification
vue file, divided into three large pieces, <template> template code block, <script> js a code block, <style> is the style code blocks;
We then create a new sub-assembly, in the components directory: HelloWorld.vue
<template>
<div>
<p class="info">{{info}}</p>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {// function must be written in assembly
return {
info: 'Vue uncle Hello! '
}
}
}
</script>
<style scoped>
.info{
color: red;
font-size: 20px;
}
</style>
Then App.vue, we introduced sub-assembly HelloWorld
<template>
<div>
<img src="./assets/logo.jpg" height="74" width="216"/>
<! - Using Components ->
<hello-world></hello-world>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld' // introduction means
export default {
name: 'App',
components:{
HelloWorld: HelloWorld // mapping component label
}
}
</script>
<style scoped>
</style>
Finally, we main.js entrance configuration files, create Vue instance:
/*
Entrance js: Creating Vue instance
*/
Import view from 'View'
import App from './App'
new view ({
the '# app'
components:{
App
},
template:'<App/>'
})
run:
We will find the console compiler error, eslint code were examined, more stringent, we understand eslint specification can actually do it, affect efficiency;
So it is turned off;
webpack.base.conf.js find the configuration file to circle the piece notes can; or to initialize project, directly eslilng can not be installed.