懂个锤子Vue 项目工程化

Vue项目工程化:

前言: 紧跟前文,目标学习Vue2.0------3.0: 懂个锤子VueWebPack5.0WebPack高级进阶 涉及的技术栈...

当然既然学习框架的了,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。打开命令行工具,输入以下命令:

sh 复制代码
# 使用 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 运行,你可以在浏览器中打开这个地址查看项目;

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

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

txt 复制代码
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 元素和配置:

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

js 复制代码
//引入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 节点,

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

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

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

js 复制代码
/** 为什么这里的挂载是 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 文件的基本结构:

html 复制代码
<!-- 模板部分: -->
<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 servenpm run serve 启动开发服务器

验证Vue模板组件: 尝试修改 index.htmlApp.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 -Dnpm 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 等;

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

代码管理:

本代码已经使用Git进行管理: 公众号回复:Vue项目工程化

相关推荐
生椰拿铁You5 分钟前
09 —— Webpack搭建开发环境
前端·webpack·node.js
狸克先生16 分钟前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互
sinat_3842410919 分钟前
在有网络连接的机器上打包 electron 及其依赖项,在没有网络连接的机器上安装这些离线包
javascript·arcgis·electron
ac.char23 分钟前
在 Ubuntu 系统上安装 npm 环境以及 nvm(Node Version Manager)
linux·ubuntu·npm
baiduopenmap31 分钟前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish38 分钟前
小程序webview我爱死你了 小程序webview和H5通讯
前端
小牛itbull42 分钟前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress
请叫我欧皇i1 小时前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_1 小时前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
guokanglun1 小时前
空间数据存储格式GeoJSON
前端