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:npminstall-g@vue/cli# 使用 Yarn:yarnglobaladd@vue/cli

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

创建项目脚手架：

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

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

NPM 启动运行项目：

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

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

#首先切换至项目目录:cdvue_demo1#启动命令:yarnservenpmrun 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 元素和配置：

<!DOCTYPEhtml><htmllang=""><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><linkrel="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><divid="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\其他依赖;importVuefrom'vue'importAppfrom'./App.vue'//设置当前生产\开发环境Vue.config.productionTip=false//关闭生产提示)//创建Vue实例并挂载至 index.htmlnewVue({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.htmlnewVue({el:'#app',//作用：和$mount('选择器')作用一致，用于指定Vue所管理容器render:(createElement)=>{//render: h => h(App) 基于App创建元素结构returncreateElement(App)}}).$mount('#app');

src/App.vue

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

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

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

<!-- 模板部分： --><template><divid="app"><imgalt="Vue logo"src="./assets/logo.png"><HelloWorldmsg="Welcome to Your Vue.js App"/></div></template><!-- 脚本部分： --><script>importHelloWorldfrom'./components/HelloWorld.vue'//引入并使用了组件HelloWorld;exportdefault{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 等；

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

代码管理：

本代码已经使用Git进行管理：