vue从0开始的项目搭建(含环境配置)

一、环境准备

下载node.js + 检查node.js版本 + 替换npm下载源

1.下载node.js: Node.js --- 在任何地方运行 JavaScript (nodejs.org)

2.查看版本: windows+r输入cmd进入输入node -v命令查看版本号是否出现确认是否安装

2.替换npm下载源: npm config set registry https://registry.npmmirror.com

3.查看是否安装成功 npm -v

二、搭建项目

1.在电脑上新建一个文件夹作为vue项目的文件夹, 在此文件夹中空白处按shift键同时点击鼠标右键,选择在此处打开Powershell窗口

2.在命令行中输入以下命令: npm create vue@latest 回车,出现下图这种一直回车

一直回车到新的需要输入为止,如下图

3.进入目录 cd vue-project ,执行 npm install 安装依赖

4.然后执行 npm run dev 运行项目

5.下图网址即是进入项目链接

6.当然还有一种打开方式,是我们最常用的

右键文件夹,选择vscode打开(如果没有vscode可以查看这个链接 点我 查看解决方案 )

然后ctrl+j 打开终端,输入npm run dev即可运行

注意:如果报错如下图

那么先右键最顶部文件夹+打开终端输入npm run dev即可

下次给大家讲解进去之后的基础配置与作用,我是小辉,请多多关照!!

相关推荐
小二·2 分钟前
Python Web 开发进阶实战:AI 伦理审计平台 —— 在 Flask + Vue 中构建算法偏见检测与公平性评估系统
前端·人工智能·python
走粥10 分钟前
选项式API与组合式API的区别
开发语言·前端·javascript·vue.js·前端框架
We་ct13 分钟前
LeetCode 12. 整数转罗马数字:从逐位实现到规则复用优化
前端·算法·leetcode·typescript
方安乐21 分钟前
react笔记之useMemo
前端·笔记·react.js
晚霞的不甘25 分钟前
解决 Flutter for OpenHarmony 构建失败:HVigor ERROR 00303168 (SDK component missing)
android·javascript·flutter
清风细雨_林木木29 分钟前
react 中 form表单提示
前端·react.js·前端框架
小二·36 分钟前
Python Web 开发进阶实战:边缘智能网关 —— 在 Flask + MicroPython 中构建轻量级 IoT 边缘推理平台
前端·python·flask
TOPGUS38 分钟前
解析200万次对话数据:ChatGPT引用内容的核心特征与优化策略
前端·人工智能·搜索引擎·chatgpt·seo·数字营销
羊仔AI探索1 小时前
前端已死,未来已来,谷歌Gemini 3 Pro杀回来了!
前端·人工智能·ai·aigc
2501_944521591 小时前
Flutter for OpenHarmony 微动漫App实战:分享功能实现
android·开发语言·javascript·flutter·ecmascript