Vue 项目大小写的推荐写法

单文件组件的文件名

建议始终使用PascalCase或kebab-case，前者利于编辑器自动提示并于在js文件中对它的引用更一致，不过在某些大写不敏感的文件系统中可能出现问题。

组件名称

• 在字符串模板/单文件组件模板中建议：PascalCase或kebab-case
• 在DOM模板中使用：kebab-case（鉴于html大小写不敏感，这是必须的）
• 在js中建议：PascalCase
  • 但是使用Vue.component()注册全局组件的话，建议kebab-case.(因为它们会在js中用得少，而kebab-case和html一致)

属性名称

• html中建议kebab-case
• js中建议camelCase

事件名称

始终使用kebab-case（注意：vue不会将js中其他形式事件名自动转换为kebab-case，因为它几乎不被作为标识符使用）

个人小结（一种参考）

• html(DOM template、string template、single file component template): kebab-case
• js
  • 组件名：PascalCase
  • 属性名：camelCase
  • 事件名：kebab-case
• 单文件组件文件名：kebab-case

Vuex

Vuex 是实现全局状态（数据）管理的一种机制，可以方便实现组件间数据共享。

Vue 自带的组件间数据共享方式

• 父传子：v-bind 数据绑定
• 子传父：v-on 事件绑定
• 兄弟组件间传值：EventBus
  • 组件接收数据：$on
  • 组件发送数据：$emit

在中大型项目中，这些方式开发效率低、可维护性差。

Vuex 结构

使用要点

• store 挂在到根节点上
• 组件通过 dispatch 触发 action, action中可以进行异步操作，比如异步获取数据
• action 通过 commit 触发 mutation, mutation 的操作必须是同步的，mutation 内部可以更新数据
• 在组件上除了通过 this.$store 进行属性获取和方法调用外，还可以通过导入 vuex 中的相关 map 函数，直接将属性和方法映射到组件上

ant-design-vue

在通过 babel-plugin-import 插件进行按需加载时，遇到了错误，首先缺少 less-loader 、 less ，安装即可。之后又报错：

error  in ./node_modules/ant-design-vue/es/style/index.less

Module build failed (from ./node_modules/less-loader/dist/cjs.js):

// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?

其实报错中已经给出了 github 的 issue 地址，只要按照解决方案，在 vue.config.js中添加入如下配置就可以了：

module.exports = {
    css: {
        loaderOptions: {
            less: {
                javascriptEnabled: true,
            }
        }
    },
}