1.vue-cli脚手架创建vue项目

已于 2022-02-16 14:48:04 修改
阅读量242 收藏
点赞数
分类专栏： Vue开发 文章标签： vue.js npm javascript
于 2022-02-16 14:43:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26843541/article/details/122962988
版权
本文介绍了如何通过Node.js和npm安装Vue CLI，步骤包括下载、全局安装、创建新项目并选择配置。详细指导了从创建hello-world项目到验证版本、启动开发服务器的过程，适合初学者快速上手。
摘要由CSDN通过智能技术生成

官方文档链接：介绍 | Vue CLI

1. 下载安装node.js，官方链接Node.js

2.通过NPM命令安装vue-cli（脚手架）

3.运行 npm install -g @vue/cli

npm install -g @vue/cli

4.安装完毕后，可以通过vue -version验证vue版本或者通过命令npm update -g @vue/cli全局更新vue脚手架

5.创建一个vue项目目录，cmd命令行切换到该目录下

6.在cmd命令行内执行以下命令vue create [xxxx]

vue create hello-world

7.根据所需选择对应的配置项

8.根据提示执行

cd hello-world
npm run serve

在浏览器访问

9.执行结果

 

 

不喝咖啡的农民
关注
专栏目录
使用Vue脚手架（Vue cli）构建Vue项目
fakerking的博客
08-14 281
Vue脚手架
详解vue-cli 脚手架项目-package.json
12-08
使用vue-cli脚手架新建的项目中，含有package.json。 package.json是npm的配置文件，里面设定了脚本以及项目依赖的库。 npm run dev 这样的命令就写在package.json里。 { "name": "vue-manage", // 项目名称 ...
Vue Cli脚手架搭建Vue项目
qq_40593244的博客
05-16 117
Vue Cli脚手架搭建Vue项目
VUE3脚手架工具cli配置搭建及创建VUE工程
雾林小妖的博客
06-17 2593
VUE3脚手架工具cli配置搭建及创建VUE工程
使用vue-cli脚手架创建vue项目
a654540233的博客
08-23 699
vue-cli2.x项目向3.x迁移只需要把static目录复制到public目录下，老项目的src目录覆盖3.x的src目录(如果修改了配置，可以查看文档，用cli3的方法进行配置)vue create是vue-cli3.x的初始化方式，目前模板是固定的，模板选项可自由配置，创建出来的是vue-cli3的项目，与cue-cli2项目结构不同，配置方法不同，具体配置方法参考官方文档。vue-cli 3 的设计原则是“0配置”，移除的配置文件根目录下的，build和config等目录。
使用vue-cli脚手架搭建一个vue项目
XiaoHH的博客
09-14 484
首先你得下载一个nodejs，点击这里进入下载界面，安装步骤基本上全部点下一步就行。然后配置环境变量 然后配置环境变量 然后我们安装vue-cli脚手架，在cmd当中使用命令： npm install -g vue-cli 看到这个代表安装成功： 还有安装webpack： npm install -g webpack 然后来到一个目录使用命令创建项目(指明用webpack打包，用vue-cli-demo作为项目名) vue init webpack vue-cli-demo 配置如下： # 项目
详解如何使用vue-cli脚手架搭建Vue.js项目
10-19
- 使用vue-cli脚手架创建的项目已经包含了热加载、代码检查、单元测试和CSS分离等现代Web开发所需的功能。 - Vue.js项目的目录结构是预设好的，这包括源码、资源、构建配置等不同部分的文件夹。 - 在进行项目开发时...
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
01-19
用vue-cli构建了项目之后在webstorm开发，用npm run dev跑本地服务，...以上这篇浅谈VUE-CLI脚手架热更新太慢的原因和解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
vue-cli脚手架的.babelrc文件用法说明
10-14
`.babelrc` 文件是 Vue CLI 脚手架中的一个重要配置文件，用于定义 Babel 的转码规则和插件。Babel 是一个广泛使用的 JavaScript 编译器，它允许开发者使用 ES6+ 甚至实验性语言特性，然后将这些新特性转换为广泛...
Vue-Cli 脚手架 搭建 Vue项目
灵魂学者的博客
02-03 2230
本篇主讲如何通过vue提供的vue-cli脚手架来搭建vue项目，自此开始进行Vue基于项目中的介绍，Vue-cli 是官方提高用于搭建基于 Vue、Webpack、ES6 项目目的脚手架工具，通过脚手架创建项目势必会较为高效！
脚手架vue-cli创建Vue项目手把手教学
H524268015wsw的博客
11-18 4225
Default是默认选择（vue2,vue3）,Manually select features 是自己手动选择，可以选择你需要的。通常都是自己手动选择,键盘上下键选择，enter确定。用vue -V检查版本，如果出现“vue” 不是内部或外部命令，也不是可运行的程序或批处理文件，就说明你电脑没有安装vue。像这种要选择yes还是no的一般情况下都是选择no，可以避免下次写特殊项目不好配置。再然后也是一些选项，按照翻译选择自己需要的，我这里选的倒数第二个。选择自己需要的以后，按下回车再次选择自己需要的。
使用脚手架搭建vue项目
最新发布
m0_65520060的博客
07-08 811
下面这个是对创建vue项目的方式进行选择，下面主要讲解下面三种方式Default ([Vue 3] babel, eslint) 创建vue3项目（默认配置）Default ([Vue 2] babel, eslint) 创建vue2项目（默认配置）Manually select features 自定义的方式搭建vue项目（重点）下面呢主要对如何自定义配置vue项目来进行讲解（通过上下箭头进行选择，Enter键确定那种搭建模式）
vue-cli脚手架创建vue项目
qq_39254643的博客
11-26 81
目录 前言 一、安装Node.js 二、安装webpack 三、安装vue-cli脚手架构建工具 四、通过vue-cli搭建项目 五、项目中各个文件夹目录说明 前言 一、安装Node.js 1.1 在官网下载node.js,根据自己电脑进行安装。在官网安装的node.js自带npm包管理器 1.2 测试node是否安装成功（node -v） 二、安装webpack 在控制台执行npm install webpack -g，安装完成之后执行webpack -v检测是否安装完成，出现
vue-cli脚手架搭建vue项目
AmberWu
01-31 445
之前一直有朋友问我vue项目的搭建，最近空下来整理总结了一番。 1. vue-cli 首先来介绍一下vue-cli，官方是这么解释的： A simple CLI for scaffolding Vue.js projects. 需要Node.js (>=4.x, 6.x preferred), npm version 3+ and Git。 官方网站：https://www
Vue-cli（Vue脚手架）vue脚手架搭建项目
胡迪警长的博客
08-27 1628
vue脚手架搭建 1.Vue.js是一套构建用户界面的渐进式框架。 2.Vue 只关注视图层，采用自底向上增量开发的设计。 3.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 前言 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供： 通过 @vue/cli 实现的交互式的项目脚手架 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发 一个运行时依赖 (@vue/cli-service)，该依赖： 可升
Vue基础知识总结 10：使用vue-cli（vue脚手架）快速搭建项目_vuecli搭建项目(1)
2401_84447043的博客
05-16 492
阿里十分注重你对源码的理解，对你所学，所用东西的理解，对项目的理解。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】一、什么是VueCLI1、如果你只是简单写几个Vue的Demo程序，那么你不需要VueCLI脚手架。2、如果你在开发大型项目，那么你需要，并且必然需要使用VueCLI。3、CLI是什么意思？4、脚手架长什么样？5、脚手架依赖于node.js和webpack二、安装Vue CLI脚手架三、runtime-compiler和runtime-only的区别。
9. Vue-cli脚手架如何创建项目及特点
04-04
Vue-cli脚手架可以通过以下步骤创建项目： 1. 安装Node.js环境 2. 全局安装Vue-cli脚手架：`npm install -g vue-cli` 3. 创建项目：`vue init <template-name> <project-name>` 4. 进入项目：`cd <project-name>` 5...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值