VUE之旅—day3

news2025/11/4 6:11:45

工程化开发和脚手架Vue CLI

开发Vue的两种方式：

核心包创痛开发模式：基于html/css/js文件，直接引入核心包，开发Vue。
工程化开发模式：基于构建工具（例如：webpack）的环境中开发Vue。

源代码→自动化编译压缩组合→运行的代码
意思即为源代码（es6语法/typescript/less/sass）通过自动化编译压缩组合（webpack配置)转换成运行大代码（js/css)

存在的问题：
1. webpack配置不简单
2. 雷同基础配置
3. 缺乏统一标准
解决方案：需要一个工具，生成标准化的配置

Vue CLI基本介绍

VueCLI是Vue官方提供的一个全局命令工具。

可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【集成了webpack配置】

好处：

开箱即用，零配置
内置babel等工具
标准化

使用步骤：

1.全局安装（一次）：yarn global add @vue/cli或 npm i @vue/cli -g

2.查看Vue 版本：vue–version

3.创建项目架子：vuecreateproject-name（项目名-不能用中文)

4.启动项目：yarn serve 或 npm run serve（找package.json)

在这里插入图片描述

脚手架目录文件介绍&项目运行流程

在这里插入图片描述

组件化开发&根组件

组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为。

好处：便于维护，利于复用→提升开发效率

组件分类：普通组件、根组件
根组件：所有应用最上层组件，包裹所有普通小组件。

语法高亮插件 Vetur

一个根组件App.vue，包含三个部分：
- template结构（只能有一个根节点）
- style样式（可以支持less，需要安装包less和less-loader）
- script行为

在这里插入图片描述

<template>
  <div id="app" @click="fn()">
   我是一个盒子
   <div class="box"></div>
  </div>
</template>

<script>
// 导出的是当前组件的配置项
// 里面可以提供data(特殊) method computed watch 生命周期八大钩子
export default {
  created() {
  console.log("我是created");
  },
  methods: {
    fn() {
    alert('你好')
  }
 }
}
</script>

<style lang="less">
/*让style支持less
1.给style加上  lang="less"
2.安装依赖包 less 和 less-loader
  yarn add less less-loader -D(开发依赖)
*/
#app {
 width:300px;
 height: 300px;
 background-color: pink;
 .box{
  width:100px;
 height: 100px;
 background-color: rgb(145, 181, 209);
 }
}
</style>

普通组件的注册使用

组件注册的两种方式：

局部注册：只能在注册的组件内使用
- 创建.vue文件（单文件组件）
- 在使用的组件内导入，并局部注册 components:{组件名:组件对象}
全局注册：所有组件内都能使用
- 创建.vue文件（单文件组件）
- main.js内导入，并全局注册Vue.component(组件名,组件对象)

使用：当成HTML标签使用 <组件名></组件名>

注意：组件名规范→大驼峰命名法，如MyHeader

技巧：一般都用局部注册，如果发现确实是通用组件，再抽离到全局。

局部注册

在这里插入图片描述

App.vue

<template>
  <div class="vue">
    <!-- 头部组件 -->
    <MyHeader></MyHeader>
    <!-- 主体组件 -->
    <MyMain></MyMain>
    <!-- 尾部组件 -->
    <MyFooter></MyFooter>
  </div>
</template>

<script>
import MyFooter from './components/MyFooter.vue'
import MyHeader from './components/MyHeader.vue'
import MyMain from './components/MyMain.vue'
export default {
  components: {
  MyHeader,
  MyMain,
  MyFooter
}
}
</script>

<style>
.vue{
  width: 400px;
  height: 500px;
  background-color: pink;
  padding: 20px;
  font-size: 20px;
  margin: 0 auto;
  color: rgb(72, 77, 81);
}
</style>

components中的MyHeader.vue

<template>
  <div class="my-header">我是MyHeader</div>
</template>

<script>
export default {

}
</script>

<style>
.my-header{
   width: 100%;
  height: 80px;
  background-color: rgb(122, 186, 154);
  text-align: center;
  line-height: 80px;
}
</style>

components中的MyMain.vue

<template>
  <div class="my-main">我是MyMain</div>
</template>

<script>
export default {

}
</script>

<style>
.my-main{
 width: 100%;
  height: 300px;
  background-color: rgb(147, 198, 242);
  margin: 10px 0;
  text-align: center;
  line-height: 300px;
}
</style>

components中的MyFooter.vue

<template>
  <div class="my-footer">我是MyFooter</div>
</template>

<script>
export default {

}
</script>

<style>
.my-footer{
  width: 100%;
  height: 80px;
  background-color: rgb(242, 225, 147);
  text-align: center;
  line-height: 80px;
}
</style>