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
相关推荐
LuckySusu4 小时前
【js篇】深入理解 JavaScript 原型与原型链
前端·javascript
文心快码BaiduComate4 小时前
文心快码入选2025服贸会“数智影响力”先锋案例
前端·后端·程序员
云枫晖4 小时前
手写Promise-构造函数
前端·javascript
文心快码BaiduComate4 小时前
用Comate Zulu开发一款微信小程序
前端·后端·微信小程序
王王碎冰冰4 小时前
基于 Vue3@3.5+跟Ant Design of Vue 的二次封装的 Form跟搜索Table
前端·vue.js
naice5 小时前
我对github的图片很不爽了,于是用AI写了一个图片预览插件
前端·javascript·git
天蓝色的鱼鱼5 小时前
Element UI 2.X 主题定制完整指南:解决官方工具失效的实战方案
前端·vue.js
RoyLin5 小时前
TypeScript设计模式:门面模式
前端·后端·typescript
小奋斗5 小时前
千量数据级别的数据统计分析渲染
前端·javascript
小文刀6966 小时前
CSS-响应式布局
前端