vue-cli创建的项目目录结构以及单文件组件的基本使用

初始项目结构

• 
• 在pubic文件里存在入口文件, pubic是这个项目的静态资源存放的地方,
• 在src文件夹下, main.js 实例了这个项目的最大的根组件APP.vue,
• 当写一个单文件组件时, 如果这个组件会被复用, 可以吧它放在components 文件夹中, 没有复用的放在views文件夹中, 当然放在哪里都可, 只要使用的时候导对路径就可以.

单文件组件

在components文件下创建一个 Sidebar.vue 文件,

template标签里面只允许存在一个父节点, 这个就是和之前创建非单文件组件时template下面的模板语法要求是一样的
style标签里面加上scoped 会自动生成一个标识, 使样式为局部样式, 使组件之间样式互不影响
支持scss语法时引入lang="scss"

• 在 APP.vue文件中, 吧写好的单文件组件进行注册, 可以注册为全局的组件, 也可注册为局部

•   <script>
      // 导入单文件组件
      import navbar from './components/Navbar'
      import sidebar from './components/Sidebar'
      //  导入vue 随用随导
      import Vue from 'vue'
      // 注册单文件组件
      Vue.component('navbar', navbar)   // 全局注册组件
      export default {
         
         
    	  components: {
         
             // 局部注册组件  名字一样可以成一个 完整写法为 sidebar: sidebar
    	    sidebar
    	  },
    	  data() {
         
          	        // 不要忘了在组件内状态是写在return内的
    	    return {
         
         
    	      name: 'lanxiaobai' 
    	    }
    	  },
    </script>
  

• 使用的时候直接在 APP.vue 文件内的template标签下使用

• <template>
    <div>
    	<sidebar></sidebar>
    	<navbar></navbar>
    </div>
  </template>