vue-cli文件用途

最新推荐文章于 2024-12-06 11:06:02 发布

Queen_zdd

最新推荐文章于 2024-12-06 11:06:02 发布

阅读量1.3k

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/Queen_zdd/article/details/80049818

版权

vue 专栏收录该内容

11 篇文章

订阅专栏

vue-cli是vue的一个脚手架工具，主要作用：目录结构、本地调试、代码部署、热加载、单元测试

当vue-cli安装完成之后，你的项目中会出现如下的目录

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Queen_zdd

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue CLI 官方文档（三）模式和环境变量（--mode，.env）、构建目标（--target）、部署

qq_43456781的博客

10-11

1472

Vue CLI 官方文档（三）模式和环境变量（–mode，.env）、构建目标（–target）、部署文章目录Vue CLI 官方文档（三）模式和环境变量（--mode，.env）、构建目标（--target）、部署1. 模式和环境变量模式环境变量示例：Staging 模式在客户端侧代码中使用环境变量只在本地有效的变量2. 构建目标应用库Vue vs. JS/TS 入口文件Web Components 组件注册多个 Web Components 组件的包异步 Web Components 组件在构建时使用

Vue-cli各文件的作用

qq554244261的博客

01-05

395

node_modules 存储第三方的依赖模块 public index.html是整个项目默认的html模板 favicon.ico是浏览器上的图标 .editorconfig 编辑器的默认配置 babel.config.js 配置Vue里面babel的配置 package.json 放的是依赖文件的信息（版本啥的） package-lock.json 保证反复安装时版本的正确 README.md 写的是项目描述性内容 src目录（最重要） main.js 项目的入口文件，创建根组件，引入VueX和.

参与评论您还未登录，请先登录后发表或查看评论

vue-cli 替我们做了哪些工作？

weixin_40918145的博客

02-26

1285

首先需要知道 vue-cli 是什么？它是基于 Vue.js 进行快速开发的完整系统，也可以理解成是很多 npm 包的集合。其次，vue-cli 完成的功能有哪些？ .vue 文件 --> .js 文件 ES6 语法 --> ES5 语法 Sass,Less,Stylus --> CSS 对 jpg,png,font 等静态资源的处理热更新定义环境变量，区分 dev 和 production 模式 vue-cli是vue的一个脚手架工具，主要作用：目录结构、本地调试、代码部署、

Vue CLI的作用

行思理的博客

12-06

619

Vue CLI（Command Line Interface）是一个基于Vue.js的官方脚手架工具，其主要作用是帮助开发者快速搭建Vue项目的基础结构和开发环境。

Vue-cli作用以及简单使用

weixin_42592399的博客

02-16

336

Vue CLI(Vue Command Line Interface)是一个命令行工具，用于快速创建和管理基于 Vue.js 的项目。 Vue CLI 可以帮助开发者：快速创建一个基于 Vue.js 的项目，并提供默认的目录结构、构建配置等；管理项目依赖，自动安装和升级 npm 包；提供开发服务器和热重载(hot reload)功能，方便开发调试；构建和打包项目，生成部署所需的静态资源。...

vue-cli3中配置alias和打包加hash值操作

10-14

