当前位置: 首页 > news >正文

Vue 简单入手

前端工程化(Front-end Engineering)指的是在前端开发中,通过一系列工具、流程和规范的整合,以提高开发效率、代码质量和可维护性的一种技术和实践方法。其核心目的是使得前端开发变得更高效、可扩展和可维护。

文章目录

  • 一、Vue 项目
    • 1.1、快速搭建一个 Vue 项目开发环境
      • 1. 安装 Node.js 和 npm
      • 2. 安装 Vue CLI
      • 3. 创建 Vue 项目
      • 4. 进入项目目录并启动开发服务器
      • 5. 编辑代码
      • 6. 安装其他依赖(可选)
    • 1.2、可视化创建Vue项目
      • 方式一:可视化软件
      • 方式二:图形化界面 Vue ui
    • 1.3、项目目录结构
  • 二、Vue 简易入门
    • Vue组件库Element
      • 1. 安装 Element UI (给项目)
      • 2. 在项目中引入 Element UI
      • 3. 使用 Element UI 组件
      • 4. 按需加载(可选)
      • 5. 自定义主题(可选)
      • 6. 更多配置和使用
    • 实战
  • 三、打包

一、Vue 项目

1.1、快速搭建一个 Vue 项目开发环境

1. 安装 Node.js 和 npm

Vue.js 基于 Node.js 开发,因此需要安装 Node.js(包括 npm,Node.js 的包管理器)。

  • 下载并安装 Node.js

    • 前往 Node.js 官方网站 下载并安装适合你操作系统的版本。建议选择 LTS(长期支持)版本。

    安装 Node.js
    在这里插入图片描述

  • 检查安装是否成功
    打开终端或命令行,执行以下命令:

    node -v
    npm -v
    

    如果能够显示版本号,说明 Node.js 和 npm 安装成功。
    在这里插入图片描述

2. 安装 Vue CLI

Vue CLI(Command Line Interface)是 Vue.js 官方提供的脚手架工具,用于快速生成项目模板和自动化任务。

  • 全局安装 Vue CLI
    在终端中执行以下命令安装 Vue CLI:

    npm install -g @vue/cli
    

    或者,如果你想使用更轻量级的 Vue CLI,使用以下命令:

    npm install -g @vue/cli-service-global
    
  • 检查 Vue CLI 是否安装成功
    执行以下命令:

    vue --version
    

    如果能够显示 Vue CLI 的版本号,说明安装成功。
    在这里插入图片描述

3. 创建 Vue 项目

使用 Vue CLI 创建一个新的 Vue 项目。

  • 创建一个新项目
    在命令行中执行以下命令:

    vue create my-project
    

    my-project 是你项目的名称,你可以根据需要替换为其他名称。

  • 选择项目配置
    执行上述命令后,Vue CLI 会引导你选择项目的配置。你可以选择默认配置,也可以根据需要手动选择功能(如 Babel、TypeScript、PWA 支持、Router、Vuex 等)。

  • 安装依赖
    Vue CLI 会根据你的选择安装相关依赖,过程可能需要几分钟时间。

4. 进入项目目录并启动开发服务器

  • 进入项目文件夹

    cd my-project
    
  • 启动开发服务器
    执行以下命令启动 Vue 项目的开发服务器:

    npm run serve
    
  • 访问项目
    默认情况下,Vue 项目会启动在 http://localhost:8080/,你可以在浏览器中打开这个地址查看你的 Vue 项目。

5. 编辑代码

  • 使用你喜欢的代码编辑器(如 VS Code)打开项目文件夹,开始编辑代码。Vue 项目结构通常包括:
    • src/:源代码文件夹,包含主要的 Vue 组件和应用逻辑。
    • public/:公共文件夹,包含 index.html 文件等静态资源。
    • package.json:项目的配置文件,定义了项目依赖和构建脚本。

6. 安装其他依赖(可选)

根据项目需求,你可能需要安装其他的依赖,如 Vue Router、Vuex 等。

  • 安装 Vue Router:

    npm install vue-router
    
  • 安装 Vuex:

    npm install vuex
    

1.2、可视化创建Vue项目

方式一:可视化软件

选择的方式是WebStrom或者是IDEA软件
在这里插入图片描述

