启动单文件组件项目及项目文件解释

news2024/11/16 20:32:57

启动项目文件:“package.json”:

“package.json”:这个文件能记录当前项目中安装的所有模块,里面也有脚本,这个脚本可以快速启动我们的项目。 

打开文件,可以看到“serve”,serve就是启动文件的入口

启动项目:

在这个文件上,右键,选择:“在集成终端中打开”,打开终端,输入以下命令,启动项目:

npm run serve //启动项目
npm run serve:启动项目

npm run build:编译项目

npm run lint:代码检测工具

最终会给你启动一台服务器,8080端口的;  


核心模块入口,主文件:main.js:

main.js是整个vue项目中的核心模块入口,要想运行路由、vuex、根组件、vue都要在这个主文件中引入和初始化。 

想要运行哪一个vue文件更改'./App.vue'路径,换成vue文件的路径就行。运行根组件,导入根组件所在的路径即可。


App.vue:根组件

未来的单文件组件都集中在这个vue文件中, 

把项目的App根组件,渲染实例化之后挂载到节点上。


assets:放一些小图标和图片


views:放根组件的子组件(src文件夹下)


components:放view里组件的子组件,或者是一些公共组件


router:路由文件

  • 里面的index.js就是放路由配置的文件:


store:vuex状态管理文件

  • index.js里放的就是vuex代码


util:工具文件

  • 里面是js文件,放一些工具,比如可以在里面封装axios数据请求 


 .eslintrc.js:默认规则配置文件

  • 里面都是vue默认配置,要想改某些默认规则就可以在理解加


vue.config.js:配置反向代理 

  • 向后端数据接口请求数据,存在跨域问题时,如果使用反向代理解决的话,就在这个文件里配置,这个文件没有的话,就新建一个


public目录: 静态文件夹

public里的文件都可以通过“/”在浏览器访问的到,因为整个项目就只有public是向外暴露的;

如果你想用json文件测试,就把json文件放在public文件夹下,因为只有这个文件夹里的东西浏览器才能访问到,这个文件夹是静态文件夹。

还有就是你public里的文件直接访问不到src里的文件,但是可以通过 “/文件名” 来访问,因为同一个域名端口号可以省略端口号和域名;

index.html:入口页面 


src文件夹:

@别名:是src的绝对路径,也就是@就是代码src

src文件是模块化文件,都是上下级的关系,要用模块化文件,导入方式都是import方式。


 创建一个项目:

(1)创建项目用: vue create 项目名 

打开项目:

第一种办法:打开项目文件,在项目文件夹下运行命令窗口;

第二种方法:把项目拖到vscode中来,右键“在集成终端中打开”;

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

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

相关文章

李沐精读论文:transformer 《Attention Is All You Need》 by Google

论文:Attention Is All You Need 视频:Transformer论文逐段精读【论文精读】_哔哩哔哩_bilibili 课程(推荐先看这个):李宏毅机器学习:self-attention(自注意力机制)和transformer及其…

SpringBoot整合Shiro环境搭建

SpringBoot整合Shiro环境搭建导入 SpringBoot 和 Shiro 整合包的依赖&#xff1a; <!-- https://mvnrepository.com/artifact/org.apache.shiro/shiro-spring --> <dependency><groupId>org.apache.shiro</groupId><artifactId>shiro-spring<…

XXL-Job分布式任务调度框架-- 定时任务注册案例2

一 案例操作 1.1 新建工程 简单建一个springboot的工程&#xff0c;如下图结构 1.2 工程的配置 1.pom中依赖配置 2&#xff09;代码 <!-- xxl-job --><dependency><groupId>com.xuxueli</groupId><artifactId>xxl-job-core</artifactI…

ANTLR4入门(一):Windows安装antlr4命令行环境

最近开始学习ANTLR4&#xff0c;《ANTLR 4权威指南》这本书是看完了&#xff0c;现在开始实践&#xff0c;本系列文记录实践过程中的遇到的问题解决过程及心得体会 下载 从antlr官方网站下载最新的antr4版本(jar)&#xff1a;https://www.antlr.org/download.html 目前最新的…

牛客java刷题知识点总结(七)

instanceof运算符作用 instance是java的二元运算符&#xff0c;用来判断他左边的对象是否为右面类&#xff08;接口&#xff0c;抽象类&#xff0c;父类&#xff09;的实例。 我们考虑的时候&#xff0c;左边的对象如果是父类的引用指向子类的对象&#xff0c;我们用子类对象的…

C++【并查集】

文章目录一、并查集是什么并查集的简单表示并查集的合并并查集的代码实现并查集小练习1并查集小练习2并查集的压缩问题一、并查集是什么 并查集是一个森林 在一些应用问题中&#xff0c;需要将n个不同的元素划分成一些不相交的集合。开始时&#xff0c;每个元素自成一个单元素…

CS61A Lab 4

更好的阅读体验 Lab 4: Recursion, Tree Recursion lab04.zip What Would Python Do? Q1: Squared Virahanka Fibonacci Use Ok to test your knowledge with the following “What Would Python Display?” questions: python3 ok -q squared-virfib-wwpd -u✂️Hint: If…

