懂个锤子Vue 项目工程化

原创

Java_慈祥

发布于 2024-08-01 20:35:58

810

发布于 2024-08-01 20:35:58

文章被收录于专栏：Web前后端、全栈出发

Vue项目工程化：

前言： 紧跟前文，目标学习Vue2.0——3.0： 懂个锤子Vue、WebPack5.0、WebPack高级进阶涉及的技术栈…

当然既然学习框架的了，HTML+CSS+JS三件套必须的就不说了： JavaScript 快速入门

Vue.js 是一个渐进式的 JavaScript 框架，适用于构建用户界面：

它的设计理念是可以逐步采用，既可以作为一个库用于现有项目，也可以用于构建复杂的单页应用；

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

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

工程化开发模式问题： webpack配置不简单、雷同的基础配置缺乏统一的标准、很多企业都有自己的配置，非常混乱；

为了解决以上问题，所以我们需要一个工具，生成标准化的配置，VUE官方：发行的生态系统

Vue CLI：

Vue CLI 是Vue官方提供的一个全局命令工具 基于node

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

Vuex： Vuex 是 Vue.js 的官方状态管理库，

适用于管理大型应用程序中的状态。它作为一个集中式存储，管理应用程序中所有组件的状态

Vue Router： 是 Vue.js 的官方路由器，用于构建单页应用程序。它允许根据 URL 渲染不同的视图，而无需刷新页面；

Vue CLI 使用：

介绍 | Vue CLI 官方文档 Vue CLI是一个强大的命令行工具： 用于快速搭建 Vue.js 项目，以下是使用 Vue CLI 的基本步骤：

安装 Vue CLI

首先，你需要全局安装 Vue CLI。打开命令行工具，输入以下命令：

# 使用 npm:
npm install -g @vue/cli
# 使用 Yarn:
yarn global add @vue/cli

查看vue/cli版本： vue --version 验证是否安装成功✌🙂✌ 本次安装5.0.8版本;

创建项目脚手架：

创建项目架子： vue create 项目名 项目名不能使用中文)

注意： 创建项目名，不能使用中文、英文不能大写，回车：选择创建Vue版本模板吗，耐心等待一段时间开始创建…

NPM 启动运行项目：

进入项目目录后，查看package.json，其中scripts使用以下命令启动开发服务器：

默认情况下，开发服务器会在 http://localhost:8080 运行，你可以在浏览器中打开这个地址查看项目；

#首先切换至项目目录:
	cd vue_demo1
#启动命令:
 	yarn serve
 	npm run serve
#命令不固定,部分企业会修改 package.json)

项目目录介绍和运行流程：

node_modules/          # 存放项目的第三方依赖包
public/                # 存放外部静态文件
  ├── favicon.ioc      # 网站图标
  ├── index.html       # 项目的入口 HTML 文件
src/                   # 项目的主要源码目录
  ├── assets/          # 存放内部静态文件，如图片和字体图标
  ├── components/      # 存放项目的公共组件
    └── HelloWorld.vue # 默认组件页面
  ├── App.vue          # 项目的主组件——>项目运行看到的内容就在这里编写
  └── main.js          # 项目的入口文件，配置全局组件、插件、路由和 Vuex 等
.gitignore             # 配置 Git 忽略的文件和目录
babel.config.js        # Babel 配置文件，确保 JavaScript 代码兼容所有浏览器
jsconfig.json		   # js配置文件
package.json           # 记录项目需要的依赖包及版本
README.md              # 项目的说明文件，描述项目的主要信息
yarn.lock			   # yarn锁文件，由yarn自动生成的，锁定安装版本
vue.config.js          # 项目的基础配置文件，配置代理服务器、打包输出路径等

个人建议： 实际开发阶段，一个项目建议直接使用工具vscode... 打开，

不要一个文件夹中存放多个项目，实在是不方便管理，😢😢

index.html

位置： public/index.html 这是项目的入口 HTML 文件，

所有的 Vue 组件最终都会被挂载到这个文件中的一个 div 元素上，你可以在这里添加一些全局的 HTML 元素和配置：

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <!-- 兼容：给不支持js的浏览器一个提示 -->
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
     <!-- Vue所管理的容器：将来创建结构动态渲染这个容器 -->
    <!-- 工程化开发模式中：这里不再直接编写模板语法，通过 App.vue 提供结构渲染 -->
  </body>
</html>

src/main.js

位置： src/main.js 这是项目的入口 JavaScript 文件，它主要用于初始化 Vue 实例，配置全局组件、插件、路由和 Vuex 等：

文件核心作用： 导入vue、App.vue 依赖，创建Vue 实例 并挂载结构渲染index.html

//引入Vue\其他依赖;
import Vue from 'vue'
import App from './App.vue'

//设置当前生产\开发环境
Vue.config.productionTip = false  //关闭生产提示)

//创建Vue实例并挂载至 index.html
new Vue({
  render: h => h(App),
}).$mount('#app');                //挂载至 index.html 中的vue容器

为什么这里的挂载是 new Vue({}).$mount('');：

