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

水深无声 2023-10-10 16:55 17阅读 0赞

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

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

![771fc79247234f0b8c44678c989b4f48.png][]

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

> vue -V / vue -Version

![7a8840a3af6845368c31e818d365b7e7.png][]

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

> npm uninstall vue-cli -g

![b9148f73db9a414f974c6d2f14ee431d.png][]

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

![c828f879c00549e98025a219cbcf16fb.png][]

第三步：安装Vue 3

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

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

> node -V

![eac13c3d3ba648289750446fa5310f66.png][]

执行如下指令，安装Vue 3版本，执行如下指令：

> `npm install -g @vue/cli`
> 
> `若安装不上使用下面命令进行安装`
> 
> `cnpm install -g @vue/cli`

![4adff4137e7b4d5bb0910cb0ad76b354.png][]

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

![cc5089d9325c4039823c27129c2c324c.png][]

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

## VS Code 搭建Vue3 开发环境 ##

### VS Code 安装Vue3 环境插件 ###

*  vetur：Vue 3 运行插件
 *  Chinese： 中文

![6753959eb5cc4d77bcde4d446d6dbf61.png][]

![015f71b077b14813b3a3e96e29e2b747.png][]

自此 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 create-vite-app@1.21.0: 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 rollup-plugin-terser@7.0.2: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser
    npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead
    
    added 290 packages in 29s

Vue 3 项目本地访问：[http://localhost:3000/][http_localhost_3000]![e62287c30b134f9b9d92ecfe94bd2fb3.png][]

[771fc79247234f0b8c44678c989b4f48.png]: https://img-blog.csdnimg.cn/771fc79247234f0b8c44678c989b4f48.png
[7a8840a3af6845368c31e818d365b7e7.png]: https://img-blog.csdnimg.cn/7a8840a3af6845368c31e818d365b7e7.png
[b9148f73db9a414f974c6d2f14ee431d.png]: https://img-blog.csdnimg.cn/b9148f73db9a414f974c6d2f14ee431d.png
[c828f879c00549e98025a219cbcf16fb.png]: https://img-blog.csdnimg.cn/c828f879c00549e98025a219cbcf16fb.png
[eac13c3d3ba648289750446fa5310f66.png]: https://img-blog.csdnimg.cn/eac13c3d3ba648289750446fa5310f66.png
[4adff4137e7b4d5bb0910cb0ad76b354.png]: https://img-blog.csdnimg.cn/4adff4137e7b4d5bb0910cb0ad76b354.png
[cc5089d9325c4039823c27129c2c324c.png]: https://img-blog.csdnimg.cn/cc5089d9325c4039823c27129c2c324c.png
[6753959eb5cc4d77bcde4d446d6dbf61.png]: https://img-blog.csdnimg.cn/6753959eb5cc4d77bcde4d446d6dbf61.png
[015f71b077b14813b3a3e96e29e2b747.png]: https://img-blog.csdnimg.cn/015f71b077b14813b3a3e96e29e2b747.png
[http_localhost_3000]: http://localhost:3000/
[e62287c30b134f9b9d92ecfe94bd2fb3.png]: https://img-blog.csdnimg.cn/e62287c30b134f9b9d92ecfe94bd2fb3.png