Vuecli项目结构,及组件的使用

news2025/7/9 14:18:50

根目录文件介绍

node_modules :管理项目中使用的依赖
public:存放一些静态资源,webpack打包时会放入dist文件夹内。
src:书写vue源代码【重点】
.gitignore :存放需要被git忽略文件(不需要保存)的文件名
babel.config.js:将es6语法转为es5运行
jsconfig.json:指定根文件和JavaScript语言服务提供的功能选项
package.json :类似pom的的依赖管理文件
package-lock.json:对package.json的锁文件
README.md :阅读文档
vue.config.js :项目配置文件,在@vue/cli-service 启动的时候会自动加载

src 文件介绍

assets:存放静态资源
components:存放自定义组件
router:配置项目路由
store:全局存储参数
views:页面级组件
App.vue:项目根组件
main.js:项目主入口

main.js 介绍

在这里插入图片描述
main.js 可以根据路由找到根组件,App.vue 并且展示内容


import { createApp } from 'vue'  //导入createApp函数从vue中
import App from './App.vue'      //导入组件App.vue
import router from './router'    //引入router
import store from './store'      //引入store
// const app = createApp(App); ---> 使用createApp创建应用实例app
// app.use(store).use(router); ---> 实例app使用store和router
// app.mount('#app');          ---> 应用实例挂载到app中(接管id名为app的div区域),即public.index页面
createApp(App).use(store).use(router).use(ElementPlus).mount('#app')

Router.js介绍

在这里插入图片描述

组件的使用

在这里插入图片描述
1:在script中引入组件
2:在export default中定义组件
3:使用组件

开发方式

组件式开发

开发于业务模块对应的组件,组合成一个前端系统
开发的vue组件,打包时vue cli 会将其编译成html文件

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

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

相关文章

[附源码]java毕业设计青少年计算机知识学习系统

项目运行 环境配置: Jdk1.8 Tomcat7.0 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: SSM mybatis Maven Vue 等等组成,B/S模式 M…

ArcGIS制作横向图例

ArcGIS制作横向图例 右键栅格图层,Symbology——Stretched 切换布局视图——View——Layout View,添加经纬网并调整 Insert——Legend,一路默认点下去 双击图例,Items——Style,进一步调整 选择图中标注的这个样式&am…

ES6 Symbol 内置值及使用场景

Symbol 基本使用 ES6 引入了一种新的原始数据类型 Symbol,表示独一无二的值。它是 JavaScript 语言的第七种数据类型,是一种类似于字符串的数据类型。 Symbol 特点 1) Symbol 的值是唯一的,用来解决命名冲突的问题 2) Symbol 值不能与其…

Spring之Bean的实例化

文章目录前言一、通过构造方法实例化二、通过简单工厂模式实例化三、通过factory-bean实例化四、通过FactoryBean接口实例化前言 Spring为Bean提供了多种实例化方法,通常包括四种方式。目的是:更加灵活 第一种:通过构造方法实例化第二种&am…

计算机网络——第五章网络层笔记(4)

距离矢量路由选择协议(DV算法) 每个路由器维护一张表,表中列出了当前已知的到每个目标的最佳距离,以及为了到达那个目标,应该从哪个接口转发。 DV算法是动态的和分布式的,它常被用于小型网络,…

开发时长一年半golang工程师应该具备什么样的技术能力?

一、为什么会有人选择golang? 其实无非是被动和主动。 **被动:**面试新公司后,被领导调岗现学golang,因为公司需要。 **主动:**觉得这个方向有前景,大厂有需求,学了可以升职加薪! 所以不管…

visual studio连接远程开发

一、问题提出 vscode在连接远程调试时不知道如何调试cmake,研究了半天没研究出来,因此决定使用visual studio进行调试。 二、安装 Linux端 cmake版本最低为3.11,可以从此网站下载:https://cmake.org/files/v3.11/ 之前安装的visu…

怎么样恢复移动硬盘格式化的数据呢?

怎么样恢复移动硬盘格式化的数据呢? 这是一个让人很困扰的问题,其实格式化后的数据可以使用牛学长数据恢复工具一键恢复数据,它可以快速识别指定存储介质中所有丢失的文件,操作简单且恢复成功率高。 其工作原理只会提取原有数据&…

安装mayavi

mayavi是一款可视化工具,知乎说直接pip install mayavi不好使,所以我就直接没试,我直接试的好使的。 下面的链接是一个各种依赖包的地址,点开进去之后找mayavi https://link.zhihu.com/?targethttps%3A//www.lfd.uci.edu/~gohlke…

详解Unity中的新版Nav Mesh|导航寻路系统 (一)

