创建vue工程、Vue项目的目录结构、Vue项目-启动、API风格

环境准备

  • 介绍:create-vue是Vue官方提供的最新的脚手架工具,用于快速生成一个工程化的Vue项目
  • create-vue提供如下功能:
    统一的目录结构
    本地调试
    热部署
    单元测试
    集成打包
  • 依赖环境:NodeJS
    安装NodeJS

一、 创建vue工程

npm 类似maven
npm init vue@latest
根据命令提示
cd 项目名
npm install
然后用vscode打开项目

二、Vue项目的目录结构

在这里插入图片描述
vite.config.js :Vue项目的配置信息,如:端口号等
package.json :等同于maven里的pom文件,配置文件,包括项目名、版本号、依赖包、版本等。
package-lock.json :项目配置文件(不需要修改)
index.html :默认首页
public: 公共资源
node_modules :下载的第三方包存在目录
src:源代码存放目录
在这里插入图片描述
src下面又有四个目录
assets : 静态资源目录、存放图片、字体
components:组件目录、存放通用组件
App.vue:根组件
main.js :入口文件

三、Vue项目-启动

执行命令 npm run dev ,就可以启动项目
然后输入http://127.0.0.1:5137
重点编写Vue文件
主要包含三部分内容

控制模板的数据及行为
<script setup>import {ref} from 'vue';//调用ref函数,定义响应式数据const msg = ref('西安');
</script>
模板部分,由它生成HTML
<template><h1>{{ msg }}</h1>
</template>
当前组件的CSS样式
<style scoped>/* 样式 */h1{color: red;}
</style>

Vue项目的入口文件,是什么
main.js
Vue的单文件组件中包含那些

三个部分

<script setup>
</script><template><h1>{{ msg }}</h1>
</template>
<style scoped>/* 样式 */h1{color: red;}
</style>

四、API风格

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

选项式API,选项式API,可以用包含多个选项的对象来描述组件的逻辑,如:data,methods,mounted等。
<script>export default {data(){ //声明响应式对象return {count: 0}},methods: { //声明方法,可以通过组件实例访问increment: function(){this.count++ ;}},mounted(){ //声明钩子函数console.log('Vue mounted ...');}}
</script>
<template><button @click="increment">count:{{ count }}</button>
</template>
组合式API
<script setup>import { onMounted, ref } from 'vue’; const count = ref(0);  //声明响应式变量function increment(){  //声明函数count.value++;}    onMounted(()=>{ //声明钩子函数console.log('Vue Mounted ...);})
</script>
<template><button @click="increment">count:{{ count }}</button>
</template>

Api.vue

<script setup>import {ref,onMounted} from 'vue'//声明响应式数据 ref  响应式对象有一个内部的属性valueconst count = ref(0); //在组合式api中,一般需要把数据定义为响应式数据//const count=0;//声明函数function increment(){count.value++;}//声明钩子函数 onMountedonMounted(()=>{console.log('vue 已经挂载完毕了...');});
</script><template><!-- 写html元素 --><button @click="increment">count: {{ count }}</button>
</template>

然后把这个Api.vue 在App.vue中引入

<!-- <script>//写数据export default{data(){return {msg:'上海'}}}
</script> -->
<script setup>import {ref} from 'vue';//调用ref函数,定义响应式数据const msg = ref('西安');//导入 Api.vue文件import ApiVue from './Api.vue'//导入Article.vue文件import ArticleVue from './Article.vue'
</script><template><!-- html --><!-- <h1>北京</h1> --><!-- <h1>{{ msg }}</h1><br><ApiVue/> --><ArticleVue/>
</template><style scoped>/* 样式 */h1{color: red;}
</style>

组合式Api,一般需要把数据定义为响应式数据
const count = ref(0)

Vue的组件书写分为几种风格
选项式API
组合式API,推荐使用组合式API,用起来更加灵活

Element Plus
Element :是饿了么团队研发的,基于Vue3,面向设计师和开发者的组件库。
组件:组成网页的部件,例如 超链接、按钮、图片、表格、表单、分页条等
Element Plus快速入门
准备工作:
1、创建一个工程的vue项目
2、参照官方文档,安装Element Plus组件库:
npm install element-plus --save
3、main.js中引入Element Plus 组件库,参考官方文档。