选择版本
在这里插入图片描述
终端运行 npm run serve
在这里插入图片描述

方式二:图形化界面 Vue ui

在这里插入图片描述

在这里插入图片描述

1.3、项目目录结构

├── node_modules/        # 项目依赖的第三方模块
├── public/              # 公共文件夹,存放静态资源,如favicon和index.html等
│   ├── favicon.ico      # 网站图标
│   └── index.html       # 应用的入口HTML文件
├── src/                 # 源代码文件夹
│   ├── assets/          # 静态资源文件夹(图片、字体等),通过webpack引入
│   ├── components/      # Vue组件文件夹
│   ├── router/          # 路由文件夹,存放应用的路由配置
│   │   └── index.js     # 路由配置文件
│   ├── store/           # Vuex状态管理文件夹
│   │   └── index.js     # Vuex的状态配置文件
│   ├── views/           # 页面级别的组件,通常对应于路由的页面
│   ├── App.vue          # 根组件
│   └── main.js          # 入口文件,初始化Vue实例
├── .env                 # 环境变量配置文件
├── .gitignore           # Git忽略文件配置
├── babel.config.js      # Babel配置文件,用于转译JS代码
├── package.json         # 项目描述文件,包含项目依赖及脚本
└── vue.config.js        # Vue CLI的项目配置文件,webpack配置。

在这里插入图片描述

启动
在这里插入图片描述
或者cmd 输入npm run serve
在这里插入图片描述

配置端口
在这里插入图片描述

二、Vue 简易入门

在这里插入图片描述

Vue组件库Element

Vue组件库 Element(通常指的是 Element UI)是一个基于 Vue.js 的 UI 组件库,提供了丰富的组件和样式,可以帮助开发者快速构建界面。以下是如何在 Vue 项目中使用 Element UI 的步骤:

1. 安装 Element UI (给项目)

在 Vue 项目中安装 Element UI,可以通过 npm 或 yarn 进行安装。

# 使用 npm 安装
npm install element-ui --save# 或者使用 yarn 安装
yarn add element-ui

在这里插入图片描述

2. 在项目中引入 Element UI

在 Vue 项目的入口文件(通常是 main.jsmain.ts)中引入 Element UI。

// 引入 Vue 和 Element UI
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';// 使用 Element UI
Vue.use(ElementUI);// 创建 Vue 实例
new Vue({render: h => h(App),
}).$mount('#app');

3. 使用 Element UI 组件

Element UI 提供了丰富的组件,可以直接在你的 Vue 组件中使用。例如,使用 el-button 组件:

<template><div><el-button type="primary">Primary Button</el-button></div>
</template><script>
export default {name: 'App'
};
</script><style scoped>
/* 你可以自定义样式 */
</style>

4. 按需加载(可选)

如果你只想使用 Element UI 的某些组件,可以使用按需加载来减少打包体积。需要安装 babel-plugin-component 插件来实现按需加载。

# 安装 babel-plugin-component 插件
npm install babel-plugin-component --save-dev

然后,在 babel.config.js 文件中配置插件:

module.exports = {plugins: [['component',{libraryName: 'element-ui',styleLibraryName: 'theme-chalk'}]]
};

在组件中按需引入需要的 Element UI 组件:

import { Button } from 'element-ui';export default {components: {'el-button': Button}
};

5. 自定义主题(可选)

Element UI 支持自定义主题,可以通过修改 Less 变量或使用 Element-Plus 的自定义主题工具来实现。

6. 更多配置和使用

Element UI 提供了丰富的组件和功能,例如表单、弹框、表格、分页等,具体的使用方法和配置可以参考 Element UI 官方文档。

实战

复制其组件化代码
在这里插入图片描述
在这里插入图片描述

三、打包

NGINX

更改端口
在这里插入图片描述
然后把打包的Vue项目方进去,打包的是项目目录下有dist包
在这里插入图片描述
然后将其中内容复制进nginx目录下的html目录,再点击nginx.exe,最终在浏览器中访问
localhost:90出现
在这里插入图片描述

相关文章:

Vue 简单入手

