小编Sim*_*iel的帖子

我尝试根据 CI 脚本是否为标记分支运行来实现条件版本控制。但是版本变量尚未解决。相反，它被打印为字符串。

GitLab CI脚本的相关工作：

# build template
.build_base_template: &build_base_template
  image: registry.gitlab.com/xxxxxxx/npm:latest
  tags:
    - docker
  stage: LintBuildTest
  script:
    - export CUR_VERSION='$(cat ./version.txt)$BUILD_VERSION_SUFFIX'
    - npm ci
    - npm run build
  artifacts:
    expire_in: 1 week
    paths:
      - dist/

# default build job
build:
  before_script:
    - export BUILD_VERSION_SUFFIX='-$CI_COMMIT_REF_SLUG-SNAPSHOT-$CI_COMMIT_SHORT_SHA'
  <<: *build_base_template
  except:
    refs:
      - tags
  only:
    variables:
      - $FEATURE_NAME == null

# specific build job for tagged versions
build_tag:
  before_script:
    - export BUILD_VERSION_SUFFIX=''
  <<: *build_base_template
  only:
    refs:
      - tags

几个星期以来，我正在研究一个 Vue js 项目 Vuetify，具体来说。我使用npm run serve命令来构建和运行实时服务器。它运行良好，一切正常，但突然间我再次运行我的项目，Boom 无法再构建它卡住了 40%，而不会抛出任何错误或错误。我想知道你们是否有和我一样的问题，或者你知道如何解决这个问题。预先感谢。

我正在使用npm 6.9.0，node v10.16.0并且vue 3.9.2

包.json

{
  "name": "mycode",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "core-js": "^2.6.5",
    "fuse.js": "^3.4.5",
    "moment": "^2.24.0",
    "vue": "^2.6.10",
    "vue-axios": "^2.1.4",
    "vue-i18n": "^8.12.0",
    "vue-router": "^3.0.3",
    "vue-table-component": "^1.9.2",
    "vuelidate": "^0.7.4",
    "vuetify": "^1.5.5"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.9.0",
    "@vue/cli-plugin-eslint": "^3.9.0",
    "@vue/cli-service": "^3.9.3",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "live-server": …

我使用v-toolbar但是当我向下滚动时它消失了。基本上我想要一个粘性标题。

这基本上是我的代码。

<div id="app">
  <v-app>
    <v-toolbar dense>
    <v-toolbar-side-icon></v-toolbar-side-icon>
    <v-toolbar-title>Title</v-toolbar-title>
    <v-spacer></v-spacer>
    <v-toolbar-items class="hidden-sm-and-down">
      <v-btn flat>Link One</v-btn>
      <v-btn flat>Link Two</v-btn>
      <v-btn flat>Link Three</v-btn>
    </v-toolbar-items>
  </v-toolbar>
   <main>
     <h1 v-for="n in 20" :key="n">{{n}}</h1>
    </main>
  </v-app>
</div>

我尝试想出一个何时使用每个 Vue.js 生命周期钩子的例子。因为beforeMount()我想不出任何用例。在研究时，我还阅读了：

很可能我们永远不需要使用这个钩子。

当我想使用这个生命周期钩子时，有人可以提供一个例子吗？

<button class="btn" @click="removeFromTheCart(index,item.price)">
  Remove
</button>

我将两个参数传递给我的操作removeFromTheCart。

removeFromTheCart({ commit }, payload) {
  console.log("rooooooohhhhhoooow",payload)

当我在 vuex 存储中控制台记录我的有效负载时，它只输出 index。我的第二个参数不在输出中。

如何通过操作获取两个参数值？

由于设置简单且成本低廉，我正在考虑使用AWS S3存储桶而非NoSQL数据库将简单的用户设置保存为JSON（约30个文档）。

我研究了以下不使用数据库的缺点，这些缺点与我的用例无关：

• 列出存储桶/文件将花费您的钱。
• 没有更新-您无法更新文件，只能替换它。
• 没有索引。
• 版本控制将花费您$$。
• 没有搜寻
• 没有交易
• 没有查询API（SQL或NoSQL）

使用S3存储桶而不使用数据库是否还有其他缺点？

在将突变作为 Vuex 存储模块的一部分实现时，我遇到以下 SonarQube 冲突：

"state" hides or potentially hides a variable declared in an outer scope at line X

该代码看起来与 Vuex 文档中的代码片段类似：

const moduleA = {
  state: { count: 0 },
  mutations: {
    increment (state) {
      // `state` is the local module state
      state.count++
    }
  }
}

（https://vuex.vuejs.org/guide/modules.html）

实施是不好的做法吗？或者我是否需要一个特殊的配置/插件来让 SonarQube 正确分析 Vue / Vuex？

我目前正在使用 vuejs 2 和 vuetify 2 开发企业应用程序的 Web 前端。计划在发布后迁移到 Vuejs 3。

是否有任何编码模式现在应该避免，以便将来轻松迁移到 vuejs 3？

Vue 3 发布路线图的 github 说：

高级 API 尽可能接近 2.x。仅在必要时进行重大更改，并将通过 RFC 流程进行沟通。( https://github.com/vuejs/roadmap )

查询运算符的使用有逻辑上的区别吗$and

db.collection.find({$and: [{"array.field1": "someValue"}, {"array.field2": 3}]})

以及投影算子的用法$elemMatch

db.collection.find({array: {$elemMatch: {field1: "someValue", field2: 3}}})

查找包含数组内对象字段的文档？

我无法降低 Vuetify 下拉组件的高度v-select。我尝试使用道具dense，但它只会减少要选择的选项的高度，并且不会对关闭的下拉菜单显示任何效果。

我尝试了以下模板代码：

<v-select :items="selectableYears" dense outlined></v-select>

文档中的示例代码非常相似：

<v-select
    :items="items"
    label="Outlined style"
    dense
    outlined
></v-select>

文档： https: //vuetifyjs.com/en/components/selects

多选组件的数据属性不会在更改时更新。复选框不会在前端更新。

预期行为：单击复选框时应勾选。

代码链接：https : //jsfiddle.net/bzqd19nt/3/

<div id="app">
  <multiselect 
    select-Label=""
    selected-Label=""
    deselect-Label=""
    v-model="value" 
    :options="options"
    :multiple="true"
    track-by="library"
    :custom-label="customLabel"
    :close-on-select="false"
    @select=onSelect($event)
    @remove=onRemove($event)
    >
    <span class="checkbox-label" slot="option" slot-scope="scope" @click.self="select(scope.option)">
    {{ scope.option.library }}
      <input class="test" type="checkbox" v-model="scope.option.checked" @focus.prevent/>

    </span>
  </multiselect>
  <pre>{{ value }}</pre>
</div>

new Vue({
  components: {
    Multiselect: window.VueMultiselect.default
  },
  data: {
    value: [],
    options: [
      { language: 'JavaScript', library: 'Vue.js', checked: false },
      { language: 'JavaScript', library: 'Vue-Multiselect', checked: false },
      { language: 'JavaScript', library: 'Vuelidate', checked: false }
    ]
  },
  methods: …

我想减小 Element UI 表格行的间距以适应屏幕上的更多行。

不幸的是，我在 Element UI 文档中看不到任何选项：https : //element.eleme.io/#/en-US/component/table

直接为类设置定义的高度el-table__row不会导致任何高度变化。