【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;离散数学-电子科技大学
阅读更多...
数据结构第21节 归并排序以及优化方案

数据结构第21节 归并排序以及优化方案

归并排序&#xff08;Merge Sort&#xff09;是一种分治策略的排序算法。它将一个大数组分成两个子数组&#xff0c;递归地对它们进行排序&#xff0c;然后将排序后的子数组合并成一个有序数组。 Java代码实现&#xff1a; public class MergeSort {public static void main(…
阅读更多...
4.Flink程序编程规范

4.Flink程序编程规范

目录 概述 概述 Flink程序编程规范 官网文档速递 1.Obtain an execution environment 获取执行环境2.Load/create the initial data 加载/创建初始数据 > 数据接入3.Specify transformations on this data 针对数据做处理操作 > 数据处理4.Specify where to put the re…
阅读更多...
Java-使用Redisson实现的分布式锁

Java-使用Redisson实现的分布式锁

在使用Redisson实现的分布式锁时&#xff0c;可以很容易地在Java中加入多线程代码来模拟并发环境下 的锁行为。以下是一个使用Redisson的RLock接口创建分布式锁并在多线程环境中使用的示例代 码&#xff1a; 首先&#xff0c;需要在项目中添加Redisson的依赖。如果你使用Mav…
阅读更多...
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}
阅读更多...
八、Docker版MySQL主从复制

八、Docker版MySQL主从复制

目录 一、MySQL主从复制原理就不做讲解了&#xff0c;详情请查看MySQL专栏 二、主从复制搭建步骤 1、新建主服务器容器实例3307 2、进入/usr/mysql/mysql-master/conf目录下新建my.cnf 3、修改完配置后&#xff0c;重启master实例 4、进入mysql-master容器 5、在mysql-ma…
阅读更多...
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后端实习一面

携程Java后端实习一面

携程的面试比较注重八股文和项目&#xff0c;算法相关没有字节腾讯严厉&#xff0c;大家参加携程的技术岗面试需要重视八股文和项目细节&#xff0c;要学会深挖项目&#xff0c;希望大家早日oc&#x1f60a;&#x1f44d; HashMap底层原理&#xff0c;扩容机制&#xff0c;从并…
阅读更多...
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‌陆面…
阅读更多...
最新文章

Copyright @ 2022~2023