使用vue脚手架创建vue项目

Vue是一个流行的前端框架,可以用简洁的语法和组件化的思想开发单页面应用。Vue脚手架是一个官方提供的命令行工具,它可以帮你快速搭建和配置vue项目的基本结构和依赖。
本文介绍如何使用vue脚手架创建一个vue2项目,并选择一些常用的功能和插件。

安装vue脚手架

要使用vue脚手架,首先需要安装Node.js。然后可以用npm全局安装vue脚手架,命令如下:

npm install -g @vue/cli

安装完成后,你可以用vue --version命令检查vue脚手架的版本。
在这里插入图片描述

创建vue项目

要创建一个vue项目,可以用vue create加项目名称命令,此处tablespage为项目名称

vue create tablespage

它会提示选择一些项目的选项,例如项目名称,预设配置,或者手动选择功能。根据需求和喜好进行选择,这里手动选择了以下功能:
在这里插入图片描述

  • Babel:一个JavaScript编译器,使用最新的语法特性,而不用担心浏览器的兼容性问题。
  • TypeScript:一个JavaScript的超集,使用静态类型检查,提高代码的可读性和可维护性。
  • Progressive Web App (PWA) Support:使得网页应用具有类似原生应用的特性的技术,例如离线访问,添加到主屏幕,推送通知等。
  • Router:一个vue的官方路由管理器,实现单页面应用的导航和跳转。
  • Vuex:一个vue的官方状态管理器,集中管理应用的数据和逻辑。
  • CSS Pre-processors:使用更高级的CSS语法和功能的工具,例如Sass,Less,Stylus等。
  • Linter / Formatter:规范和格式化代码风格的工具,例如ESLint,Prettier等。
  • Unit Testing:对代码进行单元测试的工具,例如Jest,Mocha等。
  • E2E Testing:对应用进行端到端测试的工具,例如Cypress,Nightwatch等。

用空格键来选择或取消选择功能,用A键来全选或全不选,用I键来反选。选择完毕后,按回车键继续。

接下来,vue脚手架会提示进一步配置你选择的功能,例如:

  • 选择TypeScript的版本,是否使用类式组件语法,是否使用装饰器等。
  • 选择PWA的配置文件,是否使用默认的图标和主题颜色等。
  • 选择Router的模式,是否使用history模式或hash模式等。
  • 选择Vuex的模块化方式,是否使用命名空间等。
  • 选择CSS Pre-processor的类型,例如Sass,Less,Stylus等。
  • 选择Linter / Formatter的配置,例如ESLint的规则,Prettier的选项等。
  • 选择Unit Testing的框架,例如Jest,Mocha等。
  • 选择E2E Testing的框架,例如Cypress,Nightwatch等。
    在这里插入图片描述
    根据需求和喜好进行配置,或者使用默认的配置。配置完毕后,按回车键继续。
    在这里插入图片描述
    最后,vue脚手架会提示选择是否将你的配置保存为一个预设,以便下次使用。你可以选择是或否,或者给你的预设起一个名字。选择完毕后,按回车键继续。

这样,vue脚手架就会开始创建你的vue项目,并安装相关的依赖。这可能需要一些时间。

下一次创建可直接选择预设配置创建项目
在这里插入图片描述

运行和测试vue项目

创建完成后,你可以进入你的项目目录,用npm run serve命令启动一个本地开发服务器,它会自动打开浏览器(或者手动打开网址),看到vue项目的效果。你可以在src目录下修改你的代码,保存后,你的浏览器会自动刷新,看到最新的效果。

在这里插入图片描述

你也可以用npm run build命令来构建你的vue项目,它会生成一个dist目录,里面包含了你的项目的静态文件,你可以将它部署到任何你想要的服务器上。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【JavaFX漏扫开发基础】JavaFx项目基础

文章目录 前言一、创建项目二、运行程序三、application的启动方式和生命周期四、生命周期前言 创建第一个javafx项目,用Idea编辑器来创建。 提示:以下是本篇文章正文内容,下面案例可供参考 一、创建项目 初创项目,第一个javafx的窗口。 依次点击,新建项目 点击Jaca…

字节的“游戏心脏”,真的停止跳动了吗?

字节跳动在游戏行业的宏大叙事,终究变成了一场游戏一场梦。 近日,朝夕光年首次公开回应此前的裁员传闻,明确表示会有业务方向和组织调整,游戏业务将迎来大规模收缩,未来会更加聚焦部分创新型游戏及相关技术的探索。 …

spring RedisTemplate RedisLockRegistry opsForXxx 基本使用总结以及介绍

一、基本介绍 RedisTemplate 为 spring 对 redis 操作的高度封装,基本已经满足所有使用场景。 若存在其他拓展使用我们可以自行封装工具类对基本操作进行组装。 RedisLockRegistry 对 redis 锁的一些封装 二、不同环境下依赖以及基本配置 2.1 spring-boot 下依赖…

MySQL之 InnoDB逻辑存储结构

InnoDB逻辑存储结构 InnoDB将所有数据都存放在表空间中,表空间又由段(segment)、区(extent)、页(page)组成。InnoDB存储引擎的逻辑存储结构大致如下图。下面我们就一个个来看看。 页&#xff08…

WPF实战项目十八(客户端):添加新增、查询、编辑功能

1、ToDoView.xmal添加引用&#xff0c;添加微软的行为类 xmlns:i"http://schemas.microsoft.com/xaml/behaviors" 2、给项目添加行为 <i:Interaction.Triggers><i:EventTrigger EventName"MouseLeftButtonUp"><i:InvokeCommandAction Com…

【漏洞复现】熊海cms 存在sql注入 附poc

