vsCode安装配置创建Vue3项目全过程

 更新时间:2025年01月07日 16:15:15   作者:syd二宝  
本文介绍了如何在Windows系统上安装和配置Vue.js开发环境,包括安装VS Code、Node.js、Vue CLI以及创建和启动一个Vue项目

vsCode安装配置创建Vue3项目

1.安装vsCode

直接去官网下载安装一直下一步就好,这个就不多说了。

安装完成vsCode后在扩展中搜索"Chinese"安装中文语言包

2.安装Node.js

官网地址:Node.js (nodejs.org)

点击下载

下载完成后点击Next下一步。

勾选这个选项等待安装完成就可以了

3.查看Node.js是否安装成功

打开CMD分别输入'node -v'和'npm -v'。出现版本号则安装成功

4.安装脚手架

由于国内速度太慢很可能下载超时,所以我们需要先安装淘宝镜像。

npm config set registry=http://registry.npm.taobao.org

安装完成淘宝镜像后再输入‘npm install -g @vue/cli’安装脚手架

npm install -g @vue/cli

都安装完成后输入'vue -v',看到这个就是已经安装成功了

5.创建vue项目

打开vsCode,点击上方的终端-新建终端。再终端中输入cd “项目目录”。跳转到你需要的目录下

再输入'vue create 项目名称'(禁止出现大写字符!)。之后选择对应的vue版本。建议选vue 3选择完毕后直接回车等待创建完成

创建完成后输入'npm run serve'启动项目。默认端口为8080

打开浏览器输入http://localhost:8080/便可看到新建的vue3项目了

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue如何实时往数组里追加数据

    vue如何实时往数组里追加数据

    这篇文章主要介绍了vue如何实时往数组里追加数据,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue element-ui实现动态面包屑导航

    vue element-ui实现动态面包屑导航

    这篇文章主要为大家详细介绍了vue element-ui实现动态面包屑导航,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • vue3导入excel并解析excel数据渲染到表格中(纯前端实现)

    vue3导入excel并解析excel数据渲染到表格中(纯前端实现)

    在Vue中实现导出Excel有多种方式,可以通过前端实现,也可以通过前后端配合实现,下面这篇文章主要给大家介绍了关于vue3导入excel并解析excel数据渲染到表格中的相关资料,文中介绍的方法是纯前端实现,需要的朋友可以参考下
    2024-04-04
  • vue中改变滚动条样式的方法

    vue中改变滚动条样式的方法

    这篇文章主要介绍了vue中改变滚动条样式的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • Vue中computed及watch区别实例解析

    Vue中computed及watch区别实例解析

    这篇文章主要介绍了Vue中computed及watch区别实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08
  • vue table表格中如何控制下拉框的显示隐藏

    vue table表格中如何控制下拉框的显示隐藏

    这篇文章主要介绍了vue table表格中如何控制下拉框的显示隐藏问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • 基于Vue实现手势签名

    基于Vue实现手势签名

    这篇文章主要为大家详细介绍了基于Vue实现手势签名,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • 老生常谈Vue中的侦听器watch

    老生常谈Vue中的侦听器watch

    开发中我们在data返回的对象中定义了数据,这个数据通过插值语法等方式绑定到template中,这篇文章主要介绍了Vue中的侦听器watch,需要的朋友可以参考下
    2022-10-10
  • 前端Vue页面中展示本地图片简单代码示例

    前端Vue页面中展示本地图片简单代码示例

    今天遇到一个在vue文件中引入本地图片的问题,于是有了这篇文章,本文主要给大家介绍了关于前端Vue页面中展示本地图片的相关资料,需要的朋友可以参考下
    2023-12-12
  • vue实现点击出现操作弹出框的示例

    vue实现点击出现操作弹出框的示例

    这篇文章主要介绍了vue实现点击出现操作弹出框的示例,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下
    2020-11-11

最新评论