当前位置: 首页 > news >正文

Vue 环境安装以及项目创建

环境安装

nodejs 安装

下载地址:https://nodejs.org/dist/v18.16.1/
根据系统类型选择对应安装包,选择安装路径那个后一直下一步即可安装完成。
配置npm 代理镜像,设置为淘宝的镜像地址(后面按照依赖可以加速下载安装包)

npm config set registry https://registry.npmmirror.com

安装cnpm (可选)

npm install -g cnpm --registry=https://registry.npmmirror.com

查看是否安装成功
在这里插入图片描述

项目创建并启动

cmd 进入需要创建vue工程的目录下,输入如下命令并执行

npm init vue@latest

在这里插入图片描述
第一次我们可以在输入项目名称后其他选项都默认选择否(项目名称都使用小写字母)
然后执行提示命令进行启动:

  cd vue-base  进入到vue工程根目录下npm install  安装工程所需要的依赖npm run dev  启动vue工程

在这里插入图片描述

到这里项目启动完成,浏览器访问 http://localhost:5173/ 即可打开vue项目页面
这里的VITE 为vue的一个脚手架工具,在vue早前一些版本 使用的为webpacke脚手架工具。
在这里插入图片描述

项目目录

在这里插入图片描述

.idea 										--- 开发工具的配置文件夹(默认创建出来的为 .vscode)
node_modules 						--- Vue项目的运行依赖文件夹
public										--- 资源文件夹(如包含浏览器图标)
src											---源码文件夹
.gitignore									---git忽略文件
index.html								---入口HTML
package.json							---信息描述文件
README.md							---项目介绍文件
vite.config.js							---Vue配置文件

相关文章:

  • HUAWEI Programming Contest 2024(AtCoder Beginner Contest 342)
  • 0代码自动化测试:RF 框架实现企业级 UI 自动化测试!
  • 5.WEB渗透测试-前置基础知识-常用的dos命令
  • 一、深度学习介绍
  • vue3 开发记录
  • 【大数据】Flink 内存管理(四):TaskManager 内存分配(实战篇)
  • nginx之重写功能 模块指令 防盗链
  • 猜猜心里数字(个人学习笔记黑马学习)
  • width:100%和width:auto有啥区别
  • MySQL(基础篇)——函数、约束
  • 最新开源!用C++编写的3D gaussian splatting
  • three 模型对象、材质
  • c# 异常处理
  • 音视频数字化(数字与模拟-电视)
  • LACP——链路聚合控制协议
  • 【Leetcode】104. 二叉树的最大深度
  • Leetcode 27 Remove Element
  • Magento 1.x 中文订单打印乱码
  • nginx 负载服务器优化
  • npx命令介绍
  • oldjun 检测网站的经验
  • PHP的Ev教程三(Periodic watcher)
  • Vue 重置组件到初始状态
  • 给自己的博客网站加上酷炫的初音未来音乐游戏?
  • 极限编程 (Extreme Programming) - 发布计划 (Release Planning)
  • 简单易用的leetcode开发测试工具(npm)
  • 七牛云 DV OV EV SSL 证书上线,限时折扣低至 6.75 折!
  • 如何正确配置 Ubuntu 14.04 服务器?
  • 文本多行溢出显示...之最后一行不到行尾的解决
  • 学习HTTP相关知识笔记
  • 一些css基础学习笔记
  • 怎么把视频里的音乐提取出来
  • 中文输入法与React文本输入框的问题与解决方案
  • postgresql行列转换函数
  • Prometheus VS InfluxDB
  • 仓管云——企业云erp功能有哪些?
  • ​Z时代时尚SUV新宠:起亚赛图斯值不值得年轻人买?
  • ​插件化DPI在商用WIFI中的价值
  • #Z0458. 树的中心2
  • $.ajax()方法详解
  • (6)STL算法之转换
  • (8)STL算法之替换
  • (C语言)二分查找 超详细
  • (PyTorch)TCN和RNN/LSTM/GRU结合实现时间序列预测
  • (ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY)讲解
  • (WSI分类)WSI分类文献小综述 2024
  • (附源码)spring boot车辆管理系统 毕业设计 031034
  • (附源码)spring boot网络空间安全实验教学示范中心网站 毕业设计 111454
  • (附源码)spring boot智能服药提醒app 毕业设计 102151
  • (附源码)ssm航空客运订票系统 毕业设计 141612
  • (附源码)计算机毕业设计ssm电影分享网站
  • (力扣)1314.矩阵区域和
  • (力扣)循环队列的实现与详解(C语言)
  • (五)Python 垃圾回收机制
  • (一)Mocha源码阅读: 项目结构及命令行启动