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

【Vue CLI脚手架开发】——1.Vue脚手架的安装与使用

默认项目基于vue2进行开发,后续vue3会单独进行讲解

文章目录

  • 前言
  • 一、创建项目
  • 二、模板项目的结构
  • 三、运行项目


前言

tips:基于node.js和npm环境默认已安装

Vue脚手架是Vue官方提供的标准化开发工具(开发平台)。Vue脚手架通过命令行界面(CLI)提供服务,使得创建、配置和编译Vue项目变得简单快捷,使用Vue脚手架,你可以通过全局安装vue-cli,然后使用命令行工具来初始化一个新的Vue项目,选择适合的项目模板,并自动生成项目结构和必要的配置文件。这样,开发者可以专注于业务逻辑的实现,而不必花费大量时间在项目搭建和配置上。


一、创建项目

第一步(仅第一次执行):全局安装@vue/cli。

npm install -g @vue/cli

第二步:切换到你要创建项目的目录,然后使用命令创建项目

vue create your-project

vue版本选择
![(https://i-blog.csdnimg.cn/direct/8003507ec9274c8f87a4726307c383a8.png)
项目创建中…
在这里插入图片描述
进入项目目录
在这里插入图片描述

第三步:启动项目

npm run serve

二、模板项目的结构

在这里插入图片描述

三、运行项目

执行npm run serve 后
在这里插入图片描述
点击网址跳转观看vue项目展示页面,创建Vue项目过程中Vue默认创建HelloWorld.vue组件。
在这里插入图片描述


相关文章:

  • 【Maven】基于IDEA进行Maven工程的创建、构建
  • 蓝桥杯2024年真题java B组 【H.拼十字】
  • 【Python 数据结构 3.顺序表】
  • windows下玩转vllm:在wsl下安装vllm后续,设置modelscope作为下载源
  • 蓝桥杯---归并排序算法题目(leetcode第912题)
  • 《Python百练成仙》31-40章(不定时更新)
  • springboot之集成Elasticsearch
  • 机器学习的起点:线性回归Linear Regression
  • 项目准备(flask+pyhon+MachineLearning)- 2
  • 计算机毕业设计SpringBoot+Vue.js教学辅助平台(源码+文档+PPT+讲解)
  • MySQL初学之旅(5)详解查询
  • Spring AI:开启Java开发的智能新时代
  • next实现原理
  • 代码随想录算法营Day51 | 647. 回文子串,516. 最长回文子序列
  • 【极客时间】浏览器工作原理与实践-2 宏观视角下的浏览器 (6讲) - 2.3 HTTP请求流程:为什么很多站点第二次打开速度会很快?
  • JBoltAI_SpringBoot 向量化:文本的 “变形记”
  • C++关联容器操作
  • 如何测试WSL安装的Redis?
  • EMQX中不同端口对应的接入协议
  • 计算机毕业设计SpringBoot+Vue.js企业级工位管理系统(源码+文档+PPT+讲解)
  • 李强:把做强国内大循环作为推动经济行稳致远的战略之举
  • 恒生银行回应裁员传闻:受影响的员工数目占银行核心业务员工总数约1%
  • “免签圈”扩容,旅游平台:今年以来巴西等国入境游订单显著增加
  • 商务部:今年前3月自贸试验区进出口总额达2万亿元
  • 刘晓庆被实名举报涉嫌偷税漏税,税务部门启动调查
  • 七部门:进一步增强资本市场对于科技创新企业的支持力度