基於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即可。