import { createApp } from 'vue'     //导入vue
import ElementPlus from 'element-plus'     //导入element-plus
import 'element-plus/dist/index.css'		 //导入element-plus的样式
import App from './App.vue'                   //导入app.vue
const app = createApp(App)                 //创建应用实例
app.use(ElementPlus)					//使用element-plus
app.mount('#app')						//控制html元素

4、制作组件:
访问Element官方文档,复制组件代码,调整
常用组件-分页条
常用组件-表格组件
常用组件-表单组件
常用组件-Card卡片

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

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

相关文章

自定义横向思维导图,横向组织架构图,横向树图。可以自定义节点颜色,样式,还可以导出为图片

最近公司设计要求根据目录结构&#xff0c;横向展示。所以做了一个横向的思维导图&#xff0c;横向的树结构&#xff0c;横向的组织架构图&#xff0c;可以自定义节点颜色&#xff0c;样式&#xff0c;还可以导出为图片 话不多说&#xff0c;直接上图片&#xff0c;这个就是一…

使用redis优化纯真IP库访问

每次请求都需要加载10m的纯真IP qqwry.dat 文件&#xff0c;自己测试不会发现问题&#xff0c;但如果访问量上去了&#xff0c;会影响每次请求的相应效率&#xff0c;并且会消耗一定的io读写&#xff0c;故打算优化 优化方案 每个IP区间之间不存在交集&#xff0c;每个查找只要…

【已验证】debian12 更换国内源

1. 编辑 /etc/apt/sources.list 文件 sudo nano /etc/apt/sources.list2. 清空 sources.list 文件里的内容&#xff0c;讲下面内容拷贝到 sources.list deb http://mirrors.163.com/debian/ bookworm main contrib non-free non-free-firmware deb http://mirrors.163.com/de…

Nginx 代理与 Proxy 插件整合的最佳实践

推荐一个AI网站&#xff0c;免费使用豆包AI模型&#xff0c;快去白嫖&#x1f449;海鲸AI 写在前面 本文将介绍 Nginx 的正向代理配置以及如何与 Proxy 插件进行整合。正向代理是一种代理服务器&#xff0c;它代表客户端向目标服务器发送请求&#xff0c;并将响应返回给客户端…

【Linux】- HBase集群部署 [19]

简介 apache HBase是一种分布式、可扩展、支持海量数据存储的 NoSQL 数据库。 和Redis一样&#xff0c;HBase是一款KeyValue型存储的数据库。 不过和Redis涉及方向不同 Redis设计为少量数据&#xff0c;超快检索HBase设计为海量数据&#xff0c;快速检索 HBase在大数据邻域…

【python】python省市水资源数据分析可视化(源码+数据)【独一无二】

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…

2024年失业率狂飙18.1%,史上最难就业季即将来临,该如何逆袭?_2024年失业潮

【2024年被称为最难就业年&#xff0c;1158万大学生面临难题】 距离2024年毕业季还剩不到4个月&#xff0c;毕业学员将面临空前严峻的就业压力&#xff01;具国家统 计局的数据显示&#xff0c;1-2月份&#xff0c;16至24岁年轻人的失业率飙到18.1%&#xff0c;也就是说&…

JS之Reduce

reduce 是 JavaScript 中 Array 对象的一个方法&#xff0c;用于对数组中的每个元素执行一个提供的函数&#xff08;称为 reducer 函数&#xff09;&#xff0c;并将其结果汇总为单个返回值。它是一种高阶函数&#xff0c;可以用于数组的累积操作&#xff0c;例如求和、计算乘积…

微服务:利用RestTemplate实现远程调用

打算系统学习一下微服务知识&#xff0c;从今天开始记录。 远程调用 调用order接口&#xff0c;查询。 由于实现还未封装用户信息&#xff0c;所以为null。 下面我们来使用远程调用用户服务的接口&#xff0c;然后封装一下用户信息返回即可。 流程图 配置类中注入RestTe…

文心一言 VS 讯飞星火 VS chatgpt (265)-- 算法导论20.1 4题

四、假设不使用一棵叠加的度为 u \sqrt{u} u ​ 的树&#xff0c;而是使用一棵叠加的度为 u 1 k u^{\frac{1}{k}} uk1​的树&#xff0c;这里 k 是大于 1 的常数&#xff0c;则这样的一棵树的高度是多少&#xff1f;又每个操作将需要多长时间&#xff1f;如果要写代码&#xf…

