Vue项目

vue项目下各文件夹和各文件的功能描述

项目介绍：

1.src目录

main. js是我们的入口文件，整个项目工程入口，用于全局配置，主要作用是初始化vue实例并使用需要的插件

2.App.vue

App. vue是我们的根组件(使用标签渲染整个工程的.vue组件) ，所有页面都是在App. vue下进行切换的。其实你也可以理解为所有的路由也是App. vue的子组件。所以我们将router 标示为App. vue的子组件。

3.assets文件

assets放可能会变动的文件

assets目录中的文件，会被合并到一个文件中，然后进行压缩。多用来存放业务级的js、css等，如一些全局的scss样式文件、全局的工具类js文件等。 

1.Vue组件的使用有以下3个步骤：

1.组件的导入

2.组件的注册

3.组件的使用

组件的导入：

 组件的注册：

组件的使用：

 

 

单文件组件

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
//导入组件文件夹
import HelloWorld from './components/HelloWorld.vue'


export default {
  name: 'App',
  
  components: {
    HelloWorld
  }
}
</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>

实例：