Vue 2 升级Vue3 ,并且使用vsCode 搭建Vue3 开发环境

Vue 2 升级Vue 3 版本详细步骤

第一:使用快捷键win+R,打开cmd 命令窗口。

第二:查看当前电脑运行的vue 版本,请使用如下指令:

vue -V / vue -Version

 

卸载目前vue版本,输入如下指令:

npm uninstall vue-cli -g

 温馨提示:使用Windows 11 提示报错信息不用在意,由于Windows 11 操作的文件权限 要求比较高,导致有些vue 的文件无法正常删除,需要管理员的权限才可以操作,我们仅仅需要确保当前环境已经移除Vue 环境。再次执行查看Vue 版本信息。

 第三步:安装Vue 3

前提条件:确保你的Node.js的版本高于vue 3 最低要求的版本。Vue CLI 3需要 nodeJs ≥ 8.9。

执行如下指令,查看当前Node.js 版本信息:

node -V

 执行如下指令,安装Vue 3版本,执行如下指令:

npm install -g @vue/cli

若安装不上使用下面命令进行安装

cnpm install -g @vue/cli

然后运行命令vue -V查看vue的版本

 

如果显示版本就说明Vue3 安装成功。

VS Code 搭建Vue3 开发环境

VS Code 安装Vue3 环境插件

  • vetur:Vue 3 运行插件
  • Chinese: 中文

 自此 VS Code 涉及Vue  3 开发环境已经搭建完毕。

使用Vite快速搭建vue3开发项目

标准语法:

npm init vite-app 项目名称

cd 项目名称

npm install

npm run dev

 实战:

E:\vue_workspace>npm init vite-app vue3-demo
Need to install the following packages:
  create-vite-app
Ok to proceed? (y) y
npm WARN deprecated [email protected]: create-vite-app has been deprecated. run `npm init @vitejs/app` or `yarn create @vitejs/app` instead.
Scaffolding project in E:\vue_workspace\vue3-demo...

Done. Now run:

  cd vue3-demo
  npm install (or `yarn`)
  npm run dev (or `yarn dev`)


E:\vue_workspace>cd vue3-demo

E:\vue_workspace\vue3-demo>npm install
npm WARN deprecated [email protected]: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser
npm WARN deprecated [email protected]: Please use @jridgewell/sourcemap-codec instead

added 290 packages in 29s

 Vue 3  项目本地访问:http://localhost:3000/

猜你喜欢

转载自blog.csdn.net/zhouzhiwengang/article/details/129879138