首页 > 其他分享 >vue项目目录讲解

vue项目目录讲解

时间:2023-12-12 11:34:55浏览次数:28  
标签:npm vue js webpack conf 讲解 目录

  1、build:构建脚本目录

    1)build.js   ==>  生产环境构建脚本;

    2)check-versions.js   ==>  检查npm,node.js版本;

    3)utils.js   ==>  构建相关工具方法;

    4)vue-loader.conf.js   ==>  配置了css加载器以及编译css之后自动添加前缀;

    5)webpack.base.conf.js   ==>  webpack基本配置;

    6)webpack.dev.conf.js   ==>  webpack开发环境配置;

    7)webpack.prod.conf.js   ==>  webpack生产环境配置;

  2、config:项目配置

    1)dev.env.js   ==>  开发环境变量;

    2)index.js   ==>  项目配置文件;

    3)prod.env.js   ==>  生产环境变量;

  3、node_modules:npm 加载的项目依赖模块

  4、src:这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:

    1)assets:资源目录,放置一些图片或者公共js、公共css。这里的资源会被webpack构建;

    2)components:组件目录,我们写的组件就放在这个目录里面;

    3)router:前端路由,我们需要配置的路由路径写在index.js里面;

    4)App.vue:根组件;使用标签<route-view></router-view>渲染整个工程的.vue组件

    5)main.js:入口js文件;创建vue实例。初始项目中,引入了vue、app、store、router,当然我们也可以在此引入更多的东西或做一些全局的处理工作

  5、static:静态资源目录,如图片、字体等。不会被webpack构建

  6、index.html:首页入口文件,可以添加一些 meta 信息等

  7、package.json:npm包配置文件,定义了项目的npm脚本,依赖包等信息。用于 node_modules资源部 和 启动、打包项目的 npm 命令管理。

  8、README.md:项目的说明文档,markdown 格式

  9、.xxxx文件:这些是一些配置文件,包括语法配置,git配置等

 

标签:npm,vue,js,webpack,conf,讲解,目录
From: https://www.cnblogs.com/ayuaichiyu/p/17896397.html

相关文章

  • vue 深拷贝
    方法一:cloneDeepimport{cloneDeep}from'lodash-es'//直接使用constitems=cloneDeep(multipleSelection)方法二:​通过JSON.parse(JSON.stringify(obj))优缺点满足一般使用场景,用JSON.stringify把对象转成字符串,再用JSON.parse把字符串转成新的对象。但这种......
  • js 传参到 vue + 计算属性使用
    场景js中存储xAxisData=[......]、yAxisData=[......],想在vue中使用,但要求使用前转化成data存有若干个(x,y)的形式在改变xAxisData或yAxisData的任意一值时,都会反馈更新到vue的每一个调用了data的地方方法一:js中Cannotreadpropertiesofundefine......
  • vitest&@vue/test-utils组件单元测试
    依赖"vitest":"0.34.6","@vue/test-utils":"2.4.3","axios-mock-adapter":"^1.22.0",示例import{mount}from"@vue/test-utils";import{test,vi}from"vitest";import{gl......
  • 介绍 Vue3 的常见目录结构
    当着手使用Vue3开发项目时,理解其目录结构至关重要。Vue3的文件组织和模块分隔方式直接关系到项目的可维护性和扩展性。本文将深入探讨Vue3的标准目录结构,并提供一些实用的指南和推荐做法。在Vue3项目中,通常会有以下一些常见的目录和文件:src目录:src 目录是Vue3项目的......
  • 介绍 Vue3 的常见目录结构
    当着手使用Vue3开发项目时,理解其目录结构至关重要。Vue3的文件组织和模块分隔方式直接关系到项目的可维护性和扩展性。本文将深入探讨Vue3的标准目录结构,并提供一些实用的指南和推荐做法。在Vue3项目中,通常会有以下一些常见的目录和文件:src目录:src 目录是Vue3项目的......
  • SpringBoot+Vue实现大文件分块上传
    1.项目背景由于用户需求,需要上传大量图片,只能通过上传压缩包的形式上传,可是压缩包过大时,又会出现上传超时的情况,故需要将压缩包分块上传,然后解压缩图片、若图片过大则再对图片进行压缩。2.分块上传分块上传我在用的时候发现有两种:第一种:分块合并接口全由后端接口生成;第二种:前端......
  • 介绍 Vue3 的常见目录结构
    当着手使用Vue3开发项目时,理解其目录结构至关重要。Vue3的文件组织和模块分隔方式直接关系到项目的可维护性和扩展性。本文将深入探讨Vue3的标准目录结构,并提供一些实用的指南和推荐做法。 在Vue3项目中,通常会有以下一些常见的目录和文件:src目录:src 目录是Vu......
  • 介绍 Vue3 的常见目录结构
    当着手使用Vue3开发项目时,理解其目录结构至关重要。Vue3的文件组织和模块分隔方式直接关系到项目的可维护性和扩展性。本文将深入探讨Vue3的标准目录结构,并提供一些实用的指南和推荐做法。 在Vue3项目中,通常会有以下一些常见的目录和文件:src目录:src 目录是Vu......
  • Vue + Element 实现按钮指定间隔时间点击
    1、业务需求需要加一个按钮,调用第三方API,按钮十分钟之内只能点击一次,刷新页面也只能点击一次2、思路加一个本地缓存的时间戳,通过时间戳计算指定时间内不能点击按钮3、实现1)vue页面<template><el-row:gutter="15"><el-col:span="4"><el-buttontype="danger"......
  • vue2项目webpack打包的优化策略,降低打包文件后的大小
    1.区分开发模式和打包模式的main.js入口文件首先,在项目的根目录下创建一个名为vue.config.js的文件(如果已存在,请跳过此步骤)。然后对于你的项目中的mian.js新建一个相同内容的js文件,然后将这2个mian.js文件分别命名为打包模式的入口文件:main-prod.js开发模式的入口文件:mian-dev.js......