vue-cli项目目录文件的基本简介

最新推荐文章于 2023-07-07 12:49:20 发布
最新推荐文章于 2023-07-07 12:49:20 发布
阅读量560 收藏
点赞数
分类专栏： # Vue 文章标签： vue.js webpack javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Gong_01/article/details/122769223
版权

node_modules文件夹：放置项目依赖的地方

public文件夹：一般放置一些共用的静态资源，打包上线的时候，webpack会将public文件夹里面资源原封不动打包到dist文件夹里面

src文件夹：程序员源代码文件夹

-----assets文件夹：经常放置一些静态资源（图片），assets文件夹里面资源webpack会进行打包为一个模块，放在js文件夹里

-----components文件夹：一般放置非路由组件（或者项目共用的组件）

-----App.vue文件：唯一的根组件

main.js文件：入口文件（程序最先执行的文件）

babel.config.js文件：babel配置文件

package.json文件：项目描述、项目依赖、项目运行指令

README.md文件：项目说明文件

乖乖我左边的房子在动
关注
专栏目录
在vue-cli3.0中自定css、js和图片的打包路径
cradle2006的专栏
08-28 1208
前言 我们有时候因为一些特殊需求，可能需要将js/css/img等资源文件都打包到根路径下，但vue-cli3.0的路径配置中仅有** assetsDir**配置项能够配置所有的静态文件所在的文件夹，并不能针对css/js/img等资源文件分别来做设置，那么请看我如何尝试的吧！ 分析 众所周知，vue-cli3.0使用了webpack进行打包处理，那么我们是否可以拿到目前打包默认的一些webp...
webpack4+Vue搭建自己的Vue-cli项目过程分享
10-18
通过上述步骤，我们就能够使用Webpack 4和Vue搭建一个基本的Vue-cli项目，并对项目的构建过程有所了解。在实际开发中，对于更复杂的需求，比如代码分割、热模块替换等，Webpack提供了丰富的插件和工具来支持。只有...
VueCli 目录概述
qq_50648993的博客
04-17 734
VueCli 目录概述 当安装完成后，大概样子就是这样（安装不同的依赖插件会有不同的样子，大概样子和这个差不多） 其中第一个包node_modules是存放了各种包，包管理器，不用去修改 public文件夹的静态资源都会被简单的复制，而不经过webpack，一般也不在这其中修改，public 目录提供的是一种应急手段。 一般项目的更改就是在src种更改 assets ：一般存放一些静态文件，如图片，iconfont等等 components：在这其中写组件，一般为通用组件，就是原生中的template
（68）Vue-cli 目录与文件
Java田根旺
02-16 637
一、文件目录介绍 二、单文件组件 单文件组件可以将组件的功能统一保存在以 .vue 为扩展名的文件中。 三、HelloWorld.vue文件 该文件是一个组件文件，文件中有三个标签，<template>标签代表我们之前书写的template选项，我们知道我们之前书写起来很不方便，但是我们通过这种标签的方式书写，写起来更容易啦！ <script>标签用于导出组件，供我们的App.vue根组件进行使用。 <style>标签可以书写样式代码，这里面可以通过lan
vue-cli目录结构
weixin_40293877的博客
04-22 146
1.assets--资源目录，例：css文件，img文件 2.common--公共js文件 3.components--公共组件 3.1.common--此项目能用得上，以后项目也用得上的组件 3.2.content--这个项目能用得上的公共组件，业务相关组件 4.network--网络相关代码 5.router--路由相关代码 6.store--vuex相关代码 7.views--视图层代码 ...
【Vue】Vue-cli(脚手架)的目录结构详解（转载）
【敦厚的曹操】的专栏
03-24 7039
一、图简单说明下各个目录都是干嘛的： 　　总体框架：一个vue-cli的项目结构如下，其中src文件夹是需要掌握的，所以本文也重点讲解其中的文件，至于其他相关文件，了解一下即可。 四、文件结构细分 　　1、build——[webpack配置] 　　build文件主要是webpack的配置，主要启动文件是dev-server.js，当我们输入npm run dev首先启动的就是dev-server.js，它会去检查node及npm版本，加载配置文件，启动服务。 　　2、config——[
vue-cli-plugin-i18n:Vue CLI插件可将vue-i18n添加到您的Vue项目
05-11
Vue CLI插件可将vue-i18n添加到您的Vue项目 :handshake: 支持新项目 Intlify Project是一个开源项目，其中包括Vue I18n和i18n工具和自由软件，其持续的开发完全依靠赞助商的支持。 如果您想成为赞助商，请考虑： ...
vue-cli2与vue-cli3在一台电脑共存的实现方法
10-16
安装Vue CLI2的命令通常是`npm install vue-cli@版本号`或者简写为`npm install vue-cli -g`，但如果想实现局部安装，也就是只在当前项目目录中安装，就需要省略掉`-g`参数。局部安装后，会在当前文件夹下生成`node_...
vue-cli开发的商城源代码
01-18
在创建项目时，vue-cli会生成一个基本的目录结构，包括src目录（存放源代码）、public目录（存放静态资源）、node_modules（依赖库）、package.json（项目配置文件）等。 在"mall-vue-master"这个项目中，我们可能...
详解vue-cli 2.0配置文件(小结)
10-17
在 Vue-cli 2.0 中，package.json 文件是必不可少的，它提供了项目的基本信息和依赖关系。 在 package.json 文件中，我们可以看到以下几个重要的部分： * name：项目的名称。 * version：项目的版本号。 * ...
vue cli 的文件目录入门
sky_666_leo的博客
03-27 921
1.Vue-cli 使用旅程 先安装# 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖，走你 $ cd my-project $ npm install $ npm run dev2.看看build文件夹的文件...
vue-cli项目构建目录介绍
筑释科长的博客
11-09 343
一：用vue-cli正确构建一个项目的目录如下： 二：目录介绍如下： 2.1：一级目录/文件介绍如下： build文件夹: 用于存放  webpack 相关配置文件 config文件夹: 用于存放  vue基本配置文件 node_modules文件夹:  用于存放  npm install 安装的依赖代码库 src文件夹: 主要用于存放  我们开发的代码。 staic文件夹:  ...
vue-cli目录结构解析
Java_53的博客
05-27 629
vue-cil项目目录结构 dist (由"npm run build"打包后生成,真正挂载到服务器的前端所有代码) node_modules (第三方包目录,安装第三方包时生成) public (公共资源目录) static (静态资源) img (图片) XX.jpg (jpg图片) XX.png (png图片) index.html (首页文件) src (源文件目录) assets (资源库) icons (图像) lightbox (灯箱) overlays (叠加
vue-cli 目录结构详细讲解
weixin_30718391的博客
07-23 168
https://juejin.im/post/5c3599386fb9a049db7351a8 vue-cli 目录结构详细讲解 目录 结构预览 ├─build // 保存一些webpack的初始化配置,项目构建 │ ├─build.js // 生产环境构建 │ ├─check-version.js // 检查...
Vue CLI脚手架项目目录详解
最新发布
drhnb的博客
07-07 1000
当用npm run serve启动项目时，首先会运行入口程序main.js 1、main.js会引入并加载根组件App.vue 2、注册：注册分为局部注册和全局注册,可以将components下的普通组件在App.vue中进行引入和局部注册，或在main.js中进行引入和全局注册 3、main.js 将加载的App.vue挂载到 public/index.html 中定义的容器元素上
vue cli入口文件解析
Martian的博客
10-17 671
1.入口文件的概述。 在vue cli构建的项目中，main.js是项目的入口文件，定义了vue实例，并引入根组件app.vue，将其挂在到index.html中id为'app'的节点上。 如图，main.js，app.vue，index.html文件的结构如下图所示： 各个文件的作用： 一.main.js，程序入口文件，初始化vue实例并使用需要的插件； 二.app.vue...
vue学习的第三天——聊聊vuecli的文件夹
m0_57069925的博客
05-31 816
vue学习第三天，要是会可以跳过哟
vue-cli脚手架中 文件夹的用法
m18697787579的博客
01-24 832
vue-cli脚手架中 文件夹的用法 public文件夹：一般放置一些静态资源(图片)，需要注意，放在public文件中的静态资源，webpack进行打包时回原封不动的放在dist文件夹中。 src文件夹 (程序员源代码文件夹) assets文件夹 : 放置静态资源，需要注意的是在webpack打包的时候，webpack会把静态资源当作一个模块，打包js文件里面 components文件夹：组件 app.vue 根组件 main.js：程序入口文件，最先执行的文件 render 挂载组件 babel.con
vue基础七：.vue文件，vue-cli、vue.config.js、ref属性、props配置
白骨梦儿
12-09 855
单文件组件的写法1. 单文件组件的样式2.单文件组件的使用流程3. vue-cli的安装 1. 单文件组件的样式 单文件组件都是.vue为后缀的文件； 内容： <template></template> <script> // 组件交互相关的代码,包含数据等 export default { } </script> <style> /* 组件的样式 */ .demo{ background-color: aquam
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值