初识vue-Hello Vue

目录

Vue CLI

八皇后问题小游戏项目创建

单文件组件

命名规则

---

Vue CLI

安装：

npm install -g @vue/cli
// # OR
yarn global add @vue/cli

创建项目：

vue create my-project
// # OR
vue ui

八皇后问题小游戏项目创建

在8*8的棋盘上放置8个皇后，使得任一皇后都不能吃掉其他皇后，即任俩个皇后都不能处于同一条横线、纵线或者斜线上

单文件组件

• 提供了更好的封装性
• 优雅的模板支持
• scoped CSS 支持
• 通过vue-loader可以配合各种预处理器进行构建

命名规则

在计算机科学中只有两件困难的事情：缓存失效和命名规范。—— Phil Karlton

camelCase: videoExampleComponent 【驼峰命名】
// 例：JS函数、变量
Prop
props: {
    bigProp: String
}

PascalCase: VideoExampleComponent 【大驼峰命名】
// 例：JS类
组件文件
components/
| - VideoList.vue
| - VideoItem.vue

kebab-case: video-example-component 【烤串命名】
// 例: HTML
组件名
Vue.component('video-item', {})
模板中使用
<!-- 在所有地方 -->
<video-item :big-prop='1'></video-item>