《vue新建篇》文件结构

Vue读音

读作view

Vue文件结构

参考链接：https://www.runoob.com/vue2/vue-directory-structure.html
参考链接：https://www.cnblogs.com/win-lin08/articles/7922037.html

1、文件结构

2、代码解释

其中App.vue代码如下：

点击查看代码

<!-- 展示模板 -->
<template>
  <div id="app">
    <img decoding="async" src="./assets/logo.png">
    <hello></hello>
  </div>
</template>
 
<script>
// 导入组件
import Hello from './components/Hello'
 
export default {
  name: 'app',
  components: {
    Hello
  }
}
</script>
<!-- 样式代码 -->
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

其中main.js如下：

点击查看代码

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import vueScrollBehavior from 'vue-scroll-behavior'
import 'normalize.css'

Vue.use(vueScrollBehavior, { router: router })

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

import Vue from ‘vue’
import App from ‘./App’
import router from ‘./router’
这三句的意思是首先引入vue, 然后引入了./App即App.vue文件。最后一句是引入一段路由配置。

然后是实例化new Vue .el:’#app’意思谁将所有的组件都放在id为app的元素中。components表明引入的文件，此处就是app.vue这个文件,这个文件的内容将以这样的标签写进#app中。webpack在编译时可以将.vue文件中的这三部分抽出来合成cinderella单独的文件。

3、修改测试

接下来我们可以尝试修改下初始化的项目，将 Hello.vue 修改为以下代码：

点击查看代码

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
 
<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: '欢迎来到菜鸟教程！'
    }
  }
}
</script>

重新打开页面 http://localhost:8080/ ，一般修改后会自动刷新，显示效果如下所示：

4、另一个解释图片