利用vue-cli手动写一个HelloWorld超详解--_--

上一篇博主已经利用vue-cli搭建了一个简单的vue项目并启动了，下面是在下载下来的项目的基础上，自己动手写一个简单HelloWorld例子

项目模板解读

1.build文件夹下的文件就是 npm run dev所执行的文件
2.config执行文件所需要的配置信息
3.src 所有组件和图片等资源存放在这
4.index.html单页面应用主页
5.main.js文件是项目入口配置文件，名字不要改
6.assets文件夹是存放图片等资源的
7.component 自己写的组件都放在这
8.app.vue引用组件，所有自己写组件都放在这
9.router 路由配置文件

把router文件夹删除，删除component下的vue文件，新建一个HelloWorld.vue，再把main.js、App.vue文件清空，

改造完成之后，自己动手写一个HelloWorld

源码

1.HelloWorld.vue

<template>
  <p>vue大哥，你好啊</p>
</template>
<script>
    export default{
      name:'HelloWorld'
    }
</script>

<style>
</style>

2.App.vue

<template>
  <div id="app">
    <HelloWorld></HelloWorld><!-- //使用组件 -->
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components:{
    HelloWorld  //映射组件
  }
}
</script>

<style>
</style>

3.main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

写完之后执行

npm run dev

访问地址

http://localhost:8080/

就可以看到

注意事项

1.template下的div

template标签下同级只能有一个div存在，如果存在多个div就会报错。

但是，div下可以有多个同级div

2.eslint验证

看到这些报错是因为eslint的验证原因

可以在webpack.base.conf.js文件取消，也可以在初始化项目时不要加载eslint

在webpack.base.conf.js取消只需要注释掉这里就可以了

再次运行就没以上的报错信息