使用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目录,里面包含了你的项目的静态文件,你可以将它部署到任何你想要的服务器上。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java开源ETL工具-Kettle

一、背景 公司有个基于Kettle二次开发产品主要定位是做一些数据ETL的工作, 所谓的ETL就是针对数据进行抽取、转换以及加载的过程,说白了就是怎么对原始数据进行清洗,最后拿到我们需要的、符合规范的、有价值的数据进行存储或者分析的过程。 一般处理ETL的…

【从浅识到熟知Linux】基本指令之man、uname和bc

🎈归属专栏:从浅学到熟知Linux 🚗个人主页:Jammingpro 🐟每日一句:干完饭写篇博客放松一下。 文章前言:本文介绍man、uname和bc指令用法并给出示例和截图。 文章目录 man基本语法功能选项无选项…

人工智能入门,什么是AlphaGo式搜索?

AlphaGo式搜索是一种搜索算法,它是由DeepMind开发的AlphaGo团队在开发AlphaGo程序时使用的搜索策略。 AlphaGo是一个基于人工智能的围棋程序,它在2016年击败了世界冠军柯洁,引起了广泛的关注。 AlphaGo式搜索的核心思想是使用蒙特卡洛树搜索…

Docker:深入解析Nexus技术构建可靠的软件仓库管理系统

1、简述 在现代软件开发中,有效的软件仓库管理是确保项目成功的关键一环。Nexus Repository Manager作为一种流行的仓库管理系统,为开发人员提供了强大的工具,用于存储、检索和管理软件构建。本文将深入解析Nexus技术,探讨其关键…

OMP: Error #15: Initializing libiomp5md.dll

问题描述 在conda虚拟环境运行程序时,出现以下的错误: 问题原因 anaconda的环境下存在两个libiomp5md.dll文件。 解决方法 一、在代码上加上限制(每次都得加) import os os.environ[KMP_DUPLICATE_LIB_OK]True 这种方法解决不…

【蓝桥杯选拔赛真题26】C++字符串逆序 第十三届蓝桥杯青少年创意编程大赛C++编程选拔赛真题解析

目录 C/C++字符串逆序 一、题目要求 1、编程实现 2、输入输出 二、算法分析

Charles下载安装及配置之Mac

因工作需要用到抓包工具,但Fiddler不能在mac上使用,所以找到了Charles,Charles其实是一款代理服务器,通过过将自己设置成系统(电脑或者浏览器)的网络访问代理服务器,然后截取请求和请求结果达到…

sql注入靶场

第一关: 输入:http://127.0.0.1/sqli-labs-master/Less-1/?id1 http://127.0.0.1/sqli-labs-master/Less-1/?id1%27 http://127.0.0.1/sqli-labs-master/Less-1/?id1%27-- 使用--来闭合单引号,证明此处存在字符型的SQL注入。 使用order …

Unity之NetCode多人网络游戏联机对战教程(10)--玩家动画同步

文章目录 前言NetworkAnimation服务端权威客户端权威 前言 这次的动画同步与位置同步,可以说实现思路是一样的,代码相似度也非常高 NetworkAnimation 如果直接挂载这个脚本只有Host(服务端)才可以同步,Client是没有…

通过火狐Firefox浏览器在设备间留言、传递备注消息

如果多台设备间没有都安装微信、飞书这种可以通过文件传输助手备注消息的APP,那么可通过火狐浏览器在设备间留言。 原理:火狐支持把当前设备的一个浏览器标签页发送到其他设备 那么我们只需要把要留言的文本记录到一个网页,然后发送到其他设…

快速开发出一个公司网站

问题描述:参加一个创业活动,小组要求做一个公司网站,简单介绍一下自己公司的业务。需要快速完成。 问题解决:从网上找一个网站模板,类似于做PPT,搭建一个网站即可。 这里推荐的是京美建站、wordpress、he…

springboot云HIS医院信息综合管理平台源码

满足基层医院机构各类业务需要的健康云HIS系统。该系统能帮助基层医院机构完成日常各类业务,提供病患挂号支持、病患问诊、电子病历、开药发药、会员管理、统计查询、医生站和护士站等一系列常规功能,能与公卫、PACS等各类外部系统融合,实现多…

常见加密算法

常见加密算法 加密算法是一种用数学方法对数据进行变换的技术,目的是保护数据的安全,防止被未经授权的人读取或修改。加密算法可以分为三大类:对称加密算法、非对称加密算法和哈希算法(也叫摘要算法)。 哈希算法 哈…

来自2023 TM Forum 数字领导力中国峰会的邀请函

峰会介绍 2023数字领导力中国峰会由tmforum和亚信科技联合主办。 数据驱动创新,数字塑造未来!2023数字领导力中国峰会,立足技术和商业视角,聚焦讨论各行业如何依托数据治理、IT和网络转型,实现跨越式增长。 这里&am…

十八数藏的文化数字革新:传统之美的数字转变

在数字时代的冲击下,十八数藏以其独特的文化数字革新,将传统之美注入数字的脉络中,实现了非遗之珍的数字转变。这种数字化的创新不仅为传统工艺赋予了新的生命,也使得传承变得更为生动与全面。 十八数藏通过数字技术,将…

【挑战业余一周拿证】一、亚马逊云科技简介 - 第 2 节 - 模块 简介

CSDN 官方中文视频(免费):点击进入 第 2 节 - 模块 1 简介 这门课程将为您提供需要了解的所有重要信息,让您能够轻松讨论亚马逊云科技并了解它为 何对您的企业有利 亚马逊云科技为每个企业都提供了非常广泛的服务,从…

AntDB数据库与东方通TongWeb完成兼容互认,共筑数字化底座核心能力

近日,湖南亚信安慧科技有限公司(简称:亚信安慧)与北京东方通科技股份有限公司(简称:东方通)完成AntDB数据库与东方通应用服务器TongWeb V7.0的兼容互认。经测试,AntDB数据库能与东方…

docker启动容器失败,然后查看日志,docker logs查看容器出现报错:

docker 启动容器失败,然后docker logs 查看容器出现报错: error from daemon in stream: Error grabbing logs: invalid character l after object key:value pair在网上看到的 解决方案: 找到你日志文件目录: docker inspect …

【前端首屏加载速度优化(一) :nginx 开启gzip压缩】

开启gzip压缩前后对比: nginx.conf具体配置: server {# 启动后的端口listen 8882;# 开启gzip压缩gzip on;gzip_min_length 1k; gzip_buffers 4 16k; gzip_http_version 1.1; gzip_comp_level 6; gzip_types text/plain application/x-javascript…

12、模块化编程

模块化编程 1、传统方式编程:所有的函数均放在main.c里,若使用的模块比较多,则一个文件内会有很多的代码,不利于代码的组织和管理,而且很影响便朝着的思路 2、模块化编程:把各个模块的代码放在不同的.c文件…