小白如何搭建vue-cli项目

已于 2023-11-30 15:56:13 修改
阅读量180 收藏
点赞数 1
分类专栏： vue 文章标签： javascript html html5 vue.js
于 2023-10-31 12:40:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40808668/article/details/106854794
版权

下载安装

先下载一个国内淘宝镜像，原因是下载比较快并且稳定

npm install cnpm -g --registry=https://registry.npm.taobao.org

下载完我们可以使用cnpm来下载东西
然后开始下载gepackage-lock.json记录下载的内容

npm i -y

脚手架

下载vue脚手架，命令

cnpm install -g vue-cli

创建一个基于webpack的项目，命令

vue init webpack

会显示一系列配置项，根据自己的选择，下面是我自己配置的选项
在这里插入图片描述
下载成功提示
在这里插入图片描述
在浏览器运行地址 localhot:8081在这里插入图片描述
显示创建项目页面
在这里插入图片描述
大功告成
下面是我文件目录
在这里插入图片描述

嚣张农民
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
如何搭建vue-cli脚手架开发vue项目
Allanwhy的博客
04-23 219
如何搭建vue-cli脚手架开发vue项目 使用vue-cli搭建vue项目，需要的本地环境是node和npm，node.jsde 安装详细可以去官网了解，安装流程清晰.地址：node.js.关于npm包的安装这里有两种形式。一种是npm，另一种是cnpm淘宝镜像。区别是：cnpm的下载速度比npm快，原因是，cnpm的服务器在国内，npm在国外，下载npm包的时候如果网络不给力，经常下不了报错。...
如何用vue搭建项目
XiehaiyanLI的博客
08-18 139
整理一下今天学的用vue搭建项目 一、安装最新版本的vue脚手架 vue-cli官网：https://cli.vuejs.org/zh/ npm install -g @vue/cli 安装 注意：如果不是最新版本，要先卸载旧的版本，然后再下载最新的版本。 npm uninstall -g @vue/cli 卸载 二、使用vue脚手架创建项目 首先要写入的文件夹，打开 创建项目 vue create 项目名 手动搭建项目 手动选择要搭建的环境 是否使用mod
vue-cli脚手架搭建时基础设置说明
m0_46694056的博客
10-05 405
基础选项 Check the features needed for your project: (✳) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。 ( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行 ( ) Progressive Web App (PWA) Support// 渐进式Web应用程序 (✳) Rout
小白的第一次 VUE项目搭建 --- 详细步骤（脚手架）
今年22仍然是小白的博客
05-29 354
VUE学习为什么用VUE.第一次安装脚手架： 为什么用VUE 你好！ 这是我第一次搭建vue项目总结步骤，小白的我看到了官网的 易用、灵活、高效。 .第一次安装 我在学习前的准备，一步步来，我的是windows系统： 下载node.js https://nodejs.org/en/download/ (windows版本的) 在下载完成后，直接点击安装 （傻瓜式一直下一步） cmd 输入 node --version 验证是否安装成功 安装cnpm 命令 npm install -g cnpm --re
搭建vue环境 小白安装全记录
coralime的博客
04-25 271
#1#-> 安装nvm nvm是一个node.js的版本管理器。 Github地址：https://github.com/nvm-sh/nvm 下载地址：https://github.com/coreybutler/nvm-windows/releases nvm-noinstall 免安装版本，需要手动配置一些环境变量 nvm-setup 在线引导式安装，推荐这种方式 按照引导提示，设置好安装目录后，点击next，直到安装完成。 默认安装nvm的地址是[C:\Users...
Vue的小白项目开发Demo
WaterSprite_ct的博客
02-28 3072
Vue的小白项目开发Demo一、安装并创建应用程序1. 全局安装Node.js2. 全局安装vue-clinpm install --global vue-cli3. 创建一个基于webpack的新项目(应用)vue init webpack my-project4. 进入目录并安装依赖包cd my-project npm install5. 启动应用npm run dev //由package....
小白如何安装vue.js
mingtian_future的博客
03-23 279
这几天，刚刚开始接触vue.js，配置环境成了大难题，几经周折，其中辛酸不足为外人道也！ 首先你要下载node.js 配置好node环境
手把手教你用vue-cli搭建vue项目
04-07
手把手教你用vue-cli搭建vue项目
基于webpack搭建vue-cli.zip
最新发布
02-15
适用于希望学习不同技术领域的小白或进阶学习者。 可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】： 项目具有较高的学习借鉴价值，也可直接拿来修改复刻。 对于有一定基础或热衷于研究...
使用vue-cli创建项目的图文教程(新手入门篇)
01-21
本文是针对对于完全没有了解过vue 和npm，连运行环境和项目构建的都不会的小白，对于前端老司机的就不用看了，浪费时间。 使用npm 与vue-cli 构建vue 项目 第一步：安装运行环境（node与npm） nodeJ官网：...
基于vue-cli2.0的华为商城项目源码.zip
08-26
基于vue-cli2.0的华为商城项目源码.zip基于vue-cli2.0的华为商城项目源码.zip基于vue-cli2.0的华为商城项目源码.zip基于vue-cli2.0的华为商城项目源码.zip基于vue-cli2.0的华为商城项目源码.zip基于vue-cli2.0的华为...
前端小白：如何从零开始搭建Vue项目（完整步骤）
just a moment
08-05 1941
1、安装node.js和npm 到node.js官网下载相应安装包，选择想要安装的目录即可，一路傻瓜式安装。 安装完毕，在终端输入命令 node -v，输出版本号即代表安装成功。 node安装完后，npm包管理器会自动安装，继续输入命令 npm -v，输出版本号即代表npm安装成功。 由于npm是国外资源的原因可能会导致失败，则用npm的国内镜像安装，在终端输入npm install -g cnpm –registry=http://registry.npm.taobao.org ，安装完成之后输入cnp
记录一下代码小白第一次搭建vue项目
ddjqq的博客
08-24 250
参考教程：https://www.cnblogs.com/miller-star/p/6394760.html 准备： 1.下载并安装 node.js 下载地址：https://nodejs.org/en/download/ 配置环境变量path：把node安装地址加入path 查看node版本：node -v 注：若出现版本及安装成功 2.npm/cnpm 基于node.js,利...
前端小白Vue环境安装以及安装目录修改
weixin_45006814的博客
06-24 3142
修改安装目录： 1创建一个npm下载安装插件的安装目录文件夹 2创建两个文件夹,分别叫node_global_modules和node_cache（起名按照自己理解，非固定） 在命令行输入指令 npm config set prefix “第一个文件夹的路径” npm config set cache “第二个文件夹的路径” 3执行npm config ls来查看设置的结果 npm config ls 4设置完就可以把原来默认路径下的文件夹删除了一般在下面的目录下： 修改npm源： .
搭建一个vue项目(完整步骤)
duanna0824的专栏
06-22 2万+
一、安装node环境　　1、下载地址为：Node.js　　2、检查是否安装成功：如果输出版本号，说明我们安装node环境成功　　3、为了提高我们的效率，可以使用淘宝的镜像：npmmirror 中国镜像站　　输入：npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了。　　检查是否安装成功：二、搭建vue项目环境　　1、全局安装vue-cli　　npm install --
从零开始搭建一个Vue项目
小虾米的成长之路
03-26 7886
Vue.js是现在比较优秀的Web前端框架，下面开始从零开始搭建一个Vue项目。流程如下： 一、安装node.js 1.进入node.js官网下载相应安装包：https://nodejs.org/en/ 安装过程没有什么要注意的地方，直接安装到自己想安装到的目录里面就可以了 2.安装完成以后，打开命令行，输入node -v来判断是否安装成功 3.在安装node的时候...
小白搭建vue----vue项目搭建成功后，创建demo项目
weixin_34353714的博客
07-26 185
步骤一：确定项目创建位置，我的在D盘 步骤二：运行 vue init webpack vueDemo（vueDemo是文件名，可任取） 步骤三：操作步骤二后，会有上图显示，类似于问答，第一输入项目名，其他的输入回车，到第五个，vue-router,输入y 回车，直至最后，都输入n 回车。 项目创建成功后，会提示接下来的操作内容，即图中黄色部分 步骤四：运行 npm inst...
如何搭建一个vue项目(完整步骤)
热门推荐
没有在适当的年纪做正确的事，非刻意而为之，知识后知后觉!
04-17 17万+
一、环境准备 1、安装node.js 下载地址：https://nodejs.org/zh-cn/ 界面展示 2、检查node.js版本 查看版本的两种方式 1|node -v 2|node -version 出现版本号则说明安装成功（最新的以官网为准） 3、为了提高我们的效率，可以使用淘宝的镜像源 输入：npm install -g cnpm --registry=https://registry.npm.taobao.org 即可安装npm镜像源 以后再用到npm的地方直接用cnpm
手把手教你前后端分离
三横同学的博客
11-22 6539
手把手教你搭建前后端分离项目 1.Vue下载安装具体教程 [https://www.pianshen.com/article/56021694732/]: 技术标签： vue vue.js node.js 对于我这种小白来说，安装个vue全局就绕了好几天。查阅API和不少vue全局安装的文档，各种尝试各种失败。使用webStorm创建vue项目时还是显示各种vue-cli的错误。终于这篇文章拯救了我，成功安装上了vue-cli，可以通过CLI来创建vue了！激动 链接附上： 我看的文章：https://ww
vue-cli创建vue3项目
08-10
- *2* [五分钟教你使用vue-cli3创建项目（三种创建方式，小白入门必看）](https://blog.csdn.net/m0_46374969/article/details/120291155)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

嚣张农民

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值