框架学习之 VUE （四）（关键词：脚手架 通用组件开发 单向数据流）利用实际做b站频道组件的开发过程，深度理解vue

1 使用脚手架 搭建工程

1）

mac 安装过程 出现错误 前面加上一个 sudo 就可
2）选择一个文件夹 打开终端 然后 创建 等待

3） 需要进行 3步选择 选择好之后等待搭建
4）启动服务 终端输入 npm run serve
5）然后 command 点击链接 跳转到网页

6） 后续对这个初始的状态进行修改就行

2 我们需要解释一下 安装的这些东西 都有什么作用 ？

2. 一个网页 后面 加/favicon.ico 可以得到它的 favicon.ico小图标
   
   3）
   
   4） App.vue 是 vue 的一个单组件的文件
   分为三个部分 template（写的是模板） script（导出的组件代码） style(样式)

5）我们将其他的删除 只保留 App.vue 和main.js
并且 改一下内容 使它最简单

5）-1 main.js

import Vue from 'vue'
import App from './App.vue'

// Vue.config.productionTip = false

new Vue({
   
  render: h => h(App),
}).$mount('#app')

5)-2 App.vue

<template>
  <div>
    <h1>第一个vue工程</h1>
  </div>
</template>

实现效果

6) package.json 里面重要的内容

3 通用组件开发

1
1）常规 情况 下 由于 node_moduls 比较大 一般会删除
2） 怎么恢复这个目录 ？ 到对应的文件夹打开终端 npm install 就会下载下来

2
结构是这样的

item.vue

<template>
  <!-- 这个地方写的是脚本 -->
  <div class="item">test</div>
</template>

<script>
// js脚本
export default {
   };
</script>

<style>
/* 样式 */
.item {
   
  cursor: pointer;
}
.item:hover {
   
  background: #f4f4f4;
}
</style>

App.vue

<template>
  <div>
    <!-- 使用这个东西 -->
    <Item />
  </