在 Vue CLI 3 中，我们可以在 `vue.config.js` 文件中进行设置。首先，我们需要引入 `path` 模块： ```javascript const path = require('path') function resolve(dir) { return path.join(__dirname, dir) } ``...

使用vue-cli4.0快速搭建一个项目的方法步骤

10-15

最后，由于 vue-cli 4.0 中目录结构有所变化，建议仔细阅读官方文档以了解不同文件夹和文件的用途，以及如何根据项目需求进行自定义配置。例如，ESLint、Prettier 等代码质量检查工具的配置文件的存放位置，以及如何...

vue-cli的工程模板与构建工具详解

10-17

Vue CLI（命令行接口）是Vue.js官方提供的一款强大的脚手架工具，用于快速搭建Vue.js项目。它提供了预设的工程模板和构建工具，帮助开发者遵循最佳实践并快速启动开发工作。本文将深入解析vue-cli中的工程模板和构建...

详解vue-cli 脚手架项目-package.json

10-19

对于使用`vue-cli`创建的项目而言，`package.json`文件扮演着核心角色，它不仅定义了项目的元数据，还包含了项目的配置信息、脚本命令及项目依赖等。 #### 项目元数据 `package.json`文件首先定义了一些基本的项目...

vue-cli脚手架-bulid下的配置文件

11-27

本文主要针对初学者，详细解释Vue CLI的`build`目录下配置文件的用途和工作原理。 ### Vue CLI安装与Webpack项目创建 1. **安装Node.js**: 在开始之前，确保已安装最新稳定版的Node.js。可以通过官方下载页面或...

vue-cli到底做了哪些事

qq_36582776的博客

03-16

1166

1.ES6代码转换成ES5代码 2. scss/sass/less/stylus转css 3. .vue文件转换成js文件 4. 使用 jpg、png，font等资源文件 5. 自动添加css各浏览器产商的前缀 6. 代码热更新 7. 资源预加载 8. 每次构建代码清除之前生成的代码 9. 定义环境变量 10. 区分开发环境打包跟生产环境打包 ...

vue-cli文档

weixin_30477293的博客

02-08

204

vue-cli文档转载于:https://www.cnblogs.com/aliwa/p/6376443.html

Vue学习—深入剖析vue-cli脚手架（一）

xun__xing的博客

10-29

1509

深入剖析vue-cli脚手架一、vue-cli介绍1.该系统的组件1）CLI2）CLI 服务3）CLI 插件二、vue-cli安装三、vue-cli基础1.快速原型开发1）vue serve2）vue build2.创建项目1）vue create2）使用图形化界面3.插件和 Preset1）插件2）Preset4.vue-cli服务1）使用命令2）vue-cli-service serve3）vue-cli-service build4）vue-cli-service inspect5）.查看所有的可用命

Vue CLI的简介和使用

小徐的博客

07-24

3015

一、什么是Vue Cli VueCli被称为vue脚手架，是一个用于快速构建vue开发环境和配置的一个工具。见名知意：也正如工地上的脚手架一样，房子框架已经搭好了，可以砌房子了 vue脚手架也是一样框架已经搭好，可以直接写代码了使用Vue Cli的前提：已安装 Webpack、node、npm 二、为什么要用VueCli？我们在开发大型项目时，要考虑代码的目录结构、依赖配置、部署、热加载

vue框架-vue-cli

陆卿之的博客

02-18

2182

VUE-cli

vue-cli到底做了什么

sinat_36227086的博客

03-18

1946

1.抽象介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，习惯称之为“脚手架”。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。（官方文档: https://cli.vuejs.org/zh/guide/.） 2.vue-cli到底做了哪些事 ES6代码转换成ES5代码 2. scss/sass/less/stylus转css 3. .vue文件转换成

vue-cli2脚手架目录作用总结

csdn_xuebing的博客

06-20

447

参考来源：https://www.cnblogs.com/vuenote/p/9323831.html

了解何为vue-cli及其作用

weixin_56286359的博客

04-11

510

初步了解何为vue-cli，及其如何构建工程

技术文档（1）vue-cli创建项目

dugujiuding的博客

03-16

2773

vue-cli创建项目

"local": "vue-cli-service serve --mode local", "dev": "vue-cli-service serve --mode dev", "front": "vue-cli-service serve --mode front", "build:prod": "vue-cli-service build --mode prod", "build:stage": "vue-cli-service build --mode stage", "build:dev": "vue-cli-service build --mode dev", "build:static": "vue-cli-service build --mode static", "preview": "node build/index.js --preview", "lint": "eslint --ext .js,.vue src", "clean": "rimraf node_modules"pacakge.json文件中有好几个启动应该启动那个？

最新发布

03-14

在 `package.json` 文件中定义了多个脚本命令，每个都有特定用途。选择合适的启动命令取决于当前的工作场景以及目标环境。 ### 脚本解释 1. **开发调试阶段** - `"local": "vue-cli-service serve --mode local"` 这个命令是以“local”模式运行应用，适合本地测试和快速迭代使用。 - `"dev": "vue-cli-service serve --mode dev"` 开发模式下运行应用程序。“dev”通常表示正式开发流程中的状态，适用于多人协作或更接近实际部署前的状态模拟。 - `"front": "vue-cli-service serve --mode front"` 可能是一个针对纯前端展示的特殊模式设定，用于分离前后端交互时仅渲染页面内容的情况。 2. **构建打包阶段** - `"build:prod": "vue-cli-service build --mode prod"` 构建生成最终产物至生产环境中使用的文件夹内，包含压缩后的静态资源等，性能最优考虑。 - `"build:stage": "vue-cli-service build --mode stage"` 类似于预发布版本创建过程，一般会经过详细验证后再投入线上运营之中。 - `"build:dev": "vue-cli-service build --mode dev"` 根据需求定制化程度较高的开发者专用打包方案，保留较多调试信息方便排查问题。 - `"build:static": "vue-cli-service build --mode static"` 主要是导出完全独立于服务器支持的HTML+CSS+JS形式站点，非常适合CDN分发等情况下的单页程序（SPA）。 3. **辅助工具及清理功能** - `"preview": "node build/index.js --preview"` 打包完成后提供可视化界面浏览已制作好的成果效果的一种快捷手段。 - `"lint": "eslint --ext .js,.vue src"` 对源码进行语法规范校验工作，保证团队成员遵守一致编码风格的同时减少潜在隐患发生几率。 - `"clean": "rimraf node_modules"` 清理掉整个依赖库缓存区以便重新安装最新组件或者解决因残留数据引发异常状况的有效途径之一。 --- ### 推荐做法对于日常学习研究或者是刚开始接触该项目的朋友来说，“dev”模式是最常用也是最简便的选择： ```bash npm run dev ``` 它能够实时更新更改结果并且集成了热替换机制(HMR)，极大地提高了工作效率！如果您准备上线项目，则需切换到对应的生产环境下执行相应的编译任务，例如： ```bash npm run build:prod ``` 最后再通过指定的方式上传至远程主机供大众访问体验。