工程化开发入门（Vue笔记三）

木木云1

已于 2024-07-01 13:38:00 修改

阅读量1.5k

点赞数 28

文章标签： vue.js 笔记前端

于 2024-03-23 04:44:35 首次发布

本文链接：https://blog.csdn.net/into1yyds/article/details/135330277

版权

一、工程化开发和脚手架 Vue CLI

1.1 开发Vue的两种方式

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

工程化开发模式优点：
提高编码效率，比如使用JS新语法、Less/Sass、Typescript等通过webpack都可以编译成浏览器识别的ES3/ES5/CSS等

工程化开发模式问题：

webpack配置不简单
雷同的基础配置
缺乏统一的标准

为了解决以上问题，所以我们需要一个工具，生成标准化的配置。

1.2 脚手架 Vue CLI

1.2.1 基本介绍

Vue CLI 是Vue官方提供的一个全局命令工具
可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【集成了webpack配置】

1.2.2 好处

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

1.2.3 使用步骤：

全局安装（只需安装一次即可） yarn global add @vue/cli 或者 npm i @vue/cli -g

打开Windows Powershell（Windows终端（管理员））

查看vue/cli版本，输入 vue --version
创建项目架子：vue create project-name(项目名不能使用中文)

进入项目需放入的文件夹
按住“shiftt”键，鼠标右键点击，选择“在此处打开 Powershell 窗口”
输入vue create project-name（项目名）
选择【Vue 2】的选项，回车

启动项目：yarn serve 或者 npm run serve(命令不固定，找package.json)

打开浏览器，搜索给出的网址，会出现一下界面
在这里插入图片描述

二、项目目录介绍和运行流程

2.1 项目目录介绍

在这里插入图片描述

index.html 文件中部分详细说明：

<body>
    <!-- 兼容：给不支持js的浏览器一个提示 -->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>

    <!-- Vue所管理的容器：将来创建结构动态渲染这个容器 -->
    <div id="app">
      <!-- 工程师开发模式中：不再直接编写模版语法，通过App.vue来提供结构渲染 -->
    </div>
    <!-- built files will be auto injected -->
  </body>

main,js 文件部分详细说明：

// 文件核心作用：导入App.vue,基于App.vue创建结构渲染index.html
// 1. 导入 Vue 核心包
import Vue from 'vue'

// 2. 导入 App.vue 根组件
import App from './App.vue'

// 提示文本：当前处于什么环境（生产环境 / 开发环境） false：没有提示 true：有提示
Vue.config.productionTip = false

// 3. Vue 实例化，提供render方法 -> 基于App.vue创建结构渲染index.html
new Vue({
  // el:'#app', 
  // 作用：和$mount('选择器')作用一致，用于指定Vue所管理的容器
  // render: h => h(App),
  // 上面为简写，下面是完整写法。
  render: (createElement) => {
    // 基于App创建元素结构
    return createElement(App)
  }
}).$mount('#app')

2.2 运行流程

按“Ctrl” + " ` "键，打开终端。
输入yarn serve，回车
在这里插入图片描述

三、组件化开发 & 根组件

3.1 组件化开发

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

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

组件分类：普通组件、根组件。

比如：下面这个页面，可以把所有的代码都写在一个页面中，但是这样显得代码比较混乱，难易维护。咱们可以按模块进行组件划分

在这里插入图片描述

3.2 根组件（App.vue）

3.2.1 根组件介绍

整个应用最上层的组件，包裹所有普通小组件

在这里插入图片描述

3.2.2 App.vue文件（单文件组件）三个组成部分

语法高亮插件
三部分构成
- template：结构（有且只能一个根元素）
- script: js逻辑
- style：样式 (可支持less，需要装包)
让组件支持less

（1） style标签，lang=“less” 开启less功能

（2）安装依赖包: yarn add less less-loader -D 或者npm i less less-loader -D

（3）重新运行
App.vue 示例：

<template>
  <div class="App">
    <div class="box" @click="fn"></div>
  </div>
</template>

<script>
// 导出的是当前组件的配置项
// 里面可以提供 data（特殊） methods 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: 400px;
  height: 400px;
  background-color: pink;
  .box {
    width: 100px;
    height: 100px;
    background-color: skyblue;
  }
}
</style>

3.2.3 普通组件的注册使用

组件注册的两种方式：

3.2.3.1 局部注册

特点：只能在注册的组件内使用
步骤：
（1）创建.vue文件（单文件组件，三个组成部分）
（2）在使用的组件内先导入再注册，最后使用
使用方式：
当成html标签使用即可 <组件名></组件名>
注意：
组件名规范 —> 大驼峰命名法，如 HmHeader

语法：

// 导入需要注册的组件
// import 组件对象 from '.vue文件路径'
import HmHeader from './components/HmHeader'

export default {  // 局部注册
  components: {
  // '组件名': 组件对象,
    HmHeader:HmHeaer,
  //  HmHeader
  }
}

实例一：在App.vue中使用组件的方式完成下面布局
在这里插入图片描述
第一步：

在 App.vue 中输入 <vue 之后按回车 -> 快速生成结构、样式和行为
编写大盒子

第二步：

在 “components” 文件夹中，新建以下三个组件。

HmHeader.vue:

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

<script>
export default {};
</script>