render: h => h(App)：在 Vue.js 中，render 函数用于生成虚拟 DOM 节点，

h 是 createElement 的简写是 Vue 提供的一个函数，用于创建虚拟节点VNode

这段代码的意思是使用 h 函数创建一个 App 组件的虚拟节点，并将其渲染到页面上

$mount('') 于 el 本质一样，用于手动挂载 Vue 实例，不过框架中更多使用此类写法；上述Vue实例化\挂载可修改：

/** 为什么这里的挂载是 new Vue({})..$mount(''); */
//Vue实例化，提供render方法 → 基于App.vue创建结构渲染index.html
new Vue({
  el: '#app',                   //作用：和$mount('选择器')作用一致，用于指定Vue所管理容器
  render: (createElement) => {  //render: h => h(App) 基于App创建元素结构
    return createElement(App)
  }
}).$mount('#app');

src/App.vue

位置： src/App.vue 这是项目的主组件，所有的子组件都会在这个主组件中被引用和渲染；

什么是.Vue文件： .vue 文件是 Vue.js 框架中使用的一种文件格式，称为单文件组件Single-File Components 简称 SFC

它将组件的模板、逻辑和样式封装在一个文件中，便于组织和管理代码，以下是 .vue 文件的基本结构：

<!-- 模板部分： -->
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<!-- 脚本部分： -->
<script>
import HelloWorld from './components/HelloWorld.vue'  //引入并使用了组件HelloWorld;

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<!-- 样式部分： -->
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

<template> 标签包含了组件的 HTML 模板，可以使用 Vue.js 的模板语法
<script> 标签包含了组件的 JavaScript 逻辑，定义数据、方法和生命周期钩子等
<style> 标签包含了组件的 CSS 样式，使用 scoped 属性时，样式只应用于当前组件，避免样式冲突

Vue CLI 运行流程：

使用 vue serve 或 npm run serve 启动开发服务器

验证Vue模板组件： 尝试修改 index.html、App.vue——>HelloWorld.vue 模板，验证效果；

组件开发：

Vue 组件化开发是 Vue.js 框架的核心概念之一：

组件化开发可以将用户界面划分为独立的、可重用的部分，每个部分可以单独开发和维护

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

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

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

根组件：

根组件： 是整个应用的起点，它是 Vue 实例化时传递的第一个组件，

通常是 App.vue，包含模板、脚本和样式，它被挂载到 index.html 中的DOM 元素上；

它的作用类似于 HTML 文档中的 <html> 标签，必须存在，且是其他所有组件的父组件；

全局状态管理： 根组件通常会引入全局状态管理如 Vuex）和路由配置如 Vue Router），并将其传递给子组件；

普通组件：

普通组件： 它们可以是页面的一部分或独立的功能模块，普通组件可以嵌套在根组件或其他普通组件中，形成组件树；

组件的结构：

HelloWorld.vue 就是普通组件的一种，参考它的结构来学习吧🙂 组件是由三部分构成：

模板结构 Template： 定义组件的 HTML 结构、使用 Vue 的模板语法来绑定数据和事件，有且只能一个根元素；
脚本结构 Script： 定义组件的逻辑，包括数据、方法、计算属性和生命周期钩子等；
样式结构 Style： 定义组件的样式，可支持less，需要装包；

组件名规范 → 大驼峰命名法，如：HmHeader、使用：当成 html 标签使用 <组件名></组件名>

组件支持：Less：

<style>标签，开启less功能：<style lang='less' > </style>
安装Less依赖包： yarn add less less-loader -D 或 npm i less less-loader -D

安装插件： 使用vs-code 工具与开发，为了更方便编写模板建议安装插件：Vetur 支持语法高亮插件、组件模板生成；

普通组件局部注册：

局部组件： 是在另一个组件的模板中注册的组件，这意味着它们只能在包含它们的组件及其子组件中使用，

局部组件通常用于封装和组织相关的功能模块，使得组件更具可重用性和独立性；

分析： 上述案例，在App.vue 根组件中，引入了三个HmHeader\HmMain\HmFooter 局部组件

它们都有各自的： 模板\脚本\样式 互不干扰，且App.vue 也有自己全局的配置；

注意： 引入组件，声明了就必须要使用，不然会抛出异常；

普通组件全局注册：

全局组件： 全局组件是==在 Vue 应用的根实例中注册的组件==

这意味着它们可以在整个应用的任何地方使用，包括其他组件的模板中

全局组件通常用于在整个应用中共享的通用组件，例如导航栏、页脚或弹窗；

Demo：给上述案例每个局部模块中添加一个全局组件：<Button>按钮</Button>

首先，创建.vue文件；
之后，在main.js中进行全局注册：

先导入、再注册、最后在需要使用的组件中引用；

因为vs-code 一些插件会自动补全代码，但并不影响；

main.JS 项目的入口文件，配置全局组件、插件、路由和 Vuex 等；

// 进行全局注册 → 在所有的组件范围内都能直接使用
// 编写导入的代码，往代码的顶部编写(规范)
import HmButton from './components/HmButton'
// Vue.component(组件名，组件对象)
Vue.component('HmButton', HmButton)