Vue工程化开发&脚手架Vue CLI

已于 2024-08-05 21:14:46 修改
阅读量434 收藏
点赞数 12
分类专栏： Vue2 文章标签： vue.js javascript 前端 前端框架
于 2024-08-04 18:48:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2302_80695016/article/details/140909620
版权

win加r打开命令提示符输入cmd

输入npm i @vue/cli -g全局安装

输入vue --version查看Vue版本

我在桌面创建了一个存放项目的文件

打开命令输入cmd

 输入F：转为我桌面磁盘

cd 后面跟文件地址

进去后输入vue create 项目名 （项目名-不能用中文）创建项目架子

第一个是Vue3，第二个是Vue2，第三个是自定义架

我这边选择Vue2回车


 

项目安装好了

将项目拖到vs code中

进入后是这样子的

在package.json右键点击在集成终端中打开

打开后

输入npm run serve

ctrl+鼠标左键点击http://localhost:8080/进入页面，页面启动成功

文件目录介绍

梦晨黑
关注
  • 12
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue--》超详细教程——vue-cli脚手架的搭建与使用
ztK63LrD的博客
11-14 4626
它简化了程序员基于webpack创建工程化的Vue项目的工程。其好处就是简省了程序员花费时间去配置webpack，从而目标只需专注在撰写项目应用上。，基于vue-cli这个系统，我们就可以快速搭建好“（英文名：Singleagepplication）简称SPA，顾名思义指的是，所有的功能与交互都在这唯一的一个页面内完成。
【Vue学习笔记_14】Vue CLI 2&3 脚手架
weixin_44752429的博客
11-28 628
【Vue学习笔记_14】Vue CLI 2&3 脚手架Vue CLI 初识Vue CLI 2初始化项目ESLint规范Runtime-only和Runtime+Compiler的区别目录结构解析Vue CLI 3Vue CLI3与Vue CLI2的区别初始化项目目录结构解析Vue CLI3配置文件的查看和修改 配套可执行代码示例 => GitHub Vue CLI 初识 需求：使用Vue开发大型项目时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情，如果每个项目都要手动完
【Vue】工程化开发&脚手架Vue CLI
m0_62645012的博客
02-14 1696
Vue Cli是Vue官方提供的一个全局命令工具可以帮助我们快速创建一个开发Vue项目的标准化基础架子【集成了webpack配置】脚手架目录文件介绍&项目运行流程组件化开发&跟组件App.vue文件（单文件组件）的三个组成部分。
工程化开发 & 脚手架 Vue CLI
m0_73882020的博客
07-09 540
1. 核心包传统开发模式：基于 html / css / js 文件，直接引入核心包，开发 Vue。2. 工程化开发模式：基于构建工具（例如：webpack ) 的环境中开发 Vue。举例如下图。
工程化开发：Vue cli 脚手架 介绍&安装
zneVue
03-02 406
Vue CLl 是 Vue 官方提供的一个全局命令工具，可以帮助我们快速创建一个开发 Vue 项目的标准化基础架子。
Vue工程化开发和脚手架Vue CLI
m0_74462339的博客
05-03 601
Vue CLI是Vue官方提供的一个全局命令工具。可以帮助我们快速创建一个开发的Vue项目的标准化基础架子。（集成了webpack配置）
vue-cli3.0 脚手架搭建项目的过程详解
10-17
Vue CLI 3.0 是 Vue.js 官方提供的一个强大脚手架工具，它简化了 Vue.js 项目的初始化和构建过程。本篇文章将详细介绍如何使用 Vue CLI 3.0 来搭建一个新的 Vue 项目。 首先，你需要确保已经安装了 Node.js 和 npm...
脚手架vue-cli工程webpack的作用和特点
12-09
Vue CLI，全称为 Vue.js Command Line Interface，是 Vue 的官方脚手架，它预先配置了 Webpack，使得开发者能够快速地搭建 Vue 项目。理解 Webpack 的作用和特点对于优化 Vue 项目的构建流程至关重要。 首先，让...
vue使用自定义指令实现一键复制
最新发布
Zing_ing的博客
09-09 334
/ 将需要复制的内容保存到元素上if (!console.log('无复制内容');return;// 创建一个 textarea 元素，用于选择和复制// 执行复制命令try {console.log('复制成功:', el.$value);console.log('复制失败');// 删除创建的 textarea 元素// 监听点击事件},// 当指令所在的元素被更新时触发},// 指令解绑时移除事件监听});
vue3.5新增特性
yunbabac的博客
09-05 421
vue3.5
vue中slots插槽的使用
2403_86834756的博客
09-04 655
4.在Dome2中写入的代码与Dome1相似但里面的内容不一样，当我们启动不同页面时显示的是启动页面的数据，xxm-layout只是作为一个引用的页面当不同的页面用时显示不同的数据，就是说它的框架是固定的只需要为其传入值就行了。3.当我们有多个slot时就需要为其添加名称，否则编译器不知道因该为哪一个添加，就会出现有slot的地方都添加了数据，当我们为其添加名称后在子类中也需要通过名称为其写入数据。可以看到我们写入的数据在中间插槽处显示，并且头部和尾部相继显示在上下处。
GoFly企业版里的阿里图标如何增加自定义图标到后台
GoFLy开发者的博客
09-04 554
（3）将生成好的图标复制.js文件放到项目index.html文件中。（1）配置 FontClass/Symbol 前缀为：svgfont-（2）配置 Font Family 为 iconfont。在使用位置的组件，返回图标名称。
开发适合el-dialog的拉伸拖拽自定义指令和适配自定义的图片查看组件
鹤渺的星球
09-05 1427
我之前有开发过一个图片查看的组件，这个组件可在单页面打开，也可以在弹窗里打开，但是弹窗因为是比较固定，所以有一些局限性，只能拖拽，不能改变弹窗大小，于是有了开发【可以拖拽改变大小的弹窗】组件。通过自定义指令，实现弹窗的移动拖拽拉伸等功能动态计算弹窗的位置与尺寸，因为弹窗的位置和尺寸是动态计算的，涉及到鼠标的实时位置和弹窗初始位置之间的关系。代码也贴上去了，仅供参考。
标签中的ref属性
qq_40792800的博客
09-04 783
可能存在的情况是，在挂载之前，ref() 函数已经执行，此时获取的引用则是undefined，在挂载之后，Vue 底层会自动找到对应的 ref() 与 经过ref 标记的DOM或组件，并赋值给 Value属性。1、在标签中添加 ref 属性的同时，需要在 脚本中 通过 ref() 函数定义一个容器来放置 给ref属性打上标签的DOM或组件实例，且接收的变量需要 与 标签中的ref 属性值相同。按照Vue2 的情况，此时在父组件中是可以访问到子组件中的数据的，但是通过打印，我们发现什么都没拿到。
Chapter 11 脚手架Vue CLI使用步骤
2302_80253507的博客
09-06 678
Vue CLI 是 Vue.js 官方提供的一个全局命令工具，旨在帮助开发者快速创建和管理 Vue 项目。它为开发者提供了一个标准化的项目结构，并集成了 webpack 配置，使得开发过程更加高效和便利。
手写 Vue Router 中的 Hash 模式和 History 模式
书呆子ITme
09-06 987
通过手写简化版的Vue Router，我们深入理解了Hash 模式和History 模式的实现原理。Hash 模式依赖于hashchange事件，而 History 模式依赖于pushState和API。两种模式各有优缺点，可以根据项目需求选择合适的路由模式。Hash 模式：简单、无需服务器配置，但URL不美观，对SEO不友好。URL美观且符合SEO要求，但需要服务器支持。
el-popover弹框自定义位置
weixin_47218354的博客
09-05 345
【代码】el-popover弹框自定义位置。
【vite-plugin-vue-layouts】关于 vue-layouts 布局插件的使用和注意事项
weixin_41899098的博客
09-06 1015
环境：vue3 + vuetify3 + unplugin-vue-router是怎么创建这个项目的：选择它推荐的设置（Recommend）
Vue组件化开发：vde-cli脚手架实践
"Vue项目组件化工程开发实践方案，通过vde-cli脚手架实现高效组件库构建，包括组件库、Doc文档工程和Example例子工程。核心功能是自动化创建和管理组件，通过npm run generate命令快速生成组件文件，并自动更新主...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值