Vue工程化 ElementPlus

一、Vue工程化

1、环境准备

create-vue是Vue官方提供的最新的脚手架工具,用于快速生成一个工程化的Vue项目。

提供了以下功能:

  • 统一的目录结构
  • 本地调试
  • 热部署
  • 单元测试
  • 集成打包上线

依赖环境:Node JS 是一个免费、开源、跨平台的JavaScript运行时环境,他让开发人员能够创建服务器、web应用、命令行工具和脚本。

NodeJS 安装完毕后,会自动配置好环境变量,我们验证一下是否安装成功,通过: node -v

npm:是Node JS 的软件包管理器。 与maven比较相似

配置全局安装路径->使用 管理员身份 运行命令行,在命令行中,执行如下指令:

复制代码
npm config set prefix "D:\develop\NodeJS"

切换为淘宝镜像,加速下载:

复制代码
npm config set registry https://registry.npmmirror.com

2、Vue项目简介

创建一个工程化的Vue项目,执行命令: 会安装create-vue脚手架工具。

注:要在哪里创建就在哪里打开命令行工具并创建

复制代码
npm create vue@3.3.4

创建之后,起一个名字之后一直选no即可(回车默认no)。

之后按照绿色的字输入即可,即切换目录到vuesss 下载依赖。

之后就可以使用vs code 打开项目。

3、Vue项目开发流程

vite.config.js Vue项目的配置信息,如端口号 代理等

package.json Vue项目的配置文件,主要配置项目名,项目版本号,依赖的包,包的版本等

node_modules 下载的第三方的包资源,如依赖的第三方的JS

src 项目的源代码

-main.js 入口文件

-App.vue 根组件

-components 组件目录,存放通用组件

-assets 存放静态资源文件,图片、字体等

index.html 默认首页面 在其中引入了 main.js

main.js 是vue项目中的入口文件 在其中又导入了APP.vue 以及全局css main.css可以注释掉,不使用。

APP.vue vue项目的根组件,所有的数据都定义在其中 它与createApp({ }) { }内容对应

APP.vue中 <script></script>定义了JS,控制模板部分的数据和行为

<template></template> 模板部分,控制的是页面的结构(html)

<style></style>当前组件对应的css样式、

如果在别的地方写了其他.vue,可以在APP.vue中引入如下图

.vue是Vue项目的组件文件,在Vue项目中也称为单文件组件,会将JS,HTML,CSS封装在同一个文件里。

启动项目,执行下方内容,(或者在命令行输入npm run dev)在浏览器输入http://localhost:5173

4、API风格

Vue的组件有两种不同的风格:选项式API 和组合式API.

注意:

  • 组合式API需要在script标签中加setup ,是一个标识,告诉Vue需要进行一些处理,让我们可以更简洁的使用组合式API
  • 在组合式api中没有this,
  • count是响应式对象,是不能直接进行++的,在ref响应式对象中只有一个属性value,就是里面封装的值,所以应该操作value即count.value++
  • 在JS中需要使用.value,在模板中可以直接使用count

选择:

  • 使用vue构建完整的项目时即工程化vue时推荐使用组合式API。
  • 只是用vue核心包中的一些指令,推荐使用选项式API。

5、案例

项目中用到axios,即可安装axios的依赖:npm install axios

右键,点击在集成终端中打开,之后即可在下方输入命令

之后在项目中引入axios

复制代码
<script setup>
import {ref,onMounted} from "vue";
import axios from "axios";

...........

</script>

二、Element Plus

Element:是饿了么团队研发的,基于Vue3,面向设计师和开发者的组件库。

使用:

  • 创建vue项目
  • 参照官方文档,安装Element Plus组件库 : npm install element-plus@2.4.4 --save
  • main.js中引入Element Plus组件库
复制代码
  //引入ElementPlus
  import ElementPlus from 'element-plus'
  import 'element-plus/dist/index.css'

  //创建出的应用实例中要使用elementPlus
  createApp(App).use(ElementPlus).mount('#app') 
相关推荐
玄魂25 分钟前
一键生成国庆节祝福海报,给你的朋友圈上点颜色
前端·javascript·数据可视化
彼日花32 分钟前
前端新人30天:从手足无措到融入团队
前端·程序员
搞科研的小刘选手35 分钟前
【学术会议合集】2025-2026年地球科学/遥感方向会议征稿信息
大数据·前端·人工智能·自动化·制造·地球科学·遥感测绘
2501_9160088939 分钟前
JavaScript调试工具有哪些?常见问题与常用调试工具推荐
android·开发语言·javascript·小程序·uni-app·ecmascript·iphone
zero13_小葵司42 分钟前
在不同开发语言与场景下设计模式的使用
java·开发语言·javascript·设计模式·策略模式
蓝莓味的口香糖1 小时前
【CSS】flex布局
前端·css
Sapphire~1 小时前
重学JS-009 --- JavaScript算法与数据结构(九)Javascript 方法
javascript·数据结构·算法
彩旗工作室2 小时前
用 Supabase 打造统一认证中心:为多应用提供单点登录(SSO)
服务器·前端·数据库
EveryPossible2 小时前
第一版代码
前端·javascript·css
ObjectX前端实验室2 小时前
【图形编辑器架构】渲染层篇 — 从 React 到 Canvas 的声明式渲染实现
前端·计算机图形学·图形学