漏洞描述 熊海CMS 是由熊海开发的一款可广泛应用于个人博客,个人网站,企业网站的一套网站综合管理系统。 其采用前后端整合设计思路,php,Apache,mysql,前端使用Bootstrap和少许jquery前端框架开发; 网站样式设计简洁大方,整体功能点并不多,但功能正好够用;拥有一个…

【计网 面向连接的传输TCP】 中科大笔记 (十 二)

目录 0 引言1 TCP 的特性1.1 拓展&#xff1a;全双工、单工、半双工通信 2 TCP报文段结构3 TCP如何实现RDT4 TCP 流量控制4.1 题外话&#xff1a;算法感悟 5 TCP连接3次握手、断开连接4次握手5.1 连接5.2 断开连接 6 拥塞控制6.1 拥塞控制原理6.2 TCP拥塞控制 &#x1f64b;‍♂…

Docker容器网络模式

1.none网络 1&#xff09;使用默认网络模式创建一个BusyBox容器&#xff0c;用于对比none网络模式&#xff1b; 测试网络&#xff0c;可以正常连接外网。 2&#xff09;再创建一个none网络模式的BusyBox容器&#xff1b; 测试网络连接&#xff0c;无法连接外网。 总结&#x…

六:Day01_Spring Boot01

一、Spring Boot简介 1. 概念简介 Spring Boot是Spring公司的一个顶级项目&#xff0c;和Spring Framework是一个级别的。 Spring Boot实际上是利用Spring Framework 4 自动配置特性完成。编写项目时不需要编写xml文件。 2. 启动器介绍 Spring Boot的启动器实际上就是一个依赖…

TSINGSEE青犀AI视频智能分析系统的视频接入能力解析

视频智能分析技术是一种先进的人工智能技术&#xff0c;它能够对视频内容进行自动化的分析和理解。这种技术的主要特点包括实时性、自动化、准确性、可解释性等。 1&#xff09;实时性。视频智能分析技术能够在短时间内对大量的视频数据进行快速处理和分析&#xff0c;从而提供…

【网络BSP开发经验】网络流量应用识别技术

文章目录 网络流量应用识别技术背景应用识别基本原理应用识别主流技术方向特征识别技术单报文解析流特征解析 关联识别技术DNS关联识别 行为识别技术 应用识别框架介绍应用特征提取经验tcpdump 抓包方式默认启动监视指定网络接口的数据包监视指定主机的数据包 禁用特征提取加速…

Small Data Transmission (二)具体过程

这篇是SDT相关的具体过程,包括RRC层初始化SDT 的条件,MAC 层初始化SDT过程的判断,CG-SDT的具体过程,TA Validation for CG-SDT, CG-SDT TA 验证的路径损耗参考推导,SDT Uplink Time Alignment,RRC inactive中的CG based PUSCH传输和RA based PUSCH传输,依次看下。 初始…

简历上的工作经历怎么写

通过了简历筛选&#xff0c;后续的面试官会仔细阅读你的简历内容。他们在找什么呢&#xff1f;他们希望搞清楚你在某一段经历中具体干了什么&#xff0c;并且判断你的能力具体达到了什么水平。 简历在线制作下载&#xff1a;百度幻主简历 面试官喜欢具体的经历 越具体&#x…

计算机网络(二)

&#xff08;八&#xff09;客户端软件设计的细节 A、解析协议号 客户端可能会需要通过协议名指定协议&#xff0c;但是Socket接口是用协议号指定的&#xff0c;这时候我们就需要使用getprotobyname()函数实现协议名到协议号的转换&#xff0c;该函数会返回一个指向protoent的…

第三方实验室LIMS管理系统源码,asp.net LIMS源码

LIMS实验室信息管理系统源码 LIMS系统的功能根据实验室的规模和任务而有所不同&#xff0c;其系统主要功能包括:系统维护、基础数据编码管理&#xff0c;样品管理、数据管理、报告管理、报表打印、实验材料管理、设备管理等。它可以取代传统的手工管理模式而给检测实验室带来巨…

基于SSM框架的餐馆点餐系统的设计

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…

什么是Anaconda?作用是?使用python必须要安装嘛?

一、什么是Anaconda以及其作用&#xff1f; 通俗来讲&#xff0c;Anaconda算是一个环境容器&#xff0c;也可以叫环境管理器。 作用&#xff1a;可以在Anaconda容器中为python项目创建不同的环境。在各个不同环境中可以安装不同版本的包并且各个环境互不影响。可以在使用不同项…

唯品会年度特卖大会㊙内购清单㊙

唯品会年度特卖大会㊙内购清单㊙ 内部员工亲友专享&#xff0c;实实在在省钱&#xff0c;❌抢完不补! 今晚8点开抢&#xff0c;提前收藏>> https://t.vip.com/Im3KlTnDSJ8 2023年唯品会年度特卖大会热门会场推荐 1.唯品会年度特卖大会 限时加码!瓜分百万津贴!抢海量…

java论坛数据以及搜索接口实现

一. 内容简介 java论坛数据以及搜索接口实现 二. 软件环境 2.1 java 1.8 2.2 mysql Ver 8.0.13 for Win64 on x86_64 (MySQL Community Server - GPL) 2.3 IDEA ULTIMATE 2019.3 2.4d代码地址 三.主要流程 3.1 创建数据库,创建数据表 3.2 开始编写接口&#xff0c;并测…

字节大佬整理测试用例编写规范

目录 1.1目的 1.2使用范围 二 测试用例编写原则 2.1系统性 2.2连贯性 2.3全面性 2.4正确性 2.5符合正常业务惯例 2.6仿真性 2.7容错性&#xff08;健壮性&#xff09; 三 测试用例设计方法 3.1 等价类划分法&#xff1a; 3.2 边界值分析法&#xff1a; 3.3 因果图…