vue cli4 搭建项目基本步骤

2024-03-20 17:48

本文主要是介绍vue cli4 搭建项目基本步骤,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在项目搭建之前,需要安装好node,npm和vue-cli,从vue cli2之后的版本和之前的有些不一样,这是针对vue cli4版本进行的项目搭建。

  • 打开vs code的终端,进入想要存放新项目的文件夹,通过vue create vuecli-show命令新建项目,如下图所示:
    在这里插入图片描述
  • 按下回车键后,可以选择自己保存过的配置(vue_shop是我之前保存的)或默认的,也可以选择最后一项手动配置,如下图所示:
    在这里插入图片描述
  • 选择手动配置,回车后还需要选择项目所需的功能,如下图所示,按空格选中或取消某一项功能(如果选择了第一项Choose Vue version,那么在下一步中要选择vue的版本),本项目选择的功能如下图,选完后按下回车键。
    在这里插入图片描述
  • 进行下一步,如果要选择vue的版本则选好后按回车,下一步会询问你路由器是否选择历史模式,输入Y并回车。继续下一步,选择CSS预处理器,这里选用的是Less预处理器。
    在这里插入图片描述
  • 继续下一步,选择如何存放配置,如果选择In dedicated config files项,在项目构建完成后根目录下会多几个文件,具体多的文件取决于前面的配置。也可以选择In package.json项,这里我选择的是第一项。
    在这里插入图片描述
  • 上述步骤都完成以后,下一步会询问是否把这次的配置保存为模板,下次新建项目时可以直接使用这些配置,选择yes或no,这里我选了N。然后耐心等待项目构建完成,如下图所示:
    在这里插入图片描述
  • 构建完成后,依次输入上一张图片红色框内的两个命令,即进入项目根目录和启动项目,如果出现下图所示的的信息则启动成功。
    在这里插入图片描述
  • 在浏览器地址栏输入上图所示的url,可以看到如下图所示:
    在这里插入图片描述
  • 在vs code打开该项目(打开vuecli-show文件夹),查看项目的目录结构:
    在这里插入图片描述
    成功创建了vuecli-show项目。
    项目目录部分文件说明
  • App.vue:配置路由,通过router-link标签设置每一个链接应该匹配的路由;
  • router下的index.js:指定每一个路由应该匹配的模块;
  • views下的vue组件:写模块的具体实现;
  • componens下的vue模块:其它的组件模块,可以被views下的vue组件导入;
  • main.js:整合所有配置。
    文章参考:vue cli4.0快速搭建项目详解

这篇关于vue cli4 搭建项目基本步骤的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/830258

相关文章

IDEA中新建/切换Git分支的实现步骤

《IDEA中新建/切换Git分支的实现步骤》本文主要介绍了IDEA中新建/切换Git分支的实现步骤,通过菜单创建新分支并选择是否切换,创建后在Git详情或右键Checkout中切换分支,感兴趣的可以了... 前提:项目已被Git托管1、点击上方栏Git->NewBrancjsh...2、输入新的分支的

深度解析Java项目中包和包之间的联系

《深度解析Java项目中包和包之间的联系》文章浏览阅读850次,点赞13次,收藏8次。本文详细介绍了Java分层架构中的几个关键包:DTO、Controller、Service和Mapper。_jav... 目录前言一、各大包1.DTO1.1、DTO的核心用途1.2. DTO与实体类(Entity)的区别1

Visual Studio 2022 编译C++20代码的图文步骤

《VisualStudio2022编译C++20代码的图文步骤》在VisualStudio中启用C++20import功能,需设置语言标准为ISOC++20,开启扫描源查找模块依赖及实验性标... 默认创建Visual Studio桌面控制台项目代码包含C++20的import方法。右键项目的属性:

Go语言数据库编程GORM 的基本使用详解

《Go语言数据库编程GORM的基本使用详解》GORM是Go语言流行的ORM框架,封装database/sql,支持自动迁移、关联、事务等,提供CRUD、条件查询、钩子函数、日志等功能,简化数据库操作... 目录一、安装与初始化1. 安装 GORM 及数据库驱动2. 建立数据库连接二、定义模型结构体三、自动迁

python删除xml中的w:ascii属性的步骤

《python删除xml中的w:ascii属性的步骤》使用xml.etree.ElementTree删除WordXML中w:ascii属性,需注册命名空间并定位rFonts元素,通过del操作删除属... 可以使用python的XML.etree.ElementTree模块通过以下步骤删除XML中的w:as

ModelMapper基本使用和常见场景示例详解

《ModelMapper基本使用和常见场景示例详解》ModelMapper是Java对象映射库,支持自动映射、自定义规则、集合转换及高级配置(如匹配策略、转换器),可集成SpringBoot,减少样板... 目录1. 添加依赖2. 基本用法示例:简单对象映射3. 自定义映射规则4. 集合映射5. 高级配置匹

java向微信服务号发送消息的完整步骤实例

《java向微信服务号发送消息的完整步骤实例》:本文主要介绍java向微信服务号发送消息的相关资料,包括申请测试号获取appID/appsecret、关注公众号获取openID、配置消息模板及代码... 目录步骤1. 申请测试系统2. 公众号账号信息3. 关注测试号二维码4. 消息模板接口5. Java测试

如何在Spring Boot项目中集成MQTT协议

《如何在SpringBoot项目中集成MQTT协议》本文介绍在SpringBoot中集成MQTT的步骤,包括安装Broker、添加EclipsePaho依赖、配置连接参数、实现消息发布订阅、测试接口... 目录1. 准备工作2. 引入依赖3. 配置MQTT连接4. 创建MQTT配置类5. 实现消息发布与订阅

springboot项目打jar制作成镜像并指定配置文件位置方式

《springboot项目打jar制作成镜像并指定配置文件位置方式》:本文主要介绍springboot项目打jar制作成镜像并指定配置文件位置方式,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录一、上传jar到服务器二、编写dockerfile三、新建对应配置文件所存放的数据卷目录四、将配置文

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)