前端工程化&#xff08;Front-end Engineering&#xff09;指的是在前端开发中&#xff0c;通过一系列工具、流程和规范的整合&#xff0c;以提高开发效率、代码质量和可维护性的一种技术和实践方法。其核心目的是使得前端开发变得更高效、可扩展和可维护。 文章目录 一、Vue 项…...

Github配置ssh key原理及操作步骤

文章目录 配置SSH第一步&#xff1a;检查本地主机是否已经存在ssh key第二步&#xff1a;生成ssh key第三步&#xff1a;获取ssh key公钥内容第四步&#xff1a;Github账号上添加公钥第五步&#xff1a;验证是否设置成功验证原理 往github上push项目的时候&#xff0c;如果走ht…...

大循环引起CPU负载过高

一、问题背景 环境&#xff1a;jdk1.8 tomcat7 在一次发布时&#xff0c;cpu出现负载过高&#xff0c;其负载突破200%&#xff0c;并且响应时间也大幅度超时。 二、问题分析 【1】发布前做过压测&#xff0c;并没有发现cpu异常升高的现象&#xff0c;所以其可能与生产环境的请…...

[Java]微服务治理

注册中心原理 注册中心可以统一管理项目中的所有服务 服务治理中的三个角色分别是什么? 服务提供者: 暴露服务接口&#xff0c;供其它服务调用服务消费者: 调用其它服务提供的接口注册中心: 记录并监控微服务各实例状态&#xff0c;推送服务变更信息 消费者如何知道提供者的…...

深入解析C语言中的extern关键字:语法、工作原理与高级应用技巧

引言 在C语言中&#xff0c;extern 关键字是一个强大的工具&#xff0c;用于声明外部变量和函数&#xff0c;使得这些变量和函数可以在多个源文件之间共享。理解 extern 的工作原理和最佳实践对于编写模块化、可维护的代码至关重要。本文将深入探讨 extern 关键字的各个方面&a…...

元器件封装

元器件封装类型 为什么越来越多用贴片元件&#xff0c;而不是插件元件 为什么越来越多用贴片元件&#xff0c;而不是插件元件 1.体积小、质量小、容易保存和运输&#xff1b; 2.容易焊接和拆卸。抗震效果好。 贴片元件不用过孔&#xff0c;用锡少。直插元件最麻烦的就是拆卸&a…...

状态空间方程离散化(Matlab符号函数)卡尔曼

// 卡尔曼滤波(4)&#xff1a;扩展卡尔曼滤波 - 知乎 // // matlab 连续系统状态空间表达式的离散化&状态转移矩阵求解_matlab状态方程离散化-CSDN博客 // // // %https://blog.csdn.net/weixin_44051006/article/details/107007916 clear all; clc; syms R1 R2 C1 C…...

软件设计师-计算机网络

OSI网络模型 物理层&#xff0c;提供原始物理通路。数据交换的单位是二进制&#xff0c;bit,比特流&#xff0c;设备有中继器&#xff0c;集线器数据连输层&#xff0c;把原始不可靠的物理层链接变成无差错的数据通道&#xff0c;并解决多用户竞争问题。传送单位是帧&#xff…...

SpringBoot操作Elasticsearch

SpringBoot操作Elasticsearch SpringData框架简化Java代码连接ES的过程 官网&#xff1a;https://spring.io/projects/spring-data/ 以上列表中都是Spring Data支持连接的数据源 添加依赖 已经添加过了 <!--添加SpringDataES的依赖--><dependency><groupId&…...

阿里云aliyun gradle安装包下载地址

阿里云 查找你要下载的安装包 macports-distfiles-gradle安装包下载_开源镜像站-阿里云 https://mirrors.aliyun.com/macports/distfiles/gradle/gradle-8.9-bin.zip 腾讯 https://mirrors.cloud.tencent.com/gradle/ https://mirrors.cloud.tencent.com/gradle/ https…...

【设计模式】创建型设计模式-工厂模式的实现

工厂模式实现 定义例子UML类图理解Java代码实现总结 定义 工厂方法模式定义了一个接口用于创建对象&#xff0c;该模式由子类决定实例化哪个工厂类。该模式把类的实例化推迟到了子类。 例子 通过一个公共的类方法来管理画图对象的创建。 UML类图理解 Java代码实现 定义接口…...

