vue cli 脚手架

限时加码!20+主流AI编程工具免费用 购周边加赠Coding Plan Lite,Claude Code、Cursor等即刻畅享,学习进阶更高效! 阅读详情

Vue脚手架的使用  vue cli (command line interface 命令行接口工具)

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统

文档地址:介绍 | Vue CLI

具体步骤

注意:安装脚手架之前一定要先安装好node.js

第一步(仅第一次执行):全局安装@vue/cli。

npm install -g @vue/cli

在这里我的node.js 没有配置好,后面重新配置之后直接可以vue -v看到了,如下图

 

第二步:切换到你要创建项目的目录,然后使用命令创建项目

vue create xxxx

第三步:启动项目

npm run serve

备注:

1.如出现下载缓慢请配置npm 淘宝镜像:npm config set registry https://registry.npm.taobao.org    

2.Vue 脚手架隐藏了所有webpack 相关的配置,若想查看具体的webpakc 配置,请执行:vue inspect > output.js

仿vue-cli3写一个自己的vue-cli脚手架 目前在市面上存在很多脚手架,如:create-react-app、vue-cli。我们可以通过一行简单的命令,就能创建一个基本的项目工程,大大的提高了开发效率。但是我们会面临一个问题,除了脚手架帮我们创建好的项目框架,我们的项目总有需要定制化的配置,比如我们需要引入我们想要的elementUI框架,引入axios相关的工具类完成http请求等。我们不可能每次开启新项目都再配置一遍吧,这太劳神费力了。 通常我们会搞一个个性化脚手架cli,平时创建项目时通过该脚手架一键生成,并同时... 阅读详情

相关推荐

脚手架vue-cli与@vue/cli概念辨析

脚手架 「为减少重复性工作而做的重复性工作」的工具 例子 你要写一个项目0,源语言为ES6,用了sass, 后端是node.你每次完成一部分功能,你都要用把ES6编译到ES5、编译sass、压缩html文件。每次修改代码都要做的编译ES6、sass、压缩html这些就是重复性工作。 后来你知道了gulp, 然后你写了个gulp脚本,每次有代码改动,一句gulp build就帮你完成了上面说的这些重复性工作. 你写的gulp脚本就是为减少重复性工作而做的工作。你写完这个项目0之后,你又要写项目1,还是ES6、

skysys的研究小屋 1965

Vue实战之Vue CLI 脚手架

Vue CLI 脚手架 14.1 什么是CLI 命令行界面(英语:command-line interface,缩写:CLI)是在图形用户界面得到普及之前使用最为广泛的用户界面,它通常不支持鼠标,用户通过键盘输入指令,计算机接收到指令后,予以执行。也有人称之为字符用户界面(CUI) 14.2 什么是Vue CLI Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。使用Vue 脚手架之后我们开发的页面将是一个完整系统(项目)。 14.3 Vue CLI优势 通过 vue-cli

helloworld工程师的博客 1075

避坑指南:Win10安装Docker Desktop时Hyper-V报错的7种解决方案(2024最新版)

本文提供了2024年最新、最全面的Windows 10系统下Docker Desktop安装时Hyper-V报错的解决方案指南。文章深入剖析了Hyper-V与Docker的共生关系,并系统性地给出了从BIOS/UEFI设置、Windows功能启用、bcdedit命令修复到处理多虚拟化环境共存等7种核心解决方案,帮助开发者彻底解决安装困局,顺利部署容器化开发环境。

weixin_28840143的博客 503

Vue-cli(vue脚手架)上万字总结,超详细教程

1、创建Vue脚手架 1.1、首先系统需要全局安装Vue脚手架 npm install -g @vue/cli 1.2、创建Vue脚手架工程 进入你想创建vue脚手架的目录,然后输入命令 vue create xxx项目名 需要注意的是工程名字不能大写,这里我们选择选择Vue2,敲下回车,那么vue将会为我们创建vue脚手架 显示如图所示说明创建成功 如图命令所示 我们进入myvue工程,执行命令 npm run serve 然后浏览器访问http://localhost:8080/ 到这

weixin_45647685的博客 3万+

vue-cli脚手架教程

安装vue-cli的前提是你已经安装了npm,安装npm你可以直接下载node的安装包进行安装。这是因为引用资源的路径问题,我们只要在下图的地方修改一下再打包就可以了,需要修改的文件在项目目录下的config文件夹里的index.js文件中。在projectname项目目录下执行 npm run build ,打包项目,打包完成之后,我们就可以像打开静态网页一样打开我们完成的项目。这样父组件的变量就传到了子组件,然后子组件使用如下方式接收,这样在子组件中就可以使用变量了,例如:{{username}}

刻苦的樊同学 3294

vue-cli脚手架

