Vue 简单入手

news2024/11/24 7:03:42

前端工程化(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出现
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2239356.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Spingboot 定时任务与拦截器(详细解释)

在 boot 环境中&#xff0c;一般来说&#xff0c;要实现定时任务&#xff0c;我们有两中方案&#xff0c;一种是使用 Spring 自带的定时 任务处理器 Scheduled 注解&#xff0c;另一种就是使用第三方框架 Quartz &#xff0c; Spring Boot 源自 SpringSpringMVC &#…

无人机+无人车+无人狗+无人船:互通互联技术探索详解

关于“无人机无人车机器狗&#xff08;注&#xff1a;原文中的“无人狗”可能是一个笔误&#xff0c;因为在实际技术领域中&#xff0c;常用的是“机器狗”这一术语&#xff09;无人船”的互通互联技术&#xff0c;以下是对其的详细探索与解析&#xff1a; 一、系统架构与关键…

ima.copilot-腾讯智能工作台

一、产品描述 ima.copilot是腾讯推出的基于腾讯混元大模型技术的智能工作台&#xff0c;通过先进的人工智能技术&#xff0c;为用户提供了一个全新的搜读写体验&#xff0c;让知识管理变得更加智能和高效。它不仅是一个工具&#xff0c;更是一个智能的伙伴&#xff0c;能够帮助…

集合卡尔曼滤波(EnsembleKalmanFilter)的MATLAB例程(三维、二维)

本 M A T L A B MATLAB MATLAB代码实现了一个三维动态系统的集合卡尔曼滤波&#xff08;Ensemble Kalman Filter, EnKF&#xff09;示例。代码的主要目的是通过模拟真实状态和测量值&#xff0c;使用 EnKF 方法对动态系统状态进行估计。 文章目录 参数设置初始化真实状态定义状…

【动手学电机驱动】STM32-FOC(5)基于 IHM03 的无感 FOC 控制

STM32-FOC&#xff08;1&#xff09;STM32 电机控制的软件开发环境 STM32-FOC&#xff08;2&#xff09;STM32 导入和创建项目 STM32-FOC&#xff08;3&#xff09;STM32 三路互补 PWM 输出 STM32-FOC&#xff08;4&#xff09;IHM03 电机控制套件介绍 STM32-FOC&#xff08;5&…

光老化测试的三种试验:紫外老化、氙灯老化、碳弧灯老化

光老化是指材料在阳光照射下&#xff0c;由于紫外线、热和氧气的共同作用而发生的物理和化学变化。这种现象对纺织材料、塑料材料、涂料材料和橡胶材料的应用有显著影响。这些材料户外家具、汽车内饰和户外供水排水管道、建筑外墙涂料、汽车漆面、船舶涂料、汽车轮胎、密封件、…

VMWare安装包及安装过程

虚拟机基本使用 检查自己是否开启虚拟化 如果虚拟化没有开启&#xff0c;需要自行开启&#xff1a;百度加上自己电脑的品牌型号&#xff0c;进入BIOS界面开启 什么是虚拟机 所谓的虚拟机&#xff0c;就是在当前计算机系统中&#xff0c;又开启了一个虚拟系统 这个虚拟系统&…

消费的外部性

大学宿舍&#xff0c;遇到在你睡觉的时候开外放不戴耳机的室友&#xff0c;但中午12点&#xff0c;室友却在那拉上窗帘睡觉。能带饭吗&#xff1f;能代签到吗&#xff1f;能倒个垃圾吗&#xff1f;能带个外卖吗&#xff1f;自己永远麻烦别人&#xff0c;你要让他帮个忙又这推那…

易趋亮相2024 PMI项目管理大会

11月9日-10日&#xff0c;2024 PMI项目管理大会在广州圆满举办&#xff0c;项目管理行业优秀代表企业——易趋&#xff08;隶属深圳市蓝云软件有限公司&#xff09;&#xff0c;携最新产品和解决方案亮相本次展会。 (主论坛现场&#xff09; 本届大会以“‘项’有所成 行以致远…

边缘计算与推理算力:智能时代的加速引擎

在数据量爆炸性增长的今天&#xff0c;边缘计算与推理算力正成为推动智能应用的关键力量。智能家居、自动驾驶、工业4.0等领域正在逐步从传统的云端计算转向边缘计算&#xff0c;而推理算力的加入&#xff0c;为边缘计算提供了更强的数据处理能力和实时决策能力。本文将探讨边缘…

基于matlab的CNN食物识别分类系统,matlab深度学习分类,训练+数据集+界面

文章目录 前言&#x1f393;一、数据集准备&#x1f393;二、模型训练&#x1f340;&#x1f340;1.初始化&#x1f340;&#x1f340;2.加载数据集&#x1f340;&#x1f340;3.划分数据集&#xff0c;并保存到新的文件夹&#x1f340;&#x1f340;4.可视化数据集&#x1f34…

马斯克万卡集群AI数据中心引发的科技涟漪:智算数据中心挑战与机遇的全景洞察

一、AI 爆发重塑数据中心格局 随着AI 技术的迅猛发展&#xff0c;尤其是大模型的崛起&#xff0c;其对数据中心产生了极为深远的影响。大模型以其数以亿计甚至更多的参数和对海量数据的处理需求&#xff0c;成为了 AI 发展的核心驱动力之一&#xff0c;同时也为数据中心带来了…

移远通信亮相骁龙AI PC生态科技日,以领先的5G及Wi-Fi产品革新PC用户体验

PC作为人们学习、办公、娱乐的重要工具&#xff0c;已经深度融入我们的工作和生活。随着物联网技术的快速发展&#xff0c;以及人们对PC性能要求的逐步提高&#xff0c;AI PC成为了行业发展的重要趋势。 11月7-8日&#xff0c;骁龙AI PC生态科技日在深圳举办。作为高通骁龙的重…

Unity资源打包Addressable资源保存在项目中

怎么打包先看“Unity资源打包Addressable AA包” 其中遗留一个问题&#xff0c;下载下来的资源被保存在C盘中了&#xff0c;可不可以保存在项目中呢&#xff1f;可以。 新建了一个项目&#xff0c;路径与“Unity资源打包Addressable AA包”都不相同了 1.创建资源缓存路径 在…

postman变量和脚本功能介绍

1、基本概念——global、collection、environment 在postman中&#xff0c;为了更好的管理各类变量、测试环境以及脚本等&#xff0c;创建了一些概念&#xff0c;包括&#xff1a;globals、collection、environment。其实在postman中&#xff0c;最上层还有一个Workspaces的概…

为什么汽车电源正在用 48V 取代 12V

欧姆定律也有利于 48 伏电源 假设您需要为汽车的起动电机供电。可能存在以下静态和动态特征&#xff1a; 电源电压&#xff1a;12V 额定电流&#xff1a;40A 额定功率&#xff1a;480W 标称平均阻抗&#xff1a;0.3Ω 浪涌电流&#xff1a;150A 浪涌功率&#xff1a;1,8…

【webrtc】 RTP 中的 MID(Media Stream Identifier)

RTP 中的 MID(Media Stream Identifier) RID及其与MID的区别 cname与mid的对比【webrtc】CNAME 是rtprtcp中的Canonical Name(规范化名称) 同样都是RTP头部扩展: 基于mediasoup的最新的代码,学习,发现mid在创建RtpSendStream时是必须传递的参数: 例如 D:\XTRANS\soup\…

酷炫的鼠标移入效果(附源码!!)

预览效果 源码(htmljs部分) <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title>…

PHP和Python脚本的性能监测方案

目录 1. 说明 2. PHP脚本性能监测方案 2.1 安装xdebug 2.2 配置xdebug.ini 2.3 命令行与VS Code中使用 - 命令行 - VS Code 2.4 QCacheGrind 浏览 3. Python脚本性能监测方案 3.1 命令行 4. 工具 5.参考 1. 说明 获取我们的脚本程序运行时的指标&#xff0c;对分析…

【人工智能】10分钟解读-深入浅出大语言模型(LLM)——从ChatGPT到未来AI的演进

文章目录 一、前言二、GPT模型的发展历程2.1 自然语言处理的局限2.2 机器学习的崛起2.3 深度学习的兴起2.3.1 神经网络的训练2.3.2 神经网络面临的挑战 2.4 Transformer的革命性突破2.4.1 Transformer的核心组成2.4.2 Transformer的优势 2.5 GPT模型的诞生与发展2.5.1 GPT的核心…