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

相关文章

MySQL进行数据库审计的详细步骤和示例代码

《MySQL进行数据库审计的详细步骤和示例代码》数据库审计通过触发器、内置功能及第三方工具记录和监控数据库活动,确保安全、完整与合规,Java代码实现自动化日志记录,整合分析系统提升监控效率,本文给大... 目录一、数据库审计的基本概念二、使用触发器进行数据库审计1. 创建审计表2. 创建触发器三、Java

MySql基本查询之表的增删查改+聚合函数案例详解

《MySql基本查询之表的增删查改+聚合函数案例详解》本文详解SQL的CURD操作INSERT用于数据插入(单行/多行及冲突处理),SELECT实现数据检索(列选择、条件过滤、排序分页),UPDATE... 目录一、Create1.1 单行数据 + 全列插入1.2 多行数据 + 指定列插入1.3 插入否则更

IntelliJ IDEA2025创建SpringBoot项目的实现步骤

《IntelliJIDEA2025创建SpringBoot项目的实现步骤》本文主要介绍了IntelliJIDEA2025创建SpringBoot项目的实现步骤,文中通过示例代码介绍的非常详细,对大家... 目录一、创建 Spring Boot 项目1. 新建项目2. 基础配置3. 选择依赖4. 生成项目5.

C#连接SQL server数据库命令的基本步骤

《C#连接SQLserver数据库命令的基本步骤》文章讲解了连接SQLServer数据库的步骤,包括引入命名空间、构建连接字符串、使用SqlConnection和SqlCommand执行SQL操作,... 目录建议配合使用:如何下载和安装SQL server数据库-CSDN博客1. 引入必要的命名空间2.

Spring Boot集成Druid实现数据源管理与监控的详细步骤

《SpringBoot集成Druid实现数据源管理与监控的详细步骤》本文介绍如何在SpringBoot项目中集成Druid数据库连接池,包括环境搭建、Maven依赖配置、SpringBoot配置文件... 目录1. 引言1.1 环境准备1.2 Druid介绍2. 配置Druid连接池3. 查看Druid监控

创建Java keystore文件的完整指南及详细步骤

《创建Javakeystore文件的完整指南及详细步骤》本文详解Java中keystore的创建与配置,涵盖私钥管理、自签名与CA证书生成、SSL/TLS应用,强调安全存储及验证机制,确保通信加密和... 目录1. 秘密键(私钥)的理解与管理私钥的定义与重要性私钥的管理策略私钥的生成与存储2. 证书的创建与

Java中的数组与集合基本用法详解

《Java中的数组与集合基本用法详解》本文介绍了Java数组和集合框架的基础知识,数组部分涵盖了一维、二维及多维数组的声明、初始化、访问与遍历方法,以及Arrays类的常用操作,对Java数组与集合相... 目录一、Java数组基础1.1 数组结构概述1.2 一维数组1.2.1 声明与初始化1.2.2 访问

Java通过驱动包(jar包)连接MySQL数据库的步骤总结及验证方式

《Java通过驱动包(jar包)连接MySQL数据库的步骤总结及验证方式》本文详细介绍如何使用Java通过JDBC连接MySQL数据库,包括下载驱动、配置Eclipse环境、检测数据库连接等关键步骤,... 目录一、下载驱动包二、放jar包三、检测数据库连接JavaJava 如何使用 JDBC 连接 mys

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