VUE 3.0 如何新建项目 详细教程 附环境搭建 推荐
本人新入手一台电脑,需要安装各种环境配置,顺便把过程记录一下,方便自己以后查看,也欢迎大家参考交流。
目录
一、环境搭建:
1.Node.js安装
2.国内淘宝镜像设置
3.安装vue 环境
二、新建vue项目
1.vue脚手架新建项目
2.命令行运行启动项目
3.查看运行结果以及测试修改信息
首先查看自己开发环境 也可参考:vue从零开始配置-CSDN博客
一、环境搭建:
1.Node.js安装
:Node.js — 下载 Node.js?安装后win+r 命令行查询出现版本号 就表示安装成功了。npm不用单独安装,node安装之后就会附带npm一起安装的
2.国内淘宝镜像设置
命令行执行代码配置:npm config set registry https://registry.npmmirror.com
可参考:npm国内淘宝镜像registry镜像过期-CSDN博客
输入cnpm -v 查询到cnpm版本号说明安装成功了
3.安装vue 环境
命令行输入 cnpm i -g vue @vue/cli 安装
安装成功后 vue -V 出现对应的版本号即表示安装成功,环境安装好了,现在我们来新建一个vue项目。
vue项目编码必备插件参考:必备插件自取 vue3.0 在vscode提升编码效率-CSDN博客
二、新建vue项目
1.vue脚手架新建项目
在命令行输入vue create todolist 其中 todolist 是你所新建的项目名称,安装包下载成功界面如图所示。
现在我们用vscode编辑器 打开刚刚新建的vue项目 ,可以看到项目结构目录。
vscode安装配置可参考:vscode下载安装配置一步到位超简单-CSDN博客
2.命令行运行启动项目
打开命令行输入npm run serve运行项目。
根据项目运行结果提示 访问本地地址。
3.查看运行结果以及测试修改信息
运行结果默认是vue的初始页面
我们把页面中显示的welcome to Your Vue.js App 信息改成 Hello world!信息,保存后可以看到页面信息已经变化。
现在我们已经成功新建了一个vue项目了。欢迎大家参考交流,谢谢。
如需学习react可参考:React 开发环境搭建 超详细 全面 推荐-CSDN博客