基于vue-cli搭建HelloWorld项目
首先这个index.html是项目首页，名字不要改；
这个src下的main.js 这个是项目入口配置文件，名字不要改
现在我们把 src下的文件删除，然后来全新的写一个HelloWorld；
我们新建一个组件App.vue
有验证报错，我们关掉eslint验证
vue文件，分三大块，<template>模版代码块，<script>是js代码块，<style>是样式代码块；
我们再新建一个子组件，在components目录下：HelloWorld.vue
<template>
<div>
<p class="info">{{info}}</p>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data(){ // 组件里必须写函数
return {
info: 'Vue大爷 你好！'
}
}
}
</script>
<style scoped>
.info{
color: red;
font-size: 20px;
}
</style>
然后App.vue里，我们引入子组件HelloWorld
<template>
<div>
<img src="./assets/logo.jpg" height="74" width="216"/>
<!--使用组件-->
<hello-world></hello-world>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld' // 引入组件
export default {
name: 'App',
components:{
HelloWorld:HelloWorld // 映射组件标签
}
}
</script>
<style scoped>
</style>
最后我们配置下入口main.js文件，创建Vue实例：
/*
入口js：创建Vue实例
*/
import Vue from 'vue'
import App from './App'
new Vue({
el:'#app',
components:{
App
},
template:'<App/>'
})
运行：
控制台我们会发现编译报错，eslint对代码进行了检查，比较严格，我们了解eslint规范即可，实际搞的话，影响效率；
所以还是关掉吧；
webpack.base.conf.js 找到这个配置文件 把 圈的那块 备注即可；或者 初始化项目的时候，直接不安装eslilng即可。