CountDownLatch类的使用

&#x1f388;专栏链接:多线程相关知识详解 目录 一.CountDownLatch的介绍 二.CountDownLatch类里面的方法 三.CountDownLatch的两种应用场景 ①一等多情况 ②多等一情况 一.CountDownLatch的介绍 CountDownLatch是一种用来控制多线程的工具类,它被称为门阀、计数器或者…

LeetCode HOT 100 —— 301.删除无效的括号

题目 给你一个由若干括号和字母组成的字符串 s &#xff0c;删除最小数量的无效括号&#xff0c;使得输入的字符串有效。 返回所有可能的结果。答案可以按 任意顺序 返回。 思路 DFS 回溯算法&#xff1a; 首先最终合法的方案&#xff0c;必然有左括号的数量 右括号的数量 …

钉钉获取免登用户信息

大家好&#xff0c;这里是一口八宝周&#x1f44f; 欢迎来到我的博客❤️一起交流学习 文章中有需要改进的地方请大佬们多多指点 谢谢&#x1f64f; 最近好像搞了个什么钉钉小程序&#xff0c;具体做什么咱也不知道&#xff0c;就让我搞一个钉钉获取免登录用户信息的接口出来&…

计网理论模拟

一. 单选题&#xff08;共10 题&#xff0c;20.0分&#xff09; 1. (单选题,2.0分)网络协议主要由 3 个基本要素组成&#xff0c;即&#xff08; &#xff09; A. 层次、语义和同步B. 语法、原语和同步C. 语法、语义和同步D. 语法、语义和功能 正确答案: C 2. (单选题,2.0分…

计算机毕业设计ssm+vue基本微信小程序的智能图书管理系统

项目介绍 本设计旨在研究一种社区图书管理系统设计与实现系统,以各种浏览器web页面加上云服务器后端服务系统,通过这一设计过程,进一步熟悉web前端开发技术和云服务器后端开发技术和方法,培养理论联系实际及知识的综合运用能力。 图书管理系统可以有效实现图书管理的规范化、系…

SAP Gateway 后台模型的缓存设置

/iwbep/cl_mgw_med_provider 类里的成员 mv_cache_active: 这个 cache 默认是开启状态。 调用 OData 服务的 MPC_EXT 类的 get_last_modified 方法获取最后一次修改的时间戳。这个时间戳(timestamp)也会影响到 cache 的行为&#xff0c;我们后续也会详细讨论。 第12 行 super 方…

PySpark--spark local 的环境部署

Spark环境搭建-Local 环境搭建 基本原理 本质&#xff1a;启动一个JVM Process进程(一个进程里面有多个线程)&#xff0c;执行任务Task Local模式可以限制模拟Spark集群环境的线程数量, 即Local[N] 或 Local[*]其中N代表可以使用N个线程&#xff0c;每个线程拥有一个cpu core。…

【使用Netty实现群发消息】

使用Netty实现群发消息netty简单介绍实现群发流程图代码实现NettyServer 类MyChannelInitializer 类MyServerHandler 类ChannelHandler 类Netty 依赖效果展示netAssist 工具启动Netty server打开netAssist 工具netty简单介绍 Netty是由JBOSS提供的一个java开源框架&#xff0c…

第三十一章 linux-模块的加载过程

第三十一章 linux-模块的加载过程 文章目录第三十一章 linux-模块的加载过程sys_init_modulestruct moduleload_module在用户空间&#xff0c;用insmod这样的命令来向内核空间安装一个内核模块&#xff0c;本节将详细讨论模块加载时的内核行为。当调用“insmod demodev.ko”来安…

通讯录的思路与实现(C语言)

目录 前言 程序的分装 程序的结构 函数实现 通讯录的初始化 通讯录的扩容 将数据保存到本地 增加联系人 显示通讯录所有联系人 目标联系人的检索(根据名称) 目标联系人的检索(根据号码) 检索发展来的函数 删除联系人 查询目标联系人 联系人信息的更改 按名称对通…

Python写个“点球大战”小游戏

大家好&#xff0c;欢迎来到 Crossin的编程教室 &#xff01; 看过我Python入门教程的朋友应该会看到其中有提到一个点球小游戏的作业。 在世界杯决赛即将到来之际&#xff0c;我们再来回顾一下这个小游戏。对于刚刚学习编程不久的同学&#xff0c;这是个不错的练手习题&…

(二)RT-Thread入门——线程管理

目录 线程管理 线程管理特点 线程工作机制 线程控制块 线程属性 线程栈 线程状态 线程优先级 时间片 线程入口函数 无限循环模式 顺序执行或有限次循环模式 线程错误码 线程状态切换 线程操作 创建动态线程 删除 初始化静态线程 脱离 获得当前线程 让出…

数据结构基础篇》》用c语言实现复数的八个基本运算

数据结构开讲啦&#xff01;&#xff01;&#xff01;&#x1f388;&#x1f388;&#x1f388; 本专栏包括&#xff1a; 抽象数据类型线性表及其应用栈和队列及其应用串及其应用数组和广义表树、图及其应用存储管理、查找和排序将从简单的抽象数据类型出发&#xff0c;深入浅出…