vue cli 脚手架项目目录

最新推荐文章于 2022-03-24 15:39:17 发布
最新推荐文章于 2022-03-24 15:39:17 发布
阅读量125 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44166439/article/details/113688352
版权
本文详细介绍了Vue项目的目录结构，包括`public`、`src`、`.xxx`插件配置文件、`.gitignore`及`dist`目录的作用。重点讲解了`main.js`作为入口文件，`App.vue`作为单文件组件的角色。同时，提到了本地开发环境启动指令`npm run serve`和编译打包命令`npm run build`，以及打包后路径的调整问题。
摘要由CSDN通过智能技术生成

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

public 静态资源
src 源码目录
src/main.js vue项目的入口文件
src/App.vue 单文件组件 xxx.vue就是一个单文件组件
.xxx 插件配置文件
.gitnore git上传的忽略文件
dis 编译打包后文件目录

指令
npm run serve 本地开发环境启动
npm run build 编译打包 后会产生dist文件 文件里面的路径是绝对路径，如果想在本地打开要做修改成相对路径

妙莲
关注
专栏目录
基于vue-cli创建的项目的目录结构及说明介绍
11-30
一、 ├── build // 项目构建(webpack)相关代码 记忆：（够贱） 9个 │ ├── build.js // 生产环境构建代码 │ ├── check-versions.js // 检查node&npm等版本 │ ├── dev-client.js // 热加载相关 │ ├── dev-server.js // 构建本地服务器 │ ├── utils.js // 构建配置公用工具 │ ├── vue-loader.conf.js // vue加载器 │ ├── webpack.base.conf.js // webpack基础环境配置 │ ├── webpack.dev.con
Vue 之vue-cli 脚手架项目的目录结构介绍
Lhy_JL的博客
06-02 244
一、项目的目录结构 项目例子 二、目录结构介绍 node_modules ： 项目的依赖中心 public ： 静态资源文件，和assets 不同的是：public不会被webpack打包，使用的是绝对路径 src ：项目的核心区域：所有的开发文件的核心内容区域，包括组件，静态资源等等。 assets : 静态文件夹，使用的是相对路径 components ： 整个vue功能组件的存放位置 App.vue ： 整个vue的根组件， main.js ：vue 的入口文件， ...
vue脚手架项目目录介绍
白玉杰的博客
04-07 653
最近在学习vue，看的稀里糊涂。今天从头开始，把vue项目目录和配置文件搞清楚。 先看看整个项目目录结构： 再看看build文件夹下相关文件及目录： config文件夹下目录和文件： 接下来说说vue-cli项目中页面相关的主要文件o 首先是index.html: 说明：一般只定义一个空的根节点，在main.js里面定义的实例将挂载在#app节点下，内容通过vue组件填充。 App.vue...
Vue脚手架项目目录结构
lihefei_coder的博客
09-04 945
Project ├── build 构建脚本目录 │ ├── build.js 生产环境构建（编译打包）脚本 │ ├── check-version.js 检查node、npm等版本 │ ├── dev-client.js 开发服务器热重载脚本，主要用来实现开发阶段页面自动刷新 │ ├── de...
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-cli 脚手架项目-package.json
12-08
使用vue-cli脚手架新建的项目中，含有package.json。 package.json是npm的配置文件，里面设定了脚本以及项目依赖的库。 npm run dev 这样的命令就写在package.json里。 { "name": "vue-manage", // 项目名称 ...
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
01-21
以上所述是小编给大家介绍的解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站...
使用vue-cli脚手架工具搭建vue-webpack项目
12-10
为了解决这个问题，Vue 官方提供了 `vue-cli` 这个脚手架工具，它可以帮助开发者快速地生成一个包含所有必需配置的项目模板。 1. **安装Node.js环境**： 在搭建Vue项目之前，首先确保你的计算机上安装了Node.js。...
vue-cli脚手架config目录下index.js配置文件的方法
10-18
在 Vue CLI 项目中，`config` 目录下的 `index.js` 文件是项目的配置中心，它允许开发者自定义项目在开发和生产环境中的各种设置。本文将详细介绍 `index.js` 配置文件及其各个选项的作用。 1. **环境参数定义**： ...
详解如何使用vue-cli脚手架搭建Vue.js项目
10-19
- 使用vue-cli脚手架创建的项目已经包含了热加载、代码检查、单元测试和CSS分离等现代Web开发所需的功能。 - Vue.js项目的目录结构是预设好的，这包括源码、资源、构建配置等不同部分的文件夹。 - 在进行项目开发时...
Vue CLI 项目目录结构
ckk727的博客
03-26 206
npm install -g @vue/cli //安装CLI npm install -g @vue/cli-init //安装桥接工具，拉取CLI旧版本 vue init webpack myproject //vue2.x版本初始化项目 vue create myproject //vue3.x以上版本初始化项目 Vue2.x初始化项目过程： vue init webpack v...
vue/cli2.0 vue/cli3.0 脚手架项目目录
weixin_45677987的博客
06-17 256
1： Vue/cli2.0 项目目录解析： node 指令是可以直接执行 js 文件的。 但是在之前js 文件只可以在浏览器端运行。 但是js 文件可不可运行在服务器端。 就是开发node 框架。 把js 文件运行在服务器端, nodejs 是一种环境。 node本身是由c++ 开发; 1.1: node 是一种开发环境, 其核心就是 v-8 引擎, v-8 引擎 ==> 谷歌开发的 v-8 引擎。 chrome 浏览器中的v8 引擎, js 代码会会生成一个中间的东西叫做字节码,
Vue学习（一）
QFAXue123的博客
10-08 134
vue项目文件配置介绍 1.build（webpack的初始化配置文件） 2.config（index.js-项目配置） 3.node_modules(项目依赖模块，代码库) 4.src (程序文件) 5.static（静态文件资源） 6.test（测试代码） |-- build // 项目构建(webpack)相关代码 | |-- build.js // 生产环境构建代码 | |-- check-version.js // 检查node、npm等版本 | |-- dev-client.js // 热重载相
vue脚手架搭建的目录结构
Carrie_zzz的博客
07-13 500
一级目录 build: webpack配置相关的目录 config webpack 配置相关的目录 node_modules npm install 安装的依赖代码库 src我们存放的源码，我们开发的所哟代码都放在src目录下。 staic存放一些第三方静态资源的目录 test测试目录，没有太大用处，可以删除 一级文件 babelrc: babel的一些配置，（将e...
【 Vue全家桶 · Vue CLI（四）】Vue项目的详细目录结构解析
JZevin的博客
10-15 9232
Vue项目的详细目录结构解析
【vue项目0-1搭建】vue-cli脚手架目录结构及其改造（2）
小猿备忘录
05-12 399
（1）安装完成后默认vue脚手架目录结构 |-- build //项目构建(webpack)相关代码 | |-- build.js //bulid.js是webpack的打包文件，通过配置package.json中的script来执行脚本。命令号npm run build即运行node build/build.js | |-- check-versions.js //检查node跟npm版本号 | |-- logo.png | |-- utils.js //相关构建工具.
vue-cli脚手架项目目录讲解
Jackewe的博客
10-23 369
vue-cli项目目录讲解 基本不动的 build --构建 （打包构建的js） config --配置 （配置文件 端口/打包路径） node_modules --node 模块 （下载的插件/模块） 开发 src --项目目录 （操作的目录，写组件，功能，路由） assets --静态资源 （...
【Vue】Vue-cli(脚手架)的目录结构详解（转载）
【敦厚的曹操】的专栏
03-24 7011
一、图简单说明下各个目录都是干嘛的： 　　总体框架：一个vue-cli的项目结构如下，其中src文件夹是需要掌握的，所以本文也重点讲解其中的文件，至于其他相关文件，了解一下即可。 四、文件结构细分 　　1、build——[webpack配置] 　　build文件主要是webpack的配置，主要启动文件是dev-server.js，当我们输入npm run dev首先启动的就是dev-server.js，它会去检查node及npm版本，加载配置文件，启动服务。 　　2、config——[
vue-cli目录详解
qq_43121828的博客
07-23 1988
vue-cli脚手架目录一览 最近在学习vue，看的稀里糊涂。今天从头开始，把cli配置的vue项目目录和配置文件搞清楚。 先看看整个项目目录结构： 再看看build文件夹下相关文件及目录： config文件夹下目录和文件： 接下来说说vue-cli项目中页面相关的主要文件o 首先是index.html: 说明：一般只定义一个空的根节点，在main.js里面定义的实例将挂载在#app节点下，...
Vue CLI脚手架安装与项目构建教程
本文档详细介绍了如何在Vue.js项目中使用vue-cli脚手架进行搭建和安装，涵盖了从基础环境检查到项目初始化的整个流程。首先，确保您的计算机上已经安装了Node.js，特别是版本需在v8.11.0及以上，可以通过命令行验证...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值