【分布式】CAP理论

CAP定理的核心要点&#xff1a; CAP定理指出&#xff0c;任何一个分布式系统在面对网络分区&#xff08;Partition&#xff09;的情况下&#xff0c;最多只能同时满足以下三个特性中的两个&#xff1a; 一致性&#xff08;Consistency&#xff09;&#xff1a; 所有节点在同一…...

市域社会治理现代化解决方案-2

1. 社会治理现代化背景 市域社会治理现代化旨在通过制度化、科学化、规范化、程序化和精细化的治理体系,实现社会治理能力的提升。该方案强调市一级的统筹协调和资源技术优势,以有效应对新型社会矛盾和风险挑战。 2. 社会治理面临的问题 当前社会治理在实践中存在诸多问题…...

谷歌浏览器的自动翻译功能如何开启

在当今全球化的网络环境中&#xff0c;能够流畅地浏览不同语言的网页是至关重要的。谷歌浏览器&#xff08;Google Chrome&#xff09;提供了一项强大的自动翻译功能&#xff0c;可以帮助用户轻松跨越语言障碍。本文将详细介绍如何开启和使用谷歌浏览器的自动翻译功能&#xff…...

Linux设置socks代理

公司里绝大多数主机已经禁止外网访问&#xff0c;仅保留一台主机设置socks作为代理服务器。如下为对socks这一概念的学习整理 什么是socks 是一种OSI模型下会话层的协议&#xff0c;位于表示层与传输层之间&#xff0c;作用是&#xff1a; exchanges network packets between…...

【ACM出版】第四届信号处理与通信技术国际学术会议(SPCT 2024)

& 第四届信号处理与通信技术国际学术会议&#xff08;SPCT 2024&#xff09; 2024 4th International Conference on Signal Processing and Communication Technology 2024年12月27-29日 中国深圳 www.icspct.com 第四届信号处理与通信技术国际学术会议&#x…...

蓝队技术学习

声明&#xff1a; 学习视频来自B站UP主 泷羽sec,如涉及侵权马上删除文 章。本文只涉及学习内容,其他的都与本人无关,切莫逾越法律红线, 否则后果自负 蓝队技术基础 1.企业网络架构&#xff1a;企业技术和信息团队的管理架构因企业而异。 CIO&#xff08;Chief Informa…...

openpyxl处理Excel模板,带格式拷贝行和数据填入

本文中用openpyxl操作Excell 模板,进行行拷贝和数据填充. 主要涉及单元格格式的拷贝,合并单元格的拷贝,行高和列宽的处理. 将模板表格分为三部分,头部,中间循环填充部分,尾部.模板参数中设置头部高度,循环部分高度,剩余为尾部. 拷贝时先拷贝填充头部 ,然后根据数据循环拷贝填…...

无法在带有 WHM/cPanel 的 Ubuntu 22.04 服务器上安装 PHP 7.x – 缺少软件包

问题 正在使用Ubuntu 22.04设置服务器&#xff0c;并使用WHM/cPanel管理多个帐户和配置。我的目标是在服务器上安装 PHP 7.4&#xff08;或更早的版本&#xff0c;如 PHP 7.3&#xff09;&#xff0c;因为我的一些应用程序与 PHP 8.x 不兼容。问题是&#xff0c;每当我尝试安装…...

数据结构-递归函数的调用栈过程

这道题考察的是递归函数的调用栈过程。 逐步分析程序的执行过程&#xff1a; main() 函数首先被调用&#xff0c;此时栈底是 main() 的信息。main() 函数调用 S(1)&#xff0c;此时 S(1) 的信息被压入栈中&#xff0c;位于 main() 之上。S(1) 函数内部调用 S(0)&#xff0c;因…...

鱼鱼刘怀旧手游|武林外传十年之约:同福灯火未熄,江湖老友归来

鱼鱼刘怀旧手游是国内人气老牌怀旧游戏专属平台&#xff0c;汇聚多款经典正版授权复刻手游&#xff0c;严格遵循端游原版设定匠心 1:1 还原复刻。本次特意为广大新手玩家准备了详细游戏攻略指南 ——岁月辗转&#xff0c;一晃十年。当年七侠镇的青石板还留着脚步&#xff0c;同…...

