Vue开发实例(二)Vue代码运行及分析配置

news2024/12/23 0:06:06

Vue项目代码运行及分析

  • 一、项目运行
  • 二、目录结构说明
    • 1、项目本身结构
    • 2、其他可能用到的文件夹
  • 三、建议配置
    • 1、启动服务浏览器自动打开页面地址
    • 2、关闭eslint校验工具
    • 3、 src文件夹的别名的设置

一、项目运行

上篇文件末尾介绍到,进入项目,运行启动命令,访问地址,打开项目

cd vue-test
npm run serve

接下来给大家介绍一下,每个文件夹的作用
在这里插入图片描述
首先需要我把用 VSCode 打开项目,目录结构如下图所示
在这里插入图片描述

VSCode下载地址:https://code.visualstudio.com/

二、目录结构说明

1、项目本身结构

  • node_modules:项目依赖文件夹
  • public:一般放置一些静态资源(图片)。需要注意,放在public文件夹中的静态资源,webpack进行打包的时候,会原封不动的打包到dist文件夹中。
  • src(程序员源代码文件夹 )
    • assets:一般用于存放静态资源(放置多个组件共用的静态资源),需要注意,放在assets文件夹里的静态资源,在webpack打包的时候,webpack会把静态资源当做一个模块,打包到JS文件里面。
    • components:一般放置非路由组件(全局组件)
    • App.vue:唯一的根组件(汇总所有组件)
    • main.js:入口文件,也是整个程序当中最先执行的文件
  • .gitignore:git版本管制忽略的配置(一般不碰)
  • babel.config.js:babel的配置文件(相当于翻译官,比如把ES6相关语法翻译为ES5,兼容性更好,一般不碰)
  • package.json:应用包配置文件(类似于项目身份证,记录着项目名称、项目依赖、项目运行等信息)
  • package-lock.json:包版本控制文件(缓存性文件)
  • README.md:应用描述文件(说明性文件)
  • vue.config.js:可以对脚手架进行个性化定制,如何配置可以参考Vue CLI

2、其他可能用到的文件夹

  • pages:存放路由相关组件(pages也可换成views)
  • router:路由配置文件
  • store:vuex相关文件
  • mock:存放mock模拟数据

三、建议配置

1、启动服务浏览器自动打开页面地址

package.json 中修改scripts的serve,后面加 --open 即可,也可以添加--open --host=localhost
在这里插入图片描述

2、关闭eslint校验工具

vue.config.js文件,添加一行代码配置,需要对外暴露
在这里插入图片描述

3、 src文件夹的别名的设置

注意:最新vue脚手架版本默认已经配置好了
因为项目大的时候src(源代码文件夹):里面目录会很多,找文件不方便,设置src文件夹的别名的好处,找文件会方便一些

jsconfig.json文件

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  }
}

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

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

相关文章

Unity(第二十二部)官方的反向动力学一般使用商城的IK插件,这个用的不多

反向动力学(Inverse Kinematic,简称IK)是一种通过子节点带动父节点运动的方法。 正向动力学 在骨骼动画中,大多数动画是通过将骨架中的关节角度旋转到预定值来生成的,子关节的位置根据父关节的旋转而改变,这…

【LeetCode】【滑动窗口长度不固定】978 最长湍流子数组

