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

2024-03-02 14:20

本文主要是介绍Vue开发实例(二)Vue代码运行及分析配置,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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"]}
}

这篇关于Vue开发实例(二)Vue代码运行及分析配置的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/766409

相关文章

Android kotlin中 Channel 和 Flow 的区别和选择使用场景分析

《Androidkotlin中Channel和Flow的区别和选择使用场景分析》Kotlin协程中,Flow是冷数据流,按需触发,适合响应式数据处理;Channel是热数据流,持续发送,支持... 目录一、基本概念界定FlowChannel二、核心特性对比数据生产触发条件生产与消费的关系背压处理机制生命周期

Jenkins分布式集群配置方式

《Jenkins分布式集群配置方式》:本文主要介绍Jenkins分布式集群配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1.安装jenkins2.配置集群总结Jenkins是一个开源项目,它提供了一个容易使用的持续集成系统,并且提供了大量的plugin满

SpringBoot线程池配置使用示例详解

《SpringBoot线程池配置使用示例详解》SpringBoot集成@Async注解,支持线程池参数配置(核心数、队列容量、拒绝策略等)及生命周期管理,结合监控与任务装饰器,提升异步处理效率与系统... 目录一、核心特性二、添加依赖三、参数详解四、配置线程池五、应用实践代码说明拒绝策略(Rejected

SQL Server配置管理器无法打开的四种解决方法

《SQLServer配置管理器无法打开的四种解决方法》本文总结了SQLServer配置管理器无法打开的四种解决方法,文中通过图文示例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录方法一:桌面图标进入方法二:运行窗口进入检查版本号对照表php方法三:查找文件路径方法四:检查 S

怎样通过分析GC日志来定位Java进程的内存问题

《怎样通过分析GC日志来定位Java进程的内存问题》:本文主要介绍怎样通过分析GC日志来定位Java进程的内存问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、GC 日志基础配置1. 启用详细 GC 日志2. 不同收集器的日志格式二、关键指标与分析维度1.

Linux中SSH服务配置的全面指南

《Linux中SSH服务配置的全面指南》作为网络安全工程师,SSH(SecureShell)服务的安全配置是我们日常工作中不可忽视的重要环节,本文将从基础配置到高级安全加固,全面解析SSH服务的各项参... 目录概述基础配置详解端口与监听设置主机密钥配置认证机制强化禁用密码认证禁止root直接登录实现双因素

MySQL中的表连接原理分析

《MySQL中的表连接原理分析》:本文主要介绍MySQL中的表连接原理分析,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、背景2、环境3、表连接原理【1】驱动表和被驱动表【2】内连接【3】外连接【4编程】嵌套循环连接【5】join buffer4、总结1、背景

嵌入式数据库SQLite 3配置使用讲解

《嵌入式数据库SQLite3配置使用讲解》本文强调嵌入式项目中SQLite3数据库的重要性,因其零配置、轻量级、跨平台及事务处理特性,可保障数据溯源与责任明确,详细讲解安装配置、基础语法及SQLit... 目录0、惨痛教训1、SQLite3环境配置(1)、下载安装SQLite库(2)、解压下载的文件(3)、

java向微信服务号发送消息的完整步骤实例

《java向微信服务号发送消息的完整步骤实例》:本文主要介绍java向微信服务号发送消息的相关资料,包括申请测试号获取appID/appsecret、关注公众号获取openID、配置消息模板及代码... 目录步骤1. 申请测试系统2. 公众号账号信息3. 关注测试号二维码4. 消息模板接口5. Java测试

MySQL数据库的内嵌函数和联合查询实例代码

《MySQL数据库的内嵌函数和联合查询实例代码》联合查询是一种将多个查询结果组合在一起的方法,通常使用UNION、UNIONALL、INTERSECT和EXCEPT关键字,下面:本文主要介绍MyS... 目录一.数据库的内嵌函数1.1聚合函数COUNT([DISTINCT] expr)SUM([DISTIN