像素皇城灵蛇贺岁:5分钟部署你的赛博春联生成器(保姆级教程)

像素皇城灵蛇贺岁&#xff1a;5分钟部署你的赛博春联生成器&#xff08;保姆级教程&#xff09; 1. 前言&#xff1a;当传统春节遇上赛博美学 春节贴春联是延续千年的传统习俗&#xff0c;但你是否想过用AI技术为这个传统注入新的活力&#xff1f;今天我们要介绍的"像素…...

从零开始玩转translategemma-27b-it:Ollama环境搭建与提示词详解

从零开始玩转translategemma-27b-it&#xff1a;Ollama环境搭建与提示词详解 1. 环境准备与快速部署 想要体验强大的图文翻译能力&#xff0c;首先需要搭建好运行环境。translategemma-27b-it是一个基于Ollama部署的翻译模型&#xff0c;支持文本和图片的翻译功能。 1.1 系统…...

Ubuntu 虚拟机 Python3 + pip 完整安装教程

文章目录一、先检查系统是否自带 Python3二、安装 Python3 和 pip&#xff08;必装&#xff09;1. 更新软件源2. 安装 python3 和 pip3. 验证安装成功三、最简单的使用方法1. 运行 Python2. 用 pip 安装第三方库&#xff08;如 requests、numpy&#xff09;3. 运行 .py 文件四、…...

背包模型(求组合)?爬楼梯模型(求排列)?

普通背包模型和爬楼梯模型是非常相似的两个模型。 首先&#xff0c;我们定义一个**“抽象背包模型”**&#xff08;注意这个抽象背包模型不是前面提到的普通背包模型&#xff09;&#xff1a;给定 n 个物品&#xff0c;装满容积为 m 的背包&#xff0c;求方案数/具体方案/等等…...

告别台式机没麦克风的尴尬:用SonoBus+VB-Cable把手机秒变无线麦(保姆级配置)

台式机零成本无线麦克风方案&#xff1a;SonoBus与VB-Cable实战指南 你是否遇到过这样的尴尬时刻——台式电脑突然需要语音沟通&#xff0c;却发现没有麦克风&#xff1f;无论是紧急会议、游戏开黑还是直播互动&#xff0c;这种硬件缺失带来的困扰可能让你措手不及。本文将介绍…...

别再到处找转换工具了!用Audacity把WAV无损转成MP3,保姆级图文教程

音频处理新手指南&#xff1a;Audacity无损转换WAV到MP3的完整方案 你是否曾经下载了一段高质量录音&#xff0c;却发现文件体积大得惊人&#xff0c;根本无法通过邮件发送&#xff1f;或者尝试上传播客内容时&#xff0c;平台总是提示"文件格式不支持"&#xff1f;这…...

SEO 页面优化平台如何分析竞争对手的优化情况

SEO 页面优化平台如何分析竞争对手的优化情况 在当前竞争激烈的互联网环境中&#xff0c;SEO&#xff08;搜索引擎优化&#xff09;已经成为每个网站的生存和发展的关键。而在这其中&#xff0c;SEO 页面优化平台的角色尤为重要。通过对竞争对手的优化情况进行深入分析&#x…...

从LaMa到BrushNet:盘点图像修复(Inpainting)领域的关键模型与实战数据集

1. 图像修复技术的前世今生 第一次接触图像修复技术是在2015年&#xff0c;当时我正参与一个老照片修复项目。那些泛黄的老照片上布满了裂痕和污渍&#xff0c;传统Photoshop修复需要耗费数小时。直到发现深度学习可以自动完成这项任务&#xff0c;我才意识到这项技术将彻底改变…...

国行iPhone Siri功能意外上线又撤回,背后暗藏玄机

iPhone“Siri”变身“Apple智能与Siri”&#xff0c;意外功能短暂亮相3月31日凌晨&#xff0c;部分国行iPhone用户惊喜发现&#xff0c;手机设置中的“Siri”入口悄然变更为“Apple智能与Siri”&#xff0c;同时还短暂解锁了端侧模型下载及AI功能。不过&#xff0c;这一新鲜体验…...