模板中的右值引用(万能引用)、引用折叠与完美转发

模板中的右值引用&#xff08;万能引用&#xff09;、引用折叠与完美转发 文章目录 模板中的右值引用&#xff08;万能引用&#xff09;、引用折叠与完美转发一、万能引用与引用折叠1. 模板中的右值引用2. 自动类型推导(auto)与万能引用3. 引用折叠与万能引用4. lambda表达式捕…

数据可视化第十天(爬虫爬取某瓣星际穿越电影评论,并且用词云图找出关键词)

开头提醒 本次爬取的是用户评论&#xff0c;只供学习使用&#xff0c;不会进行数据的传播。希望大家合法利用爬虫。 获得数据 #总程序 import requests from fake_useragent import UserAgent import timefuUserAgent()headers{User-Agent:fu.random }page_listrange(0,10) …

音视频入门基础:像素格式专题(3)——FFmpeg源码解析BMP格式图片的底层实现原理

音视频入门基础&#xff1a;像素格式专题系列文章&#xff1a; 音视频入门基础&#xff1a;像素格式专题&#xff08;1&#xff09;——RGB简介 音视频入门基础&#xff1a;像素格式专题&#xff08;2&#xff09;——不通过第三方库将RGB24格式视频转换为BMP格式图片 音视频…

创建一个vue3项目

## 1.创建命令 npm create vuelatest ## 2.具体配置 ## 配置项目名称 √ Project name: vue3_test ## 是否添加TypeScript支持 √ Add TypeScript? Yes ## 是否添加JSX支持 √ Add JSX Support? No ## 是否添加路由环境 √ Add Vue Router for Single Page Application de…

人工智能+量子计算:飞跃现实边界还是科技幻想?

人工智能量子计算&#xff0c;这是一种可能改变世界的伙伴关系。 在科技的前沿&#xff0c;两大革命性技术——人工智能&#xff08;AI&#xff09;和量子计算——正站在合作的十字路口。人工智能&#xff0c;以其强大的数据分析能力和模式识别&#xff0c;正在改变着我们生活…

传感器通过Profinet转Modbus网关与PLC通讯在生产线的应用

Profinet转Modbus&#xff08;XD-MDPN100/300&#xff09;网关可视作一座桥梁&#xff0c;能够实现Profinet协议与Modbus协议相互转换&#xff0c;支持Modbus RTU主站/从站&#xff0c;并且Profinet转Modbus网关设备自带网口和串口&#xff0c;既可以实现协议的转换&#xff0c…

前端基础入门三大核心之HTML篇:探索WebAssembly —— 开启网页高性能应用新时代

前端基础入门三大核心之HTML篇&#xff1a;探索WebAssembly —— 开启网页高性能应用新时代 WebAssembly基础概念工作原理概览WebAssembly实战示例基本使用 安全性与性能优化防范漏洞实践实际工作中的使用技巧结语与讨论 随着Web技术的飞速发展&#xff0c;前端开发者面临越来越…

全文检索ElasticSearch简介

1 全文检索 1.1 什么是全文检索 全文检索是一种通过对文本内容进行全面索引和搜索的技术。它可以快速地在大量文本数据中查找包含特定关键词或短语的文档,并返回相关的搜索结果。全文检索广泛应用于各种信息管理系统和应用中,如搜索引擎、文档管理系统、电子邮件客户端、新闻…

Mac虚拟机工具 CrossOver 24.0.0 Beta3 Mac中文版

CrossOver是一款在Mac上运行Windows应用程序的软件&#xff0c;无需安装虚拟机或重启计算机&#xff0c;简化了操作过程&#xff0c;提高了工作效率&#xff0c;为用户带来便捷体验。前往Mac青桔下载&#xff0c;享受前所未有的便利和高效。摘要由作者通过智能技术生成 CrossOv…

【FAQ】HarmonyOS SDK 闭源开放能力 —IAP Kit(2)

1.问题描述&#xff1a; 应用内支付IAP Kit和Payment Kit的区别以及适用场景&#xff1f; 解决方案&#xff1a; IAP Kit是四方支付&#xff0c;仅支持在线虚拟商品&#xff0c;如会员&#xff0c;游戏钻石等&#xff0c;双框架支持全球&#xff0c;目前单框架暂时只支持国内…