首页 > 其他分享 >前端环境搭建到创建vue项目运行

前端环境搭建到创建vue项目运行

时间:2023-12-30 17:24:38浏览次数:34  
标签:node vue demo 前端 版本 nvm 安装 搭建

整体流程

1.安装 nvm 管理工具,用于管理 node 的版本方便 node 版本的切换

a.下载 nvm

1.官方下载地址:https://github.com/coreybutler/nvm-windows/releases
2.备用下载地址:https://xiaocai1688.lanzouw.com/b04wvgimj 密码:h33m

b.直接双击安装,验证安装成功输入命令

nvm -v

image

c.查看 nvm 可下载安装的 node 版本命令

nvm list available

image
image

2.利用 nvm 安装 node.js

a.这里下载12.22.12版本命令,你可以选择你需要的版本

nvm install 12.22.12

image

b.让当前系统使用指定版本命令,我这里是 12.22.12 ,你可以选择你需要的版本

nvm use 12.22.12

image

c.验证 node 版本安装成功且正确

node -v

image

3.利用 node 中的 npm 安装 vue ,会有点慢,坐等跑完,只要不是 error 就没事

npm install -g @vue/cli

image

验证安装出现版本号

vue -V

image

4.安装 yarn

npm install -g yarn

5.利用 vue 创建项目和启动项目

a.创建项目命令,这里创建一个项目名字为 demo 的项目, 此处 demo 可修改为你的项目名称

vue create demo

image

b.选择一下 vue 版本回车

image

c.安装完成

image

d.输入命令进入项目文件夹,我的项目名是 demo,你根据你自己的情况来

cd demo

image

e.运行项目

yarn serve

image

成功

image
image

恭喜你,完成了这个 Helloworld! 没问题就点个赞,有问题欢迎留言讨论

标签:node,vue,demo,前端,版本,nvm,安装,搭建
From: https://www.cnblogs.com/wangbingchen/p/17936544.html

相关文章

  • 关于vue里面使用markdown插入视频前台渲染导致<video>等标签被转义成字符,导致视频加载
    markdown中插入视频前台渲染出来导致<video>等标签被转义成字符解决办法:如图:在markdown里面插入视频,可以按照下面写法,哈哈,虽然很捞,但是还是可以满足的。<videosrc="https://xxxxxxxxxxxxxx.mp4"controls="true"style="max-width:100%;height:auto;"></video> ......
  • 在Vue3中实现前端导出Excel功能
    在Vue3中,可以使用第三方库如xlsx来导出Excel文件。以下是一个基本示例:一、Vue3常规写法安装xlsx库首先,你需要安装xlsx库。使用以下命令进行安装:npminstallxlsx导入函数在Vue组件中,导入所需的函数:import{writeFile}from'xlsx';创建模拟数据创建一个函数来生成Excel文件的数......
  • OJ判题测评系统--网关搭建、用户模块
    后端项目初始化跑通项目创建一个SpringCloud项目结构如下application.yml配置如下#公共配置文件#@authorcyr#spring:application:name:cyroj-user-serviceprofiles:active:devdatasource:driver-class-name:com.mysql.cj.jdbc.Driver......
  • OJ判题测评系统--项目基础环境搭建
    写在前面在线访问:暂无..GitHub:https://github.com/975131701/ojSystem/个人博客:https://www.cnblogs.com/cyrui/使用说明1、启动nacos->startup.cmd-mstandalone2、启动rabbitmq->rabbitmq-pluginsenablerabbitmq_management3、启动redis->redis-server4、启动m......
  • 在 Django 中使用 Vue.js 组件的步骤如下³⁴: 1. **安装 Vue.js**:首先,你需要在你的开
    在Django中使用Vue.js组件的步骤如下³⁴:1.**安装Vue.js**:首先,你需要在你的开发环境中安装Vue.js³。2.**创建Vue组件**:在Vue.js中,你可以创建一个新的Vue组件。例如,你可以在`src/components`文件夹下新建一个名为`Home.vue`的组件¹。3.**在Django模板中引......
  • Vue 发布 3.4 「灌篮高手」版本
    本文翻译自AnnouncingVue3.4,作者:EvanYou,略有删改。今天我们很高兴地宣布Vue3.4......
  • CentOS For Linux搭建过程
    在搭建CentOSLinux的过程中,首先需要准备的软件是VMwareWorkstation虚拟机软件,它是在搭建CentOSLinux的过程中,首先需要准备的软件是VMwareWorkstation虚拟机软件,它是用于创建和运行虚拟机的常用工具。然后你需要下载CentOS7的镜像文件,它是一款免费开源的Linux操作系统,广泛应用......
  • 在vue中使用router时所需要的配置
    router.jsimport{createRouter,createWebHistory}from'vue-router';//2.定义路由组件importHomefrom"../views/Home.vue"importLoginfrom"../views/Login.vue"//3.定义路由-配置路由走向constroutes=[{path:"/&qu......
  • Spring Boot学习随笔- 集成MyBatis-Plus,第一个MP程序(环境搭建、@TableName、@TableId
    学习视频:【编程不良人】Mybatis-Plus整合SpringBoot实战教程,提高的你开发效率,后端人员必备!引言MyBatis-Plus是一个基于MyBatis的增强工具,旨在简化开发,提高效率。它扩展了MyBatis的功能,提供了许多实用的特性,包括强大的CRUD操作、条件构造器、分页插件、代码生成器等。MyBati......
  • 修改vue-element-admin的登录逻辑
    <template><divclass="login-container"><el-formref="loginForm":model="loginForm":rules="loginRules"class="login-form"autocomplete="on"label-position="left"&......