前言 之前我们讲解过Unity的Nav Mesh系统,其中提到过这个新版的Nav Mesh,它解决现有Nav Mesh的几个缺陷,比如无法动态烘焙,无法按照Agent的半径和高度适当的判断可行路径。现在新版Nav Mesh可以彻底解决这个问题!某种…

Android Studio 插件开发2、网络请求、创建dialog、trello获取cardId等

网络请求 点击这里就出来一个弹框 更新Actions 关注这个 <actions><action id"TrelloAction"class"com.anguomob.anguo.actions.trello.TrelloAction"text"TrelloAction"description"Move a trello card from to do to the next …

大神带你玩转异步编程,理论与实践齐飞,敢说是目前最全的讲解了

要完全理解异步编程需要先理解几个概念 任务 我给任务的定义是完成某项功能的单元模块&#xff0c;任务有大有小&#xff0c;站在操作系统的角度&#xff0c;一个程序就是一个任务&#xff0c;每当运行一个程序就会创建一个新的任务&#xff0c;它在操作系统中还有一个无人不…

软件需求分析——需求工程过程

如果有兴趣了解更多相关内容&#xff0c;可以来我的个人网站看看&#xff1a;瞳孔空间 一&#xff1a;相关概念 需求工程过程的目的&#xff1a;介绍为软件加强型系统中的复杂软件设计的需求工程过程&#xff0c;涉及 抽取需求分析需求验证需求管理需求 主要关注点&#xf…

Isaac-gym(7):物理模拟(actor生成、创建、控制等)

1. 创建actor 1.1 actor的创建与句柄 actor是GymAsset的实例。函数create_actor将一个参与者添加到环境中&#xff0c;并返回一个参与者句柄&#xff0c;该句柄可用于以后与该参与者交互。出于性能原因&#xff0c;最好在actor创建期间保存句柄&#xff0c;而不是在模拟运行时…

[同向双指针] 209. 长度最小的子数组 713. 乘积小于 K 的子数组 3. 无重复字符的最长子串

同向双指针 该文结合灵神讲解进行编码&#xff1a;https://www.bilibili.com/video/BV1hd4y1r7Gq 该类滑动窗口一般符合某种单调性。 当不满足条件时左指针后移&#xff0c;当满足条件时右指针后移。 假设数组长度为 n&#xff0c;左指针最多移动 n 次&#xff0c;右指针最…

【无人机】基于RRT算法实现四旋翼无人机的安全和最小能量轨迹规划附matlab代码和报告

✅作者简介&#xff1a;热爱科研的Matlab仿真开发者&#xff0c;修心和技术同步精进&#xff0c;matlab项目合作可私信。 &#x1f34e;个人主页&#xff1a;Matlab科研工作室 &#x1f34a;个人信条&#xff1a;格物致知。 更多Matlab仿真内容点击&#x1f447; 智能优化算法 …

Linux安装RabbitMQ步骤分享

1、Erlnag安装 1.1、 安装Erlang版本要求 Erlang安装需要对应各自的版本 RabbitMQ Erlang Version Requirements — RabbitMQ 1.2、 Erlang安装 1、目录准备 cd /usr/local/src/ mkdir rabbitmq cd rabbitmq2、添加仓库地址 为了减少安装的错误 我们使用仓库安装 ,类似于m…

【算法篇-数论】快速幂

快速幂1. 利用快速幂优化的时间复杂度2. 快速幂方法及代码3.总结文章参考自 B站董晓算法 1. 利用快速幂优化的时间复杂度 所谓的快速幂就是快速计算底数的n次幂暴力求幂的话时间复杂度为O&#xff08;n&#xff09; 利用快速幂可以做到 时间复杂度为 O(log2n) 2. 快速幂方法…

操作系统4小时速成:I/O管理,spooling脱机技术,设备分配,分配数据结构,IO调度,IO子系统,IO控制方式,IO分类

操作系统4小时速成&#xff1a;I/O管理&#xff0c;spooling脱机技术&#xff0c;设备分配&#xff0c;分配数据结构&#xff0c;IO调度&#xff0c;IO子系统&#xff0c;IO控制方式&#xff0c;IO分类 2022找工作是学历、能力和运气的超强结合体&#xff0c;遇到寒冬&#xf…

一、什么是 MQ

MQ的概念 MQ &#xff08;Message Queue&#xff09;消息队列&#xff0c;是在消息传输过程中存储消息的容器。多用于分布式系统之间的通信。 队列是基础数据结构中 “先进先出” 的一种数据结构。 消息对列&#xff0c;指把要传输的数据消息放在队列中&#xff0c;用队列机制…