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。打开命令行工具,输入以下命令:
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 节点,h
是createElement
的简写是 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 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 等;
js
// 进行全局注册 → 在所有的组件范围内都能直接使用
// 编写导入的代码,往代码的顶部编写(规范)
import HmButton from './components/HmButton'
// Vue.component(组件名,组件对象)
Vue.component('HmButton', HmButton)
代码管理:
本代码已经使用Git进行管理: 公众号回复:Vue项目工程化