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
相关推荐
孤水寒月1 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀2 小时前
html初学者第一天
前端·html
脑袋大大的3 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络4 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘4 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way4 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家5 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689975 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽6 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头6 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github