1794.【软件认证】最长的指定瑕疵度的元音子串 这个例题,是滑动窗口中长度不定求最大的题目,在看题之前可以先看一下【leetcode每日一题】【滑动窗口长度不固定】案例。 题目描述 定义:开头和结尾都是元音字母(aeiouAEIOU&…

java基础-mysql

文章目录 mysql基础面试题什么是mysql什么是事务并发事务带来的影响事物的隔离级别索引大表优化什么是池化思想,什么是数据库连接池,为什么要用数据库连接池⾏锁,表锁;乐观锁,悲观锁MySQL主备同步的基本原理SQL什么情况…

2024年腾讯云优惠代金券领取入口汇总(新老用户免费领)

腾讯云代金券领取渠道有哪些?腾讯云官网可以领取、官方媒体账号可以领取代金券、完成任务可以领取代金券,大家也可以在腾讯云百科蹲守代金券,因为腾讯云代金券领取渠道比较分散,腾讯云百科txybk.com专注汇总优惠代金券领取页面&am…

基于 STM32U5 片内温度传感器正确测算温度

目录预览 1、引言 2、问题 3、小结 01 引言 STM32 在内部都集成了一个温度传感器,STM32U5 也不例外。这个位于晶圆上的温度传感器虽然不太适合用来测量外部环境的温度,但是用于监控晶圆上的温度还是挺好的,以防止芯片过温运行。 02 问题…

springcloud和基础服务的搭建以及封装

page分页也进行了封装,只需要添加到pom中,将会自动进行分页,并且后端不需要写任何的分页数据。只需要前端自己传分页参数即可,并且里面封装了很多类型的参数类型。自定义的很多注解,并且也支持多个版本的同一个接口名称…

推荐一个屏幕上鼠标高亮显示的小工具

在视频录制等特定场景下,很多人希望在点击鼠标时能够在屏幕上及时进行显示,便于别人发现,提高别人的注意力。 因此,很多录屏软件中都内含显示鼠标点击功能。那如果不支持该怎么办呢?其实,也是可以通过其他工…

MongoDB聚合运算符:$count

文章目录 语法使用举例在$group阶段中使用在$setWindowFields阶段使用 $count聚合运算符返回分组中文档的数量。从5.0开始支持。 语法 { $count: { } }$count不需要参数 使用 $count可以用于下列聚合阶段: $bucket$bucket$group$setWindowFields 在$group阶段中…

vue3创建h5 项目使用rem做响应式的配置

第一步 安装依赖: npm install amfe-flexible -S npm install postcss-px2rem -S第二步 main.ts文件中导入 import "amfe-flexible/index.js";第三步 进行配置: vue3 项目中创建 postcss.cinfig.js文件,这里是基于设计稿是750px…

【k8s管理--两种方式安装prometheus】

1、k8s的监控方案 1.1 Heapster Heapster是容器集群监控和性能分忻工具,天然的支持Kubernetes和CoreOS。 Kubernetes有个出名的监控agent–cAdvisor。在每个kubernetes Node上都会运行cAdvisor,它会收集本机以及容器的监控数(cpu,memory,filesystem,ne…

java学习笔记-初级

完整笔记下载链接&#xff1a;https://download.csdn.net/download/qq_48257021/88800766?spm1001.2014.3001.5503 一、变量 1.双标签 <!-- 外部js script 双标签 --><script srcmy.js></script> 在新文件my.js里面写&#xff1a; 2.字符串定义&#xff…

【模型复现】自制数据集上复现目标检测域自适应 SSDA-YOLO

【模型复现】自制数据集上复现目标检测域自适应 SSDA-YOLO 1. 环境安装2. 数据集制作2.1 数据准备2.2 数据结构 3. 模型训练3.1 数据文件配置3.2 训练超参数配置3.3 模型训练 4. 模型验证4.1 验证超参数配置4.2 模型验证 5. 模型推理5.1 推理超参数配置5.2 模型推理 6. 踩坑记录…

智能驾驶规划控制理论学习03-基于采样的规划方法

目录 一、基于采样的规划方法概述 二、概率路图&#xff08;PRM&#xff09; 1、核心思想 2、实现流程 3、算法描述 4、节点连接处理 5、总结 三、快速搜索随机树&#xff08;RRT&#xff09; 1、核心思想 2、实现流程 3、总结 4、改进RRT算法 ①快速搜索随机图&a…

机器学习---主动学习

1. 概念区分 使用传统的监督学习方法做分类&#xff0c;往往训练样本规模越大&#xff0c;分类的效果越好。但是在现实生活中的 很多场景下&#xff0c;标记样本的获取较困难&#xff0c;需要领域内的专家进行人工标注&#xff0c;需要较大的时间成本和经 济成本。另外&…

R语言安装和简单入门HelloWorld用法

R语言安装和简单入门HelloWorld用法 #R语言安装地址 https://www.r-project.org/ click->CRAN mirror->选择China下列表&#xff1a; https://mirrors.tuna.tsinghua.edu.cn/CRAN/ 选择Download R for Windows 选择base Download R-4.3.2 for Windows 下载文件R-4.3.2-…

Java SPI:Service Provider Interface

SPI机制简介 SPI&#xff08;Service Provider Interface&#xff09;&#xff0c;是从JDK6开始引入的&#xff0c;一种基于ClassLoader来发现并加载服务的机制。 一个标准的SPI&#xff0c;由3个组件构成&#xff0c;分别是&#xff1a; Service&#xff1a;是一个公开的接口…

K线实战分析系列之十四:三只乌鸦,行情趋弱,留意风险

K线实战分析系列之十四&#xff1a;三只乌鸦&#xff0c;行情趋弱&#xff0c;留意风险 一、三只乌鸦二、三只乌鸦形态总结 一、三只乌鸦 理想的三只乌鸦形态 向下的跳空更显示出盘面的弱势 二、三只乌鸦形态总结 三只乌鸦形态由三根K线组成&#xff0c;都是阴线&#xff…

激光雷达原理

全球汽车行业正在进行自动化变革&#xff0c;这将彻底改变交通运输的安全和效率水平。 戴姆勒在S级豪华车型中引入L3级自动驾驶&#xff08;L3&#xff0c;在特定条件下自动驾驶&#xff0c;人类驾驶员一旦被请求就会随时接管&#xff09;是自动驾驶革命的一个重大突破。其他多…

Redis 存储原理和数据模型

redis 是不是单线程 redis 单线程指的是命令处理在一个单线程中。主线程 redis-server&#xff1a;命令处理、网络事件的监听。 辅助线程 bio_close_file&#xff1a;异步关闭大文件。bio_aof_fsync&#xff1a;异步 aof 刷盘。bio_lazy_free&#xff1a;异步清理大块内存。io_…

fly-barrage 前端弹幕库(3):滚动弹幕的设计与实现

项目官网地址&#xff1a;https://fly-barrage.netlify.app/&#xff1b; &#x1f451;&#x1f40b;&#x1f389;如果感觉项目还不错的话&#xff0c;还请点下 star &#x1f31f;&#x1f31f;&#x1f31f;。 Gitee&#xff1a;https://gitee.com/fei_fei27/fly-barrage&a…