前端开发必备小技巧之前端代码规范Vue篇

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:'我是一个标题',
    }
  },
}

export default {
  name: 'App',
  data:{
    title:'我是一个标题',
  },
}

export default {
  name: "HelloWorld",
  props: {
    //组件状态，用于控制组件的颜色
    status: {
      type: String,
      required: true,
      validator: function (value) {
        return ["succ", "info", "error"].indexof(value) !== -1;
      },
    },
    // 用户级别，用于显示皇冠个效
    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",
    // 登录页
    component: () => import('@/components/Login/Login.vue'),
}, 

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

{
    path: '/',
    // 首页
    name: 'home',
    component: () => import('../components/home/home.vue'),
    redirect: '/panel',
    // 重定向到看板页
    children:[
        {
            path:'/panel',
            // 大屏面板
            name:'Panel',
            component:()=>import('../components/panel/panel.vue'),
            meta: {
                bg: 'bg'
            },
            // 背景图
        },
        {
        path:'/system',
        // 系统设置
        name:'System',
        component:()=>import('../components/system/system.vue')
    }]
}

 |-- api 				所有api接口
 |-- assets 			静志资源，images，icons，styles等
 |-- components			公用组件
 |-- config				配置信息
 |-- constants			常量信息，项目所有Enun，全局常量等
 |-- directives			自定义指令
 |-- filters			过滤器，全局工具
 |-- datas				模拟教据，临时存放
 |-- lib				外部引用的插件存放及修改文件
 |-- mock				模拟接口，临时存放
 |-- plugins			插件，全局使用
 |-- router				路由，统一管理
 |-- store				vuex，统一管理
 |-- themes				自定义样式主题
 |-- views				视图目录
 |  |-- role				role模块名
 |  |-- role-list.vue		role列表页面
 |  |-- role-add. vue		role新建页面
 |  |-- role-update.vue		role更新页面
 |  |-- 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: '采购入库'
        },
        REFUND_IN: {
            value: 2,
            desc: '退货入库'
        },
        CHECK_IN: {
            value: 3,
            desc: '盘点入库'
        },
        CONFIRM_IN: {
            value: 4,
            desc: '取消订单入库'
        }
    }
}

|-- views				视图目录
|  |-- role				role模块名
|  |-- role-list.vue		role列表页面
|  |-- role-add. vue		role新建页面
|  |-- role-update.vue		role更新页面
|  |-- index.less			role模块样式
|  |-- components			role模块通用组件文件夹
|  |  |-- role-header.vue			role头部组件
|  |  |-- role-modal.vue			role弹出窗组件
|  |-- employee			employee模块
|  |-- behavior-log		行为日志log模块
|  |-- code-generator	代码生成器模块