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即可

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

相关推荐
CappuccinoRose7 小时前
JavaScript 学习文档(二)
前端·javascript·学习·数据类型·运算符·箭头函数·变量声明
这儿有一堆花7 小时前
Vue 是什么:一套为「真实业务」而生的前端框架
前端·vue.js·前端框架
全栈前端老曹7 小时前
【MongoDB】深入研究副本集与高可用性——Replica Set 架构、故障转移、读写分离
前端·javascript·数据库·mongodb·架构·nosql·副本集
NCDS程序员8 小时前
v-model: /v-model/ :(v-bind)三者核心区别
前端·javascript·vue.js
夏幻灵8 小时前
CSS三大特性:层叠、继承与优先级解析
前端·css
小杨同学呀呀呀呀8 小时前
Ant Design Vue <a-timeline>时间轴组件失效解决方案
前端·javascript·vue.js·typescript·anti-design-vue
qq_532453538 小时前
使用 Three.js 构建沉浸式全景图AR
开发语言·javascript·ar
华玥作者17 小时前
[特殊字符] VitePress 对接 Algolia AI 问答(DocSearch + AI Search)完整实战(下)
前端·人工智能·ai
Mr Xu_17 小时前
告别冗长 switch-case:Vue 项目中基于映射表的优雅路由数据匹配方案
前端·javascript·vue.js
前端摸鱼匠17 小时前
Vue 3 的toRefs保持响应性:讲解toRefs在解构响应式对象时的作用
前端·javascript·vue.js·前端框架·ecmascript