vue-cli脚手架工具新老版本安装对比

脚手架安装

Shift+鼠标右键 选择打开命令窗口

创建项目之前,需先确保本机已经安装node

在命令窗口中确认node环境与JavaScript生态包npm是否安装

执行命令

node -v

npm -v

 

切换npm淘宝镜像

一般情况下用npm安装东西比较慢,可以使用淘宝镜像 在命令窗口中执行

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

安装成功之后,cnpm就可以替代npm

 

安装vue-cli脚手架工具

cnpm install vue-cli -g或者npm install vue-cli -g

安装之后,在命令窗口中执行vue -V(V为大写)查看是否安装成功,成功会出现版本

以上步骤成功之后,相当于基础环境已经部署完成,就可以使用npm来创建项目了

选择路径,创建项目

如d盘创建一个文件夹,进入文件夹,在命令窗口中

执行vue init webpack 项目名称(自己命名)

Project name(项目名称):回车
Project description(项目介绍):回车
Author:作者名
Vue build(是否安装编译器):回车
Install vue-router(是否安装Vue路由):y 回车
Use ESLint to lint your code(是否使用ESLint检查js代码):n 回车
Set up unit tests(安装单元测试工具):n 回车
Setup e2e tests with Nightwatch(是否安装端到端测试工具):n 回车

Should we run npm install for you after the project has been created? (recommended):回车。

启动项目

cd 项目名称

npm run dev

浏览器输入localhost: 端口号即可

流程图

新版本安装与老版本卸载

TIPS:

关于旧版本。Vue CLI 的包名称由 vue-cli 改成了 @vue/cli如果你已经全局安装了旧版本的 vue-cli(1.x 2.x),你需要先通过 npm uninstall vue-cli -g  yarn global remove vue-cli 卸载它。

npm run serve

posted @   研发之心  阅读(7565)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· .NET10 - 预览版1新功能体验(一)
点击右上角即可分享
微信分享提示