Vue 之vue-cli 脚手架项目的目录结构介绍

最新推荐文章于 2024-06-20 10:26:21 发布
最新推荐文章于 2024-06-20 10:26:21 发布
阅读量244 收藏 1
点赞数
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lhy_JL/article/details/117464129
版权

一、项目的目录结构

  • 项目例子
    目录图片

二、目录结构介绍

  1. node_modules ： 项目的依赖中心
  2. public ： 静态资源文件，和assets 不同的是：public不会被webpack打包，使用的是绝对路径
  3. src ：项目的核心区域：所有的开发文件的核心内容区域，包括组件，静态资源等等。
    • assets : 静态文件夹，使用的是相对路径
    • components ： 整个vue功能组件的存放位置
    • App.vue ： 整个vue的根组件，
    • main.js ：vue 的入口文件，
Lhy@@
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 脚手架搭建目录及文件详解
GillianQi
02-28 8546
vue脚手架搭建在各大前端网站都有详解，这里就不多作介绍，此文章主要介绍脚手架搭建后的目录结构，以及配置文件的详解。 1. 目录结构 目录结构如下： 我们来介绍一下这些目录： 一级目录 build: webpack 配置相关的目录 config: webpack 配置相关的目录 node_modules:  npm install 安装的依赖代码库 src: 存放源码，我们开发...
详解vue-cli 脚手架项目-package.json
12-08
使用vue-cli脚手架新建的项目中，含有package.json。 package.json是npm的配置文件，里面设定了脚本以及项目依赖的库。 npm run dev 这样的命令就写在package.json里。 { "name": "vue-manage", // 项目名称 ...
Vue2.0 项目实战案例及Demo，基于vue2.0+vuex+vue-router+axios实现
热门推荐
李留白
02-06 1万+
Github地址：https://github.com/hicoldcat/TimeCat
Vue项目的详细目录结构解析
最新发布
weixin_45131680的博客
06-20 1285
我们在使用Vuevue-demo├── dist //项目构建后的输出目录├── public├── src├── tests //选装：测试模块├── ...dist—— 项目构建打包后的默认输出目录。查看详情 ->—— 项目依赖文件，其中包括很多基础依赖和自己安装的依赖。查看详情 ->public—— 存放公共资源和项目的主入口文件index.html。查看详情 ->src—— 项目核心文件夹：包括项目源码，各种静态资源等等。是我们开发的重点工作目录。查看详情 ->test。
vue脚手架项目目录介绍
白玉杰的博客
04-07 652
最近在学习vue，看的稀里糊涂。今天从头开始，把vue项目目录和配置文件搞清楚。 先看看整个项目目录结构： 再看看build文件夹下相关文件及目录： config文件夹下目录和文件： 接下来说说vue-cli项目中页面相关的主要文件o 首先是index.html: 说明：一般只定义一个空的根节点，在main.js里面定义的实例将挂载在#app节点下，内容通过vue组件填充。 App.vue...
vue脚手架项目目录及介绍
Xiang_Gong_Ya_的博客
12-31 593
很多时候我们不会如何去写 是因为我们不知道基本的原理 所以在写一个项目的时候 我们要先明白 什么文件是干什么的 才能更好的去实现我们的需求 cli 启动 项目目录 node_modules // 项目中依赖包 （npm i）下载 public // 静态资源目录 应用 唯一 index.html就在public中 index.html // 项目主页面 //在main.js里面定义的实例将挂载在#app节点下，内容通过vue组件填充。 src // 源码目录 assets // 静态资源目录
vue 脚手架目录
u014196765的博客
09-13 649
目录结构 这里捎带 脚手架的目录介绍，如果已经了解，轻飘过 一级目录 build: webpack 配置相关的目录，webpack 配置文件，已经配置好，如果想研究 webpack 可以基于这个进行研究 config: webpack 配置相关的目录 node_modules: npm install 安装的依赖代码库，这个不能动里面的代码，是根据 package.json 下载的...
详解使用vue-cli脚手架初始化Vue项目下的项目结构
08-27
在本文中，我们将详细介绍使用vue-cli脚手架初始化Vue项目下的项目结构。vue-cli是Vue提供的一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。 vue-...
electronic-vue：具有vue-cli脚手架，常见Vue插件，electron-packagerelectron-builder，unite2e测试，vue-devtools和Webpack的Electron＆Vue.js快速入门样板
02-02
电子VUE需要的优势vue-cli脚手架， webpack与vue-loader ， electron-packager或electron-builder ，以及一些最喜欢使用的插件vue-router ， vuex ，和这么多。 查看详细文档。 您会在此样板中找到的东西... 带有...
Vue使用vue-cli创建项目
01-19
本文介绍了Vue使用vue-cli创建项目，分享给大家，具体如下： vue-cli 是一个官方发布vueJS项目脚手架：https://github.com/vuejs/vue-cli 我创建的模板项目：...
Vue-cli项目目录结构
肖潇不写代码
05-18 256
一、目录结构 二、解释 ├── index.html 入口页面 ├── build 构建脚本目录 │ ├── build-server.js 运行本地构建服务器，可以访问构建后的页面 │ ├── build.js 生产环境构建脚本 │ ├── dev-client.js...
vue cli 脚手架项目目录
weixin_44166439的博客
02-05 125
public 静态资源 src 源码目录 src/main.js vue项目的入口文件 src/App.vue 单文件组件 xxx.vue就是一个单文件组件 .xxx 插件配置文件 .gitnore git上传的忽略文件 dis 编译打包后文件目录 指令 npm run serve 本地开发环境启动 npm run build 编译打包 后会产生dist文件 文件里面的路径是绝对路径，如果想在本地打开要做修改成相对路径 ...
vue-cli--脚手架目录一览
代码DJ的博客
12-04 301
说明：入口文件来着，主要作用是初始化vue实例并使用需要的插件。说明：一般只定义一个空的根节点，在main.js里面定义的实例将挂载在#app节点下，内容通过vue组件填充。说明：app.vue是项目的主组件，所有页面都是在app.vue下切换的。一个标准的vue文件，分为三部分。该style作用于只在当前组件的节点及其子节点，但是不包含子组件呦。是子路由视图，后面的路由页面都显示在此处，相当于一个指示标，指引显示哪个页面。说明：定义了三个路由，分别是路径为/，路径为/msg，路径为/detail。
vue-cli生成的项目目录结构
seimeii的博客
11-25 270
|-- build // 项目构建(webpack)相关代码 | |-- build.js // 生产环境构建代码 | |-- check-version.js // 检查node、npm等版本 | |-- utils.js // 构建工具相关 | |-- vue-loader.conf.js // webpack
Vue CLI脚手架项目目录详解
drhnb的博客
07-07 993
当用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-介绍项目的目录结构
Czy010506的博客
11-19 153
vue.js
vue项目目录详解
weixin_42491987的博客
02-22 227
下载好依赖的vue项目目录 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基本.
【Vue】Vue-cli(脚手架)的目录结构详解（转载）
【敦厚的曹操】的专栏
03-24 7002
一、图简单说明下各个目录都是干嘛的： 　　总体框架：一个vue-cli的项目结构如下，其中src文件夹是需要掌握的，所以本文也重点讲解其中的文件，至于其他相关文件，了解一下即可。 四、文件结构细分 　　1、build——[webpack配置] 　　build文件主要是webpack的配置，主要启动文件是dev-server.js，当我们输入npm run dev首先启动的就是dev-server.js，它会去检查node及npm版本，加载配置文件，启动服务。 　　2、config——[
手动配置webpack创建Vue项目：仿vue-cli脚手架
"本文将引导读者使用webpack搭建一个Vue项目，并实现类似vue-cli的脚手架功能。在过程中，我们将了解如何创建项目、配置webpack、引入依赖以及设置基本的项目结构。" 创建Vue项目的步骤： 1. 首先确保你已经安装了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值