Vue开发实例(一)Vue环境搭建第一个项目

Vue环境搭建&第一个项目

  • 一、环境搭建
  • 二、安装Vue脚手架
  • 三、创建Vue项目

一、环境搭建

  1. 下载方式从官网下载:http://nodejs.cn/download/
    在这里插入图片描述

建议下载v12.16.0版本以上的,因为版本低无法创建Vue的脚手架

  1. 检验是否安装成功
    在这里插入图片描述
  2. 配置环境变量
    • 新增NODE_HOME,值为:D:\vue\nodejs
    • 修改PATH并在最后添加:;%NODE_HOME%;%NODE_HOME%\node_global;
    • 到cmd下执行命令
      npm config set prefix "D:\vue\nodejs\node_global"
      npm config set cache "D:\vue\nodejs\node_cache"

Mac终端自行配置,可以使用Homebrew安装对应内容

  1. 更改镜像源

    • 淘宝镜像源:npm config set registry https://registry.npm.taobao.org
    • 华为镜像源:npm config set registry https://repo.huaweicloud.com/repository/npm/
    • 默认镜像源:npm config set registry https://registry.npmjs.org/

    查看镜像设置情况:npm get registry
    在这里插入图片描述

我默认使用的是华为的镜像源

二、安装Vue脚手架

npm install -g @vue/cli

可以在次之前安装一下cnpm

npm install -g cnpm

等待安装完成

三、创建Vue项目

切换到对应自己的目录

vue create vue-test

进入创建配置的选择界面
在这里插入图片描述
选择自己的对应的框架,或者选择Manually select features,自己进行配置

等待创建完成
在这里插入图片描述
创建完成
在这里插入图片描述
创建完成后,目录结构
在这里插入图片描述

进入项目目录,启动项目

cd vue-test
npm run serve

在这里插入图片描述

打开浏览器输入地址,启动完成之后有提示的:http://localhost:8080/
在这里插入图片描述
到此为止,vue初始化的项目就搭建好了~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/505779.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据结构——Top-k问题

Top-k问题 方法一:堆排序(升序)(时间复杂度O(N*logN))向上调整建堆(时间复杂度:O(N * logN) )向下调整建堆(时间复杂度:O(N) )堆排序代码 方法二&…

怎么优雅地访问ChatGPT

ChatGPT,这颗璀璨的智能结晶,在2022年岁末之际,由OpenAI实验室倾力铸就,犹如夜空中跃动的智慧星辰,点亮了人工智能领域的新纪元。犹如汪洋中的一座灯塔,ChatGPT以其独特的智慧光辉引人注目,然而…

SPA首屏加载慢的优化方案

1、什么是首屏加载? 首屏加载时间主要看FCP(First Contentful Paint)这个指标,它指的是浏览器从响应用户输入网址地址,到首屏内容渲染完成的时间,此时整个网页不一定要全部渲染完成,但需要展示当前视窗需要的内容 首…

运筹学_1.2线性规划问题的几何意义

1.2线性规划问题的几何意义 一、凸集的基本概念二、由线性规划问题的几何意义、定理得出的几点结论三、引出单纯形法的解题步骤 一、凸集的基本概念 通俗来说,一个图形上任意两个点的连线上的点全部存在于这个图形中 二、由线性规划问题的几何意义、定理得出的几点结…

基于springboot+vue的流浪宠物管理系统

博主主页:猫头鹰源码 博主简介:Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战,欢迎高校老师\讲师\同行交流合作 ​主要内容:毕业设计(Javaweb项目|小程序|Pyt…

Ubuntu将c++编译成.so文件并测试

一、准备cpp和h文件 创建test.cpp 在cpp中定义相加的函数funcAdd&#xff0c;给出函数的细节代码 #include <iostream> using namespace std;int funcAdd(int x, int y) {return xy; }创建test.h 在h中声明定义的函数&#xff0c;不需要任何细节 #ifndef __TEST__ #…

李沐动手学习深度学习——4.2练习

1. 在所有其他参数保持不变的情况下&#xff0c;更改超参数num_hiddens的值&#xff0c;并查看此超参数的变化对结果有何影响。确定此超参数的最佳值。 通过改变隐藏层的数量&#xff0c;导致就是函数拟合复杂度下降&#xff0c;隐藏层过多可能导致过拟合&#xff0c;而过少导…

Java项目:31 基于SSM的勤工俭学管理系统

作者主页&#xff1a;源码空间codegym 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 勤工助学系统有管理员&#xff0c;部门管理员&#xff0c;用户三个角色。 管理员功能有个人中心。管理员管理&#xff0c;部门管理员管理&…

鸿蒙Harmony应用开发—ArkTS声明式开发(通用属性:Popup控制)

给组件绑定popup弹窗&#xff0c;并设置弹窗内容&#xff0c;交互逻辑和显示状态。 说明&#xff1a; 从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 popup弹窗的显示状态在onStateChange事件回调中反馈&#xff0c;其显…

初阶数据结构:二叉树

目录 1. 树的相关概念1.1 简述&#xff1a;树1.2 树的概念补充 2. 二叉树2.1 二叉树的概念2.2 二叉树的性质2.3 二叉树的存储结构与堆2.3.1 存储结构2.3.2 堆的概念2.3.3 堆的实现2.3.3.1 堆的向上调整法2.3.3.2 堆的向下调整算法2.3.3.3 堆的实现 1. 树的相关概念 1.1 简述&a…

MyBatis 学习(六)之动态 SQL

目录 1 动态 SQL 介绍 2 if 标签 3 where 标签 4 set 标签 5 trim 标签 6 choose、when、otherwise 标签 7 foreach 标签 8 bind 标签 1 动态 SQL 介绍 动态 SQL 是 MyBatis 强大特性之一&#xff0c;极大的简化我们拼装 SQL 的操作。MyBatis 的动态 SQL 是基于 OGNL 的…

网络编程(IP、端口、协议、UDP、TCP)【详解】

目录 1.什么是网络编程&#xff1f; 2.基本的通信架构 3.网络通信三要素 4.UDP通信-快速入门 5.UDP通信-多发多收 6.TCP通信-快速入门 7.TCP通信-多发多收 8.TCP通信-同时接收多个客户端 9.TCP通信-综合案例 1.什么是网络编程&#xff1f; 网络编程是可以让设…