安装vue-cli新版本并构建项目

本文介绍了如何卸载旧版vue-cli并安装最新版本@vue/cli,然后通过npm安装webpack及其插件,接着详细讲解了使用yarn进行安装及配置,并通过vue-cli4创建并运行前端项目的过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一:卸载老版本安装新版本

1、查看版本:vue -V
2、卸载旧版本:npm uninstall vue-cli -g
在这里插入图片描述
3、安装新版本:npm install -g @vue/cli
在这里插入图片描述
4、安装Webpack命令
本地安装(官方推荐本地安装):
npm install webpack --save-dev
npm install webpack-cli --save-dev

全局安装:
npm install -g webpack
npm install -g webpack-cli

webpack提供的插件,可以运行一个web服务,加载页面内容,并且修改js后不需要重新加载就能看到最新结果:
npm install webpack-dev-server --save-dev
在这里插入图片描述
5、安装yarn命令
npm install -g yarn --registry=https://registry.npm.taobao.org
安装完后进行检查,yarn是否安装成功:
yarn --version
出现版本号,表示安装成功。
接着为了以后安装快速,可以配置淘宝镜像,执行以下两个命令:
yarn config set registry https://registry.npm.taobao.org -g
yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

二:vue-cli4构建项目

1、选择路径,创建项目,例如在d:盘创建一个文件夹,进入文件夹。
2、新建项目:vue create new_app(new_app项目名称)
在这里插入图片描述
3、选择配置在这里插入图片描述
4、进入项目文件夹:cd new_app
在这里插入图片描述
5、运行项目:npm run serve
在这里插入图片描述
6、进入地址
在这里插入图片描述
7、可以看到这个界面,项目搭建完成
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值