export default {
  name: 'TodoItem',
  // ...
}

export default {
  name: 'Todo',
  // ...
}
export default {
  name: 'todo-item',
  // ...
}

components/
|- my-component.vue

components/
|- myCoaponent.vue
|- MyCoaponent.vue

components/
|-base-button.vue
|-base-table.vue
|-base-icon.vue

components/
|- MySutton.vue
|- VueTable.vue
|- Icon.vue

components/
|- todo-list.vue
|- todo-list-item.vue
|- todo-list-item-button.vue
|- user-profi1e-options.vue(完整單詞)

components/
|- TodoList.vue
|- TodoItem. vue
|- TodoButton.vue
|- UProfopts.vue(使用了縮寫)

<1--在單文件組件、字符串模板和JSX中-->
<myComponent />
<Rom><table :colum="data"/></Rom>

<my-component /><row><table :column="data"/></row>

export default {
  name: 'App',
  data(){
    return{
      title:'我是一個(gè)標(biāo)題',
    }
  },
}

export default {
  name: 'App',
  data:{
    title:'我是一個(gè)標(biāo)題',
  },
}

export default {
  name: "HelloWorld",
  props: {
    //組件狀態(tài)，用于控制組件的顏色
    status: {
      type: String,
      required: true,
      validator: function (value) {
        return ["succ", "info", "error"].indexof(value) !== -1;
      },
    },
    // 用戶級(jí)別，用于顯示皇冠個(gè)效
    userLevel: {
      type: String,
      required: true,
    },
  },
};

<template>
  <div class="hello">
      HelloWorld
  </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
  color: white;
  font-size: 22px;
  margin: 10px 0 0;
}
</style>

<template>
  <div class="hello">
      HelloWorld
  </div>
</template>
<!-- 沒有scoped 特性-->
<style >
.hello {
  color: white;
  font-size: 22px;
  margin: 10px 0 0;
}
</style>

      <MyComponent 
        foo="a" 
        bar="b" 
        baz="c">
      </MyComponent>

     <MyComponent foo="a" bar="b" baz="c"></MyComponent>

<template>
  <div >
    {{ normalizedFullName }}
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  computed:{
    normalizedFullName:function(){
      return this.fullName.split(' ').map((word)=>{
        return word[0].toUpperCase()+word.split(1)
      }).join(' ')
    }
  }
};
</script>

<template>
  <div >
    {{ fullName.split(' ').map((word)=>{
        return word[0].toUpperCase()+word.split(1)
      }).join(' ')}}
  </div>
</template>

   <input
   @input="onInput"
   @focus="onFocus">

   <input
  v-on:input="onInput"
   @focus="onFocus">

<template>

</template>

<script>

</script>

<style scoped>

</style>

<template>

</template>

<style scoped>

</style>

<script>

</script>

let id='1113'
this.$router.push({name:'userDetail',
	query:{
 	 id:id
	}
})

{
    path: "/Login",
    name: "Login",
    // 登錄頁(yè)
    component: () => import('@/components/Login/Login.vue'),
}, 

 {
        path:'/system/system-list',
        // 系統(tǒng)列表
        name:'SystemList',
        component:()=>import('../components/system/system-list.vue')
    }

{
    path: '/',
    // 首頁(yè)
    name: 'home',
    component: () => import('../components/home/home.vue'),
    redirect: '/panel',
    // 重定向到看板頁(yè)
    children:[
        {
            path:'/panel',
            // 大屏面板
            name:'Panel',
            component:()=>import('../components/panel/panel.vue'),
            meta: {
                bg: 'bg'
            },
            // 背景圖
        },
        {
        path:'/system',
        // 系統(tǒng)設(shè)置
        name:'System',
        component:()=>import('../components/system/system.vue')
    }]
}

 |-- api 				所有api接口
 |-- assets 			靜志資源，images，icons，styles等
 |-- components			公用組件
 |-- config				配置信息
 |-- constants			常量信息，項(xiàng)目所有Enun，全局常量等
 |-- directives			自定義指令
 |-- filters			過(guò)濾器，全局工具
 |-- datas				模擬教據(jù)，臨時(shí)存放
 |-- lib				外部引用的插件存放及修改文件
 |-- mock				模擬接口，臨時(shí)存放
 |-- plugins			插件，全局使用
 |-- router				路由，統(tǒng)一管理
 |-- store				vuex，統(tǒng)一管理
 |-- themes				自定義樣式主題
 |-- views				視圖目錄
 |  |-- role				role模塊名
 |  |-- role-list.vue		role列表頁(yè)面
 |  |-- role-add. vue		role新建頁(yè)面
 |  |-- role-update.vue		role更新頁(yè)面
 |  |-- index.less			role模塊樣式
 |  |-- components			role模塊通用組件文件夾
 |  |-- employee			employee模塊

/employee/add
/employee/delete/id
/employee/update

//添加員工
addEmployee:(data)=>{
	rerutn postAxios('/employee/add',data)
}
//更新員工
updateEmployee:(data)=>{
	rerutn postAxios('/employee/update',data)
}
//刪除員工
deleteEmployee:(employeeId)=>{
	rerutn postAxios('/employee/delete/'+employeeId)
}

|-- assets
|-- images
|  |-- background-color.png
|  |-- upload-header.png
|-- styles

|--  error-log
|  |--index.vue
|  |-- index.less
|-- markdow-editor
|  |--index.vue
|  |--index.js
|-- kebab-case

|--  index.js
|--  role.js
|--  employee.js

export let enumInfo = {
    SOURCE_IN_TYPE: {
        PURCHASE_IN: {
            value: 1,
            desc: '采購(gòu)入庫(kù)'
        },
        REFUND_IN: {
            value: 2,
            desc: '退貨入庫(kù)'
        },
        CHECK_IN: {
            value: 3,
            desc: '盤點(diǎn)入庫(kù)'
        },
        CONFIRM_IN: {
            value: 4,
            desc: '取消訂單入庫(kù)'
        }
    }
}

|-- views				視圖目錄
|  |-- role				role模塊名
|  |-- role-list.vue		role列表頁(yè)面
|  |-- role-add. vue		role新建頁(yè)面
|  |-- role-update.vue		role更新頁(yè)面
|  |-- index.less			role模塊樣式
|  |-- components			role模塊通用組件文件夾
|  |  |-- role-header.vue			role頭部組件
|  |  |-- role-modal.vue			role彈出窗組件
|  |-- employee			employee模塊
|  |-- behavior-log		行為日志log模塊
|  |-- code-generator	代碼生成器模塊