【vue教程】一. 环境搭建与代码规范配置

目录

    • 引言
    • Vue 框架概述
      • 起源与设计理念
      • 核心特性
      • 优势
    • Vue 开发环境搭建
      • 环境要求
      • 安装 Vue CLI
      • 创建 Vue 项目
      • 项目结构介绍
      • 运行与构建
    • 组件实例
      • 基础模板
      • 响应式更新
    • 代码规范
      • 为什么要使用代码规范
      • 在 Vue 项目中使用 ESLint 、Prettier
      • ESLint
        • 配置 ESLint
        • rules 自定义错误级别
      • Prettier
      • 集成到开发流程（husky）
    • 常用的 Vue 开发工具和插件
      • 代码编辑器
      • 浏览器开发者工具
      • 其他插件
    • 总结

引言

Vue.js 是一个构建用户界面的渐进式框架，它设计简洁，易于上手，同时具备强大的功能来支持复杂的单页应用开发。本篇文章将作为我们 Vue 探索之旅的开篇，带领您了解 Vue 的基本概念，搭建 Vue 开发环境，并为后续深入学习打下坚实的基础。

在这里插入图片描述

正文开始 ， 如果觉得文章对您有帮助，请帮我三连+订阅，谢谢💖💖💖

Vue 框架概述

起源与设计理念

Vue.js 由前谷歌工程师尤雨溪于 2014 年创建，其设计灵感来源于 Angular 和 Knockout.js，旨在提供一个轻量级、灵活且易于集成的前端解决方案。

核心特性

  • 响应式数据绑定：Vue 通过数据绑定机制，自动将数据状态的变更同步到视图层。
  • 组件系统：Vue 的组件化开发模式，使得代码更加模块化和可复用。
  • 虚拟 DOM：Vue 使用虚拟 DOM 来提高性能和效率，减少真实 DOM 操作。
  • 易于上手：Vue 渐进式框架（学习曲线相对平缓），适合初学者快速入门。

优势

  • 轻量级：Vue 的核心库只关注视图层，体积小，加载速度快。
  • 灵活性：Vue 可以轻松集成到任何项目中，无论是小型项目还是大型应用。
  • 生态系统：Vue 拥有丰富的生态系统，包括官方维护的路由器 Vue Router、状态管理库 Vuex、服务端渲染Vue SSR、静态站点生成GridSome 等。

Vue 开发环境搭建

环境要求

  • Node.js：Vue CLI（命令行工具）需要 Node.js 环境。(推荐使用 nvm 来对 Node 版本进行管理)
  • npm/yarn：包管理工具，用于安装 Vue CLI。(推荐使用 nrm 来对 npm 镜像仓库进行管理)

安装 Vue CLI

通过 npm 或 yarn 全局安装 Vue CLI：

npm install -g @vue/cli
# 或者
yarn global add @vue/cli

创建 Vue 项目

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

vue create my-vue-app

拉取 2.x 模板 (webpack 旧版本)

Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack vue2-templatecd vue2-template
npm install
npm run dev

image.png

按照提示选择预设或手动配置项目。项目的配置会被保存在 ~/.vuerc JSON 文件中

项目结构介绍

  • src/：源代码目录。
  • public/：静态资源目录。
  • node_modules/：依赖模块目录。
  • package.json：项目配置文件。

运行与构建

  • 开发模式：启动本地开发服务器，实时预览应用。
    npm run serve
  • 生产模式：构建生产环境的应用。
    npm run build

组件实例

基础模板

创建一个简单的 Vue 组件：

