Fetch the repository succeeded.
全部采用小写方式, 以横线分隔。
例:my-project-name
参照项目命名规则
有复数结构时,要采用复数命名法。
例:scripts, styles, images, data-models(页面路由文件夹除外)
小驼峰命名法(三方SDK文件保留原名称 例:jweixin-1.6.0.js)
例:demoModel.js
下划线命名法
例:retina_sprites.scss
下换线命名法
例:error_report.html
下换线命名法
例:img_1.png
大驼峰命名法
例: DemoComponent.vue
小驼峰命名法
例: demo.vue 或 demoComponent.vue
注意:尽量采用模块细分的方式来组织页面路由组件↓
article // 页面模块目录
components // 模块业务组件
index.vue // 主入口
add.vue
list.vue
personCenter // 页面模块目录
components // 模块业务组件
index.vue // 主入口
例
// 登录
import login from '@/views/login/index'
// 文章
import articleIndex from '@/views/article/index'
import articleList from '@/views/article/list'
import articleAdd from '@/views/article/add'
// 个人中心(如果是单路由组件名称就无需加Index)
import personCenter from '@/views/personCenter/index'
const routes = [
{
path: '/login',
name: 'login',
component: login
},
{
path: "/article",
name: "article",
redirect: '/article/index',
children: [
{
path: 'index',
name: 'articleIndex',
component: articleIndex
},
{
path: 'list',
name: 'articleList',
component: articleList
},
{
path: 'add',
name: 'articleAdd',
component: articleAdd
}
]
},
{
path: '/personCenter',
name: 'personCenter',
component: personCenter
},
]
{
name: "", // 组件名称必须定义而且大驼峰命名的形式,后期keep-alive会需要用到
components: {},
directives: {},
mixins: [],
props: {},
data() {
return {};
},
computed: {},
watch: {},
beforeCreate() {},
created() {},
beforeMount() {},
mounted() {},
beforeUpdate() {},
updated() {},
activated() {},
deactivated() {},
beforeDestroy() {},
destroyed() {},
methods: {},
}
<div
class=""
is=""
v-for="(item, index) in list"
v-if/v-else-if/v-else=""
v-show=""
v-cloak=""
v-pre
v-once
id=""
ref=""
:key=""
slot=""
v-model=""
v-on:click/submit=""
v-html=""
v-text=""
>
</div>
Sign in for post a comment
Comment ( 0 )