Vue脚手架Vue官方提供的标准化开发工具(开发平台),它提供命令行和UI界面,方便创建vue工程、配置第三方依赖、编译vue工程删除已安装的 vue-cli先安装淘宝镜安装cli安装结束后,你可以通过或vue -V查看 vue-cli 的版本信息。

lanlan112233的博客 2557

Vue CLI 脚手架详解:快速构建 Vue.js 项目的利器

Vue CLIVue.js 官方提供的脚手架工具,它可以帮助开发者快速搭建 Vue.js 项目的基础结构,并提供了丰富的功能和插件来增强开发体验。本文将深入解析 Vue CLI 的使用方法和特性。

weixin_43749805的博客 1388

vue-clivuejs 脚手架)创建一个项目

在一个大型的项目里,把所有的代码都放到一个文件里显然是不现实的,所以在实际做项目的时候,我们都会把他们分类放到不同的文件里面,使它们尽可能的小,这样也便于后期的维护和管理。 根据项目的功能需求,划分出不同的功能模块,然后建立相关的文件夹进行统一的管理。这种管理访问一般我们叫做 工程化 管理。 什么是 vue-cli 当我们的 vuejs 项目一定大的时候,我们也要考虑一下这种工程化的管理模式,vu...

ghost_violets的博客 394

vue-cli脚手架安装

vue-cli 脚手架 安装 一、 node安装 1)如果不确定自己是否安装了node,可以在命令行工具内执行: node -v (检查一下 版本); 2)如果 执行结果显示: xx 不是内部命令,说明你还没有安装node , node 安装地址:http://nodejs.cn/download/ 注 :安装 vue-cli 脚手架目前需要node版本为 v4.0 以上; 解决速度慢的问题: 将npm的仓库地址改为淘宝镜像:npm config set registry https://regist

weixin_44141393的博客 1732

Vue CLI 脚手架

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。 使用Vue 脚手架之后我们开发的页面将是一个完整系统(项目)。 前端系统

程序员小王的博客 2457

Vue-CLI脚手架详解

title: Vue CLI脚手架详解 tags: Vue VueCLI categories: Vue abbrlink: 5277 date: 2020-06-12 14:22:00 什么是Vue CLI 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLIn 如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI 使用Vue.js开发大型应用时,我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。 如果每个项目都要手动完成这些工作,那无.

kylin's study 1万+

vue cli脚手架详解_Vue-CLI脚手架到底是什么?

点击右上方红色按钮关注“web秀”,让你真正秀起来前言如果你用Vue搭建过项目,应该都熟悉vue init webpack projectName命令,至于为什么是这个命令,相信了解的人不是特别多,反正我能用就行了。现在我们就来好好了解一波。Vue-CLI是什么?Vue-CLIVue.js脚手架,用于自动生成vue.js+webpack的项目模板。运行vue init webpack proj...

weixin_39517520的博客 1969

vue CLI脚手架搭项目

1.安装 node.js环境 官网下载:https://nodejs.org/en/download/ 一直默认就行,路径可以改变但要记得到 安装完成后cmd打开终端,输入node -v ,npm -v 若能看到node和npm的版本号了,则说明已经安装成功 2、官方参考网址: 官方参考网址:https://cli.vuejs.org/zh/ 3.安装(如果npm安装不了,就换淘宝境像cnpm...

weixin_42479115的博客 3988

1. Vue CLI脚手架

vue cli 脚手架详解

qq_59962490的博客 941

vue-cli2脚手架详细讲解

vue-cli2脚手架详细讲解

m0_66722601的博客 1448

WEB前端:vuejs全家桶(34):vue-cli脚手架

vue-cli脚手架 1. 简介 vue-cli是一个vue脚手架,可以快速构造项目结构 vue-cli本身集成了多种项目模板: simple 很少简单 webpack 包含ESLint代码规范检查和unit单元测试等 webpack-simple 没有代码规范检查和单元测试 browserify 使用的也比较多 browserify-simple ##...

weixin_43731793的博客 191

脚手架vue-cli及webpack

上一章我们学习了组件的使用,这一章讲解怎么使用vue cli脚手架的安装和使用。

炑焽的博客 1004

Vue-CLI脚手架

我们学习Vue时,很多教程都会说到用Vue-CLI构建项目,那么什么是脚手架?什么是Vue-CLI?为什么要用脚手架,好处在哪?以及为何我们用Vue开发项目时要用到Vue-CLI?   首先,CLI为command-line interface的缩写,意为:命令行界面。注意,CLI不是“脚手架”的英文简称,而是command-line interface的英文简称。Vue CLI 是一个 Vue....

weixin_30391339的博客 197
上一篇: 前端学习--Bable的使用步骤
下一篇: 前端库--nanoid(轻量级的uuid)
susud
博客等级 码龄7年 1粉丝 11原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值