Web前端:Vue开发环境搭建

一、搭建开发环境:

1.nodejs安装:

下载地址:

html 复制代码
https://nodejs.org/dist/v20.13.1/node-v20.13.1-x64.msi

查看版本号:

bash 复制代码
node -v

2.安装nrm(用于指定国内镜像源,加速依赖包下载速度):

安装nrm:

bash 复制代码
npm install nrm -g

查看镜像源列表:

bash 复制代码
nrm ls

使用国内镜像源:

bash 复制代码
nrm use taobao

3.安装vue-cli脚手架(用于创建工程):

(1)先卸载已存在的旧vue-cli脚手架:

bash 复制代码
npm uninstall vue-cli -g

(2)安装vue-cli脚手架:

bash 复制代码
npm install -g @vue/cli

4.安装Visual Studio Code:

下载地址:

html 复制代码
https://code.visualstudio.com/docs/?dv=win64user

安装Vetur插件(代码自动提示):

二、使用vue-cli脚手架创建工程:

1.命令行输入创建命令:

bash 复制代码
vue create 工程名

2.根据需要选择项目配置,见下图:

可选择默认或手动配置:

勾选需要的功能:

选择vue版本:

3.打开Visual Studio Code,将整个工程拖拽到Visual Studio Code(会自动加载)。

4.启动项目:

bash 复制代码
npm run serve
相关推荐
rzl026 分钟前
java web5(黑马)
java·开发语言·前端
Amy.Wang7 分钟前
前端如何实现电子签名
前端·javascript·html5
海天胜景9 分钟前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼10 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿12 分钟前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再14 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling55518 分钟前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录23 分钟前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
莫空000024 分钟前
深入理解JavaScript属性描述符:从数据属性到存取器属性
前端·面试
guojl25 分钟前
深度剖析Kafka读写机制
前端