搭建环境
下载代码
cd ~
mkdir k8s
cd k8s
git clone http://{ip}/xxx/front.git
项目用了 aid
执行npm install aid-cli -g发现报错 加了sudo一样报错 查看文档发现是我的node版本太高 尝试用nvm管理node版本
sudo curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash
执行之后 需要退出iterm 然后再开 执行 nvm 看到如下结果说明安装成功
安装node 6.9
nvm install 6.9
nvm use 6.9
再次尝试安装aid-cli 这次成功了
安装项目依赖
cd front
npm intstall
启动项目
aid dev
成功了
关于scoped
今天地铁上看了极客时间唐金洲的vue教学视频 他里面给style用了scoped 说是可以避免样式污染 我试了一下 还是比较好用的
首先我创建了两个组件 test.vue 和 test1.vue 然后分别在这两个文件里写了同名的样式 一个字体蓝色 一个字体红色 效果测试开始
不写scoped的情况
当分别访问两个页面的时候 没有污染
当两个页面作为子组件挂载在
home.vue里时test1的样式会覆盖test的样式
写scoped的情况
当分别访问两个页面的时候 没有污染
当两个页面作为子组件挂载在
home.vue里时 没有污染
关于VUE风格指南
之前开发的时候没有好好看这部分 出现了很多迷惑行为 其实官网早就给出了相关的说明 这些规则会帮我们规避错误 改善可读性和开发体验 这里挑重点总结一下 具体大家可以参考官网
组件名应该始终是多个单词的
这样做可以避免跟现有的以及未来的 HTML 元素相冲突 因为所有的 HTML 元素名称都是单个单词的
反例
Vue.component('todo', {
// ...
})
好例
Vue.component('todo-item', {
// ...
})
组件的 data 必须是一个函数
反例
export default {
data: {
foo: 'bar'
}
}
好例
export default {
data () {
return {
foo: 'bar'
}
}
}
Prop 定义应该尽量详细
至少需要指定其类型
反例
props: ['status']
好例
props: {
status: String
}
总是用 key 配合v-for
以便维护内部组件及其子树的状态。甚至在元素上维护可预测的行为
反例
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
好例
<ul>
<li
v-for="todo in todos"
:key="todo.id"
>
{{ todo.text }}
</li>
</ul>
永远不要把 v-if 和 v-for 同时用在同一个元素上
一般我们在两种常见的情况下会倾向于这样做
为了过滤一个列表中的项目
比如v-for="user in users" v-if="user.isActive"在这种情形下 请将users替换为一个计算属性 (比如activeUsers) 让其返回过滤后的列表为了避免渲染本应该被隐藏的列表
v-for="user in users" v-if="shouldShowUsers"。这种情形下，请将v-if移动至容器元素上 (比如ul,ol)
反例
<ul>
<li
v-for="user in users"
v-if="user.isActive"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
好例
<ul>
<li
v-for="user in activeUsers"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
为组件样式设置作用域
这条规则只和单文件组件有关 要使用 scoped 设置作用域也可以通过 CSS Modules，那是一个基于 class 的类似 BEM 的策略
反例
<template>
<button class="btn btn-close">X</button>
</template>
<style>
.btn-close {
background-color: red;
}
</style>
好例
<template>
<button class="button button-close">X</button>
</template>
<!-- 使用 `scoped` 特性 -->
<style scoped>
.button {
border: none;
border-radius: 2px;
}
.button-close {
background-color: red;
}
</style>
<template>
<button :class="[$style.button, $style.buttonClose]">X</button>
</template>
<!-- 使用 CSS Modules -->
<style module>
.button {
border: none;
border-radius: 2px;
}
.buttonClose {
background-color: red;
}
</style>
<template>
<button class="c-Button c-Button--close">X</button>
</template>
<!-- 使用 BEM 约定 -->
<style>
.c-Button {
border: none;
border-radius: 2px;
}
.c-Button--close {
background-color: red;
}
</style>
私有属性名
使用模块作用域保持不允许外部访问的函数的私有性 如果无法做到这一点 就始终为插件 混入等不考虑作为对外公共 API 的自定义私有属性使用 $_前缀 并附带一个命名空间以回避和其它作者的冲突 (比如 $_yourPluginName_)
反例
var myGreatMixin = {
// ...
methods: {
_update: function () {
// ...
}
}
}
var myGreatMixin = {
// ...
methods: {
$_update: function () {
// ...
}
}
}
好例
var myGreatMixin = {
// ...
methods: {
$_myGreatMixin_update: function () {
// ...
}
}
}
只要有能够拼接文件的构建系统 就把每个组件单独分成文件
单文件组件的文件名应该要么始终是单词大写开头 (PascalCase) 要么始终是横线连接 (kebab-case)。
应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头 比如 Base App 或 V
只应该拥有单个活跃实例的组件应该以 The 前缀命名 以示其唯一性
这不意味着组件只可用于一个单页面 而是每个页面只使用一次 这些组件永远不接受任何 prop 因为它们是为你的应用定制的 而不是它们在你的应用中的上下文 如果你发现有必要添加 prop 那就表明这实际上是一个可复用的组件 只是目前在每个页面里只使用一次
和父组件紧密耦合的子组件应该以父组件名作为前缀命名
组件名应该以高级别的 (通常是一般化描述的) 单词开头 以描述性的修饰词结尾
组件名应该倾向于完整单词而不是缩写
多个特性的元素应该分多行撰写 每个特性一行
关于父子组件通信
今天遇到一个场景 有五个页面都需要一个相同的子组件 子组件是一个表单且包含一个查询按钮 点击查询按钮查询接口并且在父组件展现数据 这就涉及到父子组件交互的问题了
简单分析一下 就是需要在子组件点击查询的时候讲子组件的表单数据一同传递给父组件 并且五个页面 肯定是不同的方法 初步设想是父组件将需要调用的方法传递到子组件 子组件点击时再回传给父组件 这样子组件只做下透传 真实的方法还是写在父组件里 但是感觉效率很低 因此尝试了其他方法 现在总结如下
第一个
index.vue (父)
这四个变量主要来接受子组件传递过来的查询条件 其实可以不设置 但是父组件有分页 分页的时候需要调用相同的查询方法 入参必须有这几项 因此只能在子组件点击查询的时候将传递过来的参数赋给这几个变量 然后在父组件点击分页的时候才能得到这几个参数
condition.vue (子)
这个方法的主要思路是在子组件和父组件都引入bus.js作为事件总线 子组件通过bus.$emit()将参数传递到父组件 再有父组件通过bus.$on()接受这个传递过来的方法和参数 然后调用父组件自身的方法来处理
第二个
index.vue (父)
condition.vue (子)
这个方法的主要思路是在父组件定义好用来接收子组件参数的方法getTableData() 然后在子组件直接通过this.$parent.getTableData()来调用父组件的方法
第三个
index.vue (父)
condition.vue (子)
这个方法的主要思路是将父组件的方法通过props传递到子组件里 然后子组件在点击查询按钮的时候再将参数传递到这个方法里
关于不同目录父组件Import不同目录但同名子组件或者vue.component()同名问题
在开发时 复制了同事的组件 稍作修改但组件名称一样 处于不同目录 于是诡异的事情出现了 我在A页面应用我的组件a 同事在B页面引用组件b 我从A页面切到B页面再切回A页面的时候 我引用的组件变成了b
就是这两个组件 初步怀疑就是因为引用的时候用了相同的组件名 在vue注册的时候冲突 导致前一个被顶掉 但是如果是被顶掉 我又从B切回了A 按理说我的a应该会再次顶掉b 但是没有 所以在这里留下一个问题 等待以后找到答案吧 最终的解决方法是我把我引入的组件命名改了就好了