<style>
.hm-header {
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 30px;
  color: white;
  background-color: purple;
}
</style>

HmMain.vue:

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

<script>
export default {};
</script>

<style>
.hm-main {
  height: 400px;
  margin: 20px 0;
  line-height: 400px;
  text-align: center;
  font-size: 30px;
  color: white;
  background-color: green;
}
</style>

HmFooter.vue:

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

<script>
export default {};
</script>

<style>
.hm-footer {
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 30px;
  color: white;
  background-color: pink;
}
</style>

第三步：

导入、注册、使用

App.vue：

<template>
  <div class="App">
    <!-- 头部组件 -->
    <HmHeader></HmHeader>
    <!-- 主体组件 -->
    <HmMain></HmMain>
    <!-- 底部组件 -->
    <HmFooter></HmFooter>
  </div>
</template>

<script>
import HmFooter from "./components/HmFooter.vue";
import HmHeader from "./components/HmHeader.vue";
import HmMain from "./components/HmMain.vue";
export default {
  components: {
    // '组件名':组件对象
    /* HmHeader: HmHeader,
    HmMain: HmMain,
    HmFooter: HmFooter, */
    // 可省略为：
    HmHeader,
    HmMain,
    HmFooter,
  },
};
</script>

<style>
.App {
  width: 600px;
  height: 700px;
  background-color: skyblue;
  margin: auto;
  padding: 20px;
}
</style>

小方法：
点开设置

搜索“trigger on tab”，勾选

这样，在使用普通组件时，例如 <HmHeader></HmHeader> 就不用一个字母一个字母打了，直接输入 HmHeader + tab键即可。

3.2.3.2 全局注册

特点：所有组件内都能使用
步骤：
（1）创建.vue文件（三个组成部分）
（2）main.js中进行全局注册
使用方式：
当成html标签使用即可 <组件名></组件名>
注意：
组件名规范 —> 大驼峰命名法，如 HmHeader

语法： Vue.component('组件名', 组件对象)

// 导入需要全局注册的组件
import HmButton from './components/HmButton'

// 调用 Vue.component 进行全局注册
// Vue.component('组件名', 组件对象)
Vue.component('HmButton', HmButton)

实例二：在以下3个局部组件中是展示一个通用按钮
在这里插入图片描述

第一步：在上面“实例一”的基础上，在 “components” 文件夹中，新建HmButton.vue组件，并编写代码。

== HmButton.vue ==

<template>
  <button class="hm-button">通用按钮</button>
</template>

<script>
export default {};
</script>

<style>
.hm-button {
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  background-color: greenyellow;
  border-radius: 5px;
  border: none;
  vertical-align: middle;
  cursor: pointer;
}
</style>

第二步：

main.js 中进行导入、全局注册

main.js

import Vue from 'vue'
import App from './App.vue'
// 1. 编写导入的代码，往代码的顶部编写（规范）
import HmButton from './components/HmButton'  //HmButton.vue(加不加 .vue 均可)
Vue.config.productionTip = false

// 2. 进行全局注册 -> 在所有的组件范围内都能直接使用
// Vue.component('组件名', 组件对象)
Vue.component('HmButton', HmButton)

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

第三步：

分别在“实例一”中创建的三个组件基础上直接使用

HmHeader.vue 代码修改部分:

<template>
  <div class="hm-header">
    我是hm-header
    <HmButton></HmButton>
  </div>
</template>

HmMain.vue 代码修改部分:

<template>
  <div class="hm-main">
    我是hm-main
    <HmButton></HmButton>
  </div>
</template>

HmFooter.vue 代码修改部分:

<template>
  <div class="hm-footer">
    我是hm-footer
    <HmButton></HmButton>
  </div>
</template>

3.2.3.3 技巧

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

四、综合案例 - 小兔鲜首页

1.小兔鲜首页启动项目演示

在这里插入图片描述

2.小兔鲜组件拆分示意图

在这里插入图片描述

3.开发思路

分析页面，按模块拆分组件，搭架子 == (局部或全局注册)==
根据设计图，编写组件 html 结构 css 样式
拆分封装通用小组件 (局部或全局注册)

将来 → 通过 js 动态渲染，实现功能

注：
想做这个案例的可以去看黑马的B站视频 BV1HV4y1a7n4 P45和P46，这里就不写具体实现了。
准备代码视频有下载方法，也可以私信我。

木木云1

关注

28
点赞
踩
49

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

工程化开发入门（Vue笔记三）

工程化开发入门（Vue笔记三）

一、工程化开发和脚手架 Vue CLI

1.1 开发Vue的两种方式

1.2 脚手架 Vue CLI

1.2.1 基本介绍

1.2.2 好处

1.2.3 使用步骤：

二、项目目录介绍和运行流程

2.1 项目目录介绍

2.2 运行流程

三、组件化开发 & 根组件

3.1 组件化开发

3.2 根组件（App.vue）

3.2.1 根组件介绍

3.2.2 App.vue文件（单文件组件）三个组成部分

3.2.3 普通组件的注册使用

3.2.3.1 局部注册

3.2.3.2 全局注册

3.2.3.3 技巧

四、 综合案例 - 小兔鲜首页

1.小兔鲜首页启动项目演示

2.小兔鲜组件拆分示意图

3.开发思路

四、综合案例 - 小兔鲜首页