<template><div id="app"><h1>{{ message }}</h1></div>
</template><script>export default {data() {return {message: "Hello Vue!",};},};
</script><style scoped>h1 {color: #42b983;}
</style>

这个组件展示了 Vue 的数据绑定和样式作用域。

响应式更新

修改数据，观察视图的响应式更新：

// 在methods中添加一个方法
methods: {updateMessage() {this.message = 'Vue is awesome!';}
}

在模板中添加按钮，触发updateMessage方法：

<button @click="updateMessage">Update Message</button>

代码规范

为什么要使用代码规范

  1. 提高代码质量：ESLint 可以帮助开发者发现潜在的错误和代码异味，从而提高代码的质量和可维护性。

  2. 统一代码风格：Prettier 确保了代码风格的一致性，避免了因个人编码习惯不同而导致的代码风格差异。

  3. 节省时间：自动化的代码检查和格式化减少了人工审查代码的时间，提高了开发效率。

  4. 集成开发环境（IDE）支持：大多数现代 IDE 和编辑器都支持 ESLint 和 Prettier，提供了实时的代码检查和格式化功能。

  5. 团队协作：在团队项目中，ESLint 和 Prettier 帮助新成员快速适应项目的编码规范，减少了代码审查的工作量。

  6. 持续集成（CI）：ESLint 和 Prettier 可以集成到 CI 流程中，确保所有提交的代码都符合项目的标准。

  7. 避免代码冲突：Prettier 的自动格式化功能减少了因手动格式化引起的代码冲突。

在 Vue 项目中使用 ESLint 、Prettier

首先，你需要安装 ESLint、Prettier 以及它们对应的 Vue 插件和配置包。

npm install eslint prettier eslint-plugin-vue eslint-config-prettier --save-dev

ESLint

ESLint 是一个开源的 JavaScript 代码质量和代码风格检查工具。它主要用于识别和报告 JavaScript 代码中的模式，这些模式可以是错误、最佳实践的偏差，或者是代码风格问题。ESLint 非常灵活，允许开发者自定义规则来适应不同的开发需求和团队标准。

使用 ESLint 命令行工具创建一个配置文件：

npx eslint --init

这个命令会询问你一系列问题，帮助你生成一个.eslintrc配置文件。选择使用 Prettier 作为代码格式化工具，并选择 Vue 作为你的项目类型。

配置 ESLint

在.eslintrc文件中，你可以添加或修改规则，例如：

// https://eslint.org/docs/user-guide/configuringmodule.exports = {root: true,parserOptions: {parser: 'babel-eslint',},env: {browser: true,},extends: [// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.'plugin:vue/essential',// https://github.com/standard/standard/blob/master/docs/RULES-en.md'standard',],// required to lint *.vue filesplugins: ['vue'],// 添加自定义规则rules: {// allow async-await'generator-star-spacing': 'off',// allow debugger during development'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',},
}
rules 自定义错误级别
  • 错误（Errors） - 2
  • 警告（Warnings） - 1
  • 关闭（Off） - 0
// 示例
{"rules": {"no-undef": 2, // 错误级别"no-unused-vars": ["warn", { "args": "none" }], // 警告级别"semi": [0, "never"] // 关闭规则}
}

在 Vue 项目的package.json文件中，添加以下脚本：

"scripts": {"lint": "eslint --ext .js,.vue src  --fix",
}

Prettier

Prettier 是一个流行的代码格式化程序，它通过解析代码并重新打印来强制执行一致的样式规则。Prettier 的目标是减少在代码格式化上的争议，让开发者可以专注于代码本身的逻辑，而不是代码的外观。

创建一个.prettierrc文件来定义 Prettier 的配置选项：

{"semi": false,"singleQuote": true,"printWidth": 100,"tabWidth": 2,"useTabs": false,"endOfLine": "auto"
}

在 Vue 项目的package.json文件中，添加以下脚本：

"scripts": {"format": "prettier --write 'src/**/*.{js,vue}'"
}

集成到开发流程（husky）

  • 在提交前运行 lint 和 format：你可以使用 Husky 和 Lint-staged 来在提交前自动运行这些脚本。
    在这里插入图片描述
npm install husky lint-staged --save-dev

在package.json中添加：

"husky": {"hooks": {"pre-commit": "lint-staged"}
},
"lint-staged": {"**/*": "prettier --write --ignore-unknown", //格式化"src/**.{js,jsx,ts,tsx}": "eslint --ext .js,.jsx,.ts,.tsx", //对js文件检测
}
  • 在 IDE 中集成：确保你的 IDE 或编辑器（如 VSCode）安装了 ESLint 和 Prettier 插件，这样可以在编码时获得实时的代码质量反馈。

常用的 Vue 开发工具和插件

代码编辑器

  • VSCode：支持 Vue 的官方插件，提供语法高亮和智能提示。
  • WebStorm：专为 JavaScript 和 Vue 开发设计的 IDE。

浏览器开发者工具

  • Vue Devtools：Vue.js 开发者工具，用于在浏览器中检查 Vue 应用的状态。

其他插件

  • eslint-plugin-vue：为 Vue.js 应用程序提供额外的 ESLint 规则。
  • vue-loader：Vue 的模块加载器，用于构建单文件组件。

总结

通过本篇文章，我们对 Vue.js 有了一个基本的了解，并且成功搭建了 Vue 开发环境。在接下来的专栏文章中，我将深入探讨 Vue 的各个方面，包括组件化开发、路由管理、状态管理等。

欢迎在文章下方留言，分享学习 Vue 基础语法的心得体会，或提出在学习过程中遇到的问题。我将在后续的文章中提供解答和指导。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

推理的判定定理三种验证方式

推理的判定定理三种验证方式

1. 真值表技术 2. 公式转换法 3. 主析取范式法 参考&#xff1a;离散数学-电子科技大学
阅读更多...
LLM-阿里 DashVector + langchain self-querying retriever 优化 RAG 实践【Query 优化】

LLM-阿里 DashVector + langchain self-querying retriever 优化 RAG 实践【Query 优化】

文章目录 前言self querying 简介代码实现总结 前言 现在比较流行的 RAG 检索就是通过大模型 embedding 算法将数据嵌入向量数据库中&#xff0c;然后在将用户的查询向量化&#xff0c;从向量数据库中召回相似性数据&#xff0c;构造成 context template, 放到 LLM 中进行查询…
阅读更多...
python如何判断变量是否可迭代

python如何判断变量是否可迭代

python如何判断变量是否可迭代&#xff1f;方法如下&#xff1a; 方法一&#xff1a; 适用于python2和python3 >>> from collections import Iterable >>> isinstance("str", Iterable) True 方法二&#xff1a; 适用于python3 s "hello …
阅读更多...
InterSystems IRIS使用python pyodbc连接 windows环境,odbc驱动安装，DSN配置，数据源配置

InterSystems IRIS使用python pyodbc连接 windows环境,odbc驱动安装，DSN配置，数据源配置

一、创建的数据库和数据 SELECT 1SELECT $ZVERSIONCREATE TABLE MyApp.Person ( ID INT PRIMARY KEY, Name VARCHAR(100) NOT NULL, Age INT, Gender CHAR(1) );CREATE TABLE MyApp.Person2 ( ID INT PRIMARY KEY, Name VARCHAR(100) NOT NULL, Age INT, Gender CHA…
阅读更多...
Gil-Pelaez inversion

Gil-Pelaez inversion

一、特征函数 A.随即变量的特征函数定义与性质 B.特征函数与PDF的关系 傅里叶变换：C.特征函数与矩函数关系 二、Gil-Pelaez反演定理 输入功率 P i n P_{in}
阅读更多...
MYSQL 四、mysql进阶 9（数据库的设计规范）

MYSQL 四、mysql进阶 9（数据库的设计规范）

一、为什么需要数据库设计 二、范 式 2.1 范式简介 在关系型数据库中&#xff0c;关于数据表设计的基本原则、规则就称为范式。 可以理解为&#xff0c;一张数据表的设计结 构需要满足的某种设计标准的 级别 。要想设计一个结构合理的关系型数据库&#xff0c;必须满足一定的…
阅读更多...
13 IP层协议-网际控制报文协议ICMP

13 IP层协议-网际控制报文协议ICMP

计算机网络资料下载&#xff1a;CSDNhttps://mp.csdn.net/mp_blog/creation/editor/140148186 为了更有效的转发IP数据报和提高交付成果的机会&#xff0c;在网际层使用了网际控制报文协议ICMP。ICMP允许主机或路由器报告差错情况和提供有关异常情况的报告。ICMP不是高层协议数…
阅读更多...
Java面试八股之Redis集群Cluster

Java面试八股之Redis集群Cluster

Redis集群Cluster Redis Cluster是一种基于数据分片&#xff08;Sharding&#xff09;的分布式缓存和存储系统&#xff0c;它实现了数据的水平扩展、高可用性和自动故障转移。以下是对Redis Cluster模式详细实现流程的描述&#xff1a; 1. 初始化与配置 部署节点&#xff1a…
阅读更多...
C++ //练习 15.15 定义你自己的Disc_quote和Bulk_quote。

C++ //练习 15.15 定义你自己的Disc_quote和Bulk_quote。

C Primer&#xff08;第5版&#xff09; 练习 15.15 练习 15.15 定义你自己的Disc_quote和Bulk_quote。 环境&#xff1a;Linux Ubuntu&#xff08;云服务器&#xff09; 工具&#xff1a;vim 代码块 /******************************************************************…
阅读更多...
Python酷库之旅-第三方库Pandas(026)

Python酷库之旅-第三方库Pandas(026)

目录 一、用法精讲 65、pandas.bdate_range函数 65-1、语法 65-2、参数 65-3、功能 65-4、返回值 65-5、说明 65-6、用法 65-6-1、数据准备 65-6-2、代码示例 65-6-3、结果输出 66、pandas.period_range函数 66-1、语法 66-2、参数 66-3、功能 66-4、返回值 6…
阅读更多...
Gooxi受邀参加第三届中国数据中心服务器与设备峰会

Gooxi受邀参加第三届中国数据中心服务器与设备峰会

7月2-3日&#xff0c;第三届中国数据中心服务器与设备峰会在上海召开&#xff0c;作为国内最聚焦在服务器领域的专业峰会&#xff0c;吸引了来自全国的行业专家、服务器与机房设备厂家&#xff0c;企业IT用户&#xff0c;数据中心业主共同探讨AIGC时代下智算中心设备的设计之道…
阅读更多...
2024年最新最全面的Apifox使用-自动化测试

2024年最新最全面的Apifox使用-自动化测试

正文 编排测试场景运行测试持续集成查看测试结果 编排测试场景 新建测试场景 测试场景用于将多个接口有序地组合在一起运行&#xff0c;用于测试一个完整业务流程。 打开 Apifox 后点击左侧菜单栏中的“自动化测试”&#xff0c;点击左上角 号&#xff0c;选择所归属的目录…
阅读更多...
记录｜.NET上位机开发和PLC通信的实现

记录｜.NET上位机开发和PLC通信的实现

本文记录源自&#xff1a;B站视频 实验结果&#xff1a;跟视频做下来是没有问题的。能运行。 目录 前言一、项目Step1. 创建项目Step2. 创建动态图片展示Step3. 创建图片型按钮Step4. 创建下拉框Step1~4的效果展示Step5. 编程实体类操作类Main函数 Step1~5的效果展示Main函数 最…
阅读更多...
Binder框架(二) ServiceManager初始化

Binder框架(二) ServiceManager初始化

0、总体流程四部 开机由init进程解析init.rc文件启动servicemanager.rc。启动会调用main.cpp的main函数 main函数里面主要做了以下几件事 &#xff1a; 1.1 打开/dev/binder设备; 1.2 通过mmap映射设备的内存空间到ServiceManager进程中。 1.3 设置ServiceManager为context…
阅读更多...
气象水文耦合模式WRF-Hydro建模、编译及运行流程、依赖库准备、案例实践等

气象水文耦合模式WRF-Hydro建模、编译及运行流程、依赖库准备、案例实践等

目录 第一部分 WRF-Hydro模型功能及运行流程、依赖库准备 第二部分 WRF-Hydro模式编译、离线运行及案例实践 第三部分 结合多案例进行模式数据制备及实践应用 第四部分 模式耦合编译及运行、总结 更多应用 WRF-Hydro模型是一个分布式水文模型&#xff0c;‌它基于WRF‌陆面…
阅读更多...
数据库启动报ORA-600 6711故障分析处理---惜分飞

数据库启动报ORA-600 6711故障分析处理---惜分飞

几个月以前的一个数据库故障,今天拿出来在win上重新分析,数据库启动报ORA-600 6711错 C:\Users\XFF>SQLPLUS / AS SYSDBA SQL*Plus: Release 12.1.0.2.0 Production on 星期日 7月 14 16:17:32 2024 Copyright (c) 1982, 2014, Oracle. All rights reserved. 已连接到空…
阅读更多...
LabVIEW扬尘控制系统

LabVIEW扬尘控制系统

设计了一套基于LabVIEW的扬尘控制系统&#xff0c;通过监测TsP&#xff08;总悬浮颗粒物&#xff09;浓度、风向和摄像头视频&#xff0c;实现对环境的综合监控和扬尘控制。系统可以自动判断扬尘位置&#xff0c;并驱动抑尘设备进行抑尘。硬件选用NI cDAQ-9178数据采集模块、Om…
阅读更多...
linux高级编程（网络）（www，http，URL）

linux高级编程（网络）（www，http，URL）

数据的封包和拆包 封包&#xff1a; 应用层数据&#xff08;例如HTTP请求&#xff09;被传递给传输层。传输层&#xff08;TCP&#xff09;在数据前添加TCP头部&#xff08;包含端口号、序列号等&#xff09;。网络层&#xff08;IP&#xff09;在TCP段前添加IP头部&#xff…
阅读更多...
数据库：基本操作

数据库：基本操作

SQL struct query language 关系型数据库 非关系 芒果db ddl data defination language 建表 dml 新增 修改 删除一行 data modifty dql 查询 data query language 查询 select 数据库 sun solaris gnu 1、分类&#xff1a; 大型 中型 …
阅读更多...
Linux FFmpeg安装教程

Linux FFmpeg安装教程

大家好，我是爱编程的喵喵。双985硕士毕业，现担任全栈工程师一职，热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023