从零开始搭建Vue3.0项目

news2024/11/23 12:32:20

从零开始搭建Vue3.0项目

  • 所使用的软件及工具,环境
    • 1.确保本机已安装nodejs和npm
    • 2.Vue-cli项目搭建

所使用的软件及工具,环境

软件vscode: vscode地址下载,
svn集中式管理: 是一个开源的代码版本控制系统,用于多人共同开发同一个项目,达到资源共用目的工具。svn,
环境搭建:安装node环境

1.确保本机已安装nodejs和npm

  1. Node.js 官方网站下载: 下载安装包;

  2. 选择操作系统对应的包,按步骤傻瓜式安装好即可在这里插入图片描述

  3. win+R 输入cmd 回车 输入node -v 回车,出现版本号就代表安装成功
    在这里插入图片描述

  4. 安装镜像 (注意:两者都只是包管理器,可随便选择)

    NPM(Node Package Manager,节点包管理器)是NodeJS的包管理器,用于节点插件的管理(包括安装,卸载和管理依赖等)。NPM是随同新版的NodeJS一起安装的包管理工具,所以安装Node后可以直接使用npm完成接下来操作。

    NMP安装插件是从NPM官网下载对应的插件包,该网站的服务器在国外,经常会出现下载缓慢或出现异常,这时便需要找到另外的方法提供稳定的下载,这个方法就是CNPM。阿里巴巴的淘宝团队把插件都同步到了在中国的服务器,提供给我们从这个服务器上稳定下载资源。

    输入:npm install -g cnpm –registry=https://registry.npm.taobao.org在这里插入图片描述输入:cnpm -v (检测是否安装成功)。 在这里插入图片描述
    cnpm的用法和npm的用法一致,只是在执行命令的时候将npm改为cnpm。之后就可以使用cnpm执行命令

2.Vue-cli项目搭建

  1. 安装全局vue-cli脚手架 :npm镜像安装完成之后,接下来安装全局vue-cli脚手架。进入cmd,输入命令: cnpm install --global vue-cli 回车。
    输入 cnpm i @vue/cli -g 会全局安装vue-cli最新版
    在这里插入图片描述

  2. **创建新项目 **:脚手架搭建完成之后,接下来创建一个新项目。 打开cmd通过 cd 文件夹,到你想存项目的文件夹中输入命令 vue create project01,(project01为项目名称)那么项目在创建后会直接在新建的文件夹中。
    在这里插入图片描述
    细节操作如下:
    Defaule 是自定义配置后保存好的模板;
    default 是使用默认配置安装
    Manually select features 是自定义配置安装
    在这里插入图片描述
    选择Manually select features后,默认会帮你选择三个可以手动选择和取消配置(通过空格选择/取消)
    在这里插入图片描述
    在这里插入图片描述
    选择完后直接enter,然后会提示你选择对应功能的具体工具包,选择自己擅长或者使用广泛的,简介如下:
    1. 选择Vue.JS的版本,这里选择3.x版本
    在这里插入图片描述
    2.是否使用Class风格装饰器?这里选择yes
    在这里插入图片描述
    3.是否使用Babel与TypeScript一起用于自动检测的填充?这里选择yes
    在这里插入图片描述4. 路由模式是否需要?这里选择yes
    在这里插入图片描述
    5.选择CSS 预处理器?这里看个人需求,我选择Sass/SCSS (with dart-sass)
    在这里插入图片描述
    在这里插入图片描述
    6.代码格式化检测,如果用typescript可以选择TSLint,其他看自己需求?这里选择ESLint + Prettier正常模式
    在这里插入图片描述
    在这里插入图片描述
    7.选择语法检查方式?这里选择选择语法检查方式,这里我选择Lint on save保存就检测
    在这里插入图片描述
    在这里插入图片描述
    8.选择单元测试?这里选择Mocha + Chai
    在这里插入图片描述
    9.e2e测试:?这里选择Cypress (Chrome only)
    在这里插入图片描述
    10.把babel,postcss,eslint这些配置文件放哪?这里选择In dedicated config files放独立文件夹
    在这里插入图片描述
    在这里插入图片描述
    11.是否保存此次配置?我选择no。键入N不记录,如果键入Y需要输入保存名字,如第一步所看到的自定义配置后保存好的模板
    在这里插入图片描述
    等待下载依赖模块
    装好后通过cd进入项目的根目录,根据提示启动即可
    vue2.0 默认启动文件: npm run dev
    Vue3.0+ 默认启动文件: npm run serve

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

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

相关文章

谷歌PR权重是什么意思?如何查询网站的谷歌PR权重

谷歌PR权重是什么意思? Google权重是SEO中的一个常见名词,谷歌权重最早的概念指的是GooglePageRank,简称谷歌的PR值,由网站的外链数据计算得出。 PR值的出现,导致很多人只注重做外链,忽略了网站自身…

认识文件、文件路径、File类

认识文件、文件路径、File类一、认识文件1.1 狭义与广义1.2 树型结构组织和目录1.3 其他相关知识二、文件路径 (Path)三、File类3.1 构造方法3.2 文件元信息操作方法3.3 代码示例一、认识文件 1.1 狭义与广义 狭义的文件: 存储在硬盘上的数据,以"…

DBSyncer

DBSyncer是一款开源的数据同步中间件,提供MySQL、Oracle、SqlServer、PostgreSQL、Elasticsearch(ES)、Kafka、File、SQL等同步场景。支持上传插件自定义同步转换业务,提供监控全量和增量数据统计图、应用性能预警等。 特点 组合驱动,自定义…

Git——Windows平台创建github私有仓库详解

目录 1. 注册github,登录 1.1 注册 1.2 登录 2. 创建仓库 3. GitBash使用 3.1 UI界面下载 3.2 配置本地 3.3 配置github 4. 托管 1. 注册github,登录 官网 GitHub 1.1 注册 1.2 登录 2. 创建仓库 根据需要选择: 3. GitBash使用 3…

【从零开始学习深度学习】24.神经网络中池化层的作用:最大池化与平均池化

在之前二维卷积层介绍的图像物体边缘检测应用中,我们构造卷积核从而精确地找到了像素变化的位置。设任意二维数组X的i行j列的元素为X[i, j]。如果我们构造的卷积核输出Y[i, j]1,那么说明输入中X[i, j]和X[i, j1]数值不一样。这可能意味着物体边缘通过这两…

[附源码]计算机毕业设计的网上点餐系统Springboot程序

项目运行 环境配置: Jdk1.8 Tomcat7.0 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: Springboot mybatis MavenVue等等组成,B/S模式…

自动控制原理笔记-自动控制的一般概念

目录 概念: 自动控制系统的基本组成: 基本控制方式: 一个控制系统的方框图:(由工作原理图绘制方框图) 控制系统的组成: 小结: ​​​​​​​ ​​​​​​​ ​​​​​​​ 梦开始的地方…

微火:AI绘图网站程序源码搭建,定制专属的ai绘画小程序

随着AI绘画的火热,群众对于AI绘画的需求与日俱增,目前已有的小程序、ai绘图软件已不能很好地满足当下用户的画图需求,经常排队生图,一排就是几个小时,或者前面直接8万人排队的现象早日屡见不鲜。 新的优秀的AI绘画小程…

java的序列化与反序列化

什么是序列化与反序列化 序列化: 说白了,就是把一个实现了Serializable接口(只有实现了这个接口的类才能被序列化与反序列化)的类去变成本地文件保存。 反序列化: 说白了,就是把上面保存的本地文件&#…

LeetCode62. 不同路径(java解法——动态规划)

1 题目描述 一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为 “Start” )。机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角(在下图中标记为 “Finish” )。问总共有多少条不同的路径&#xff1f…

电脑一键重装一直在系统优化升级怎么办

小白一键重装一直在系统优化升级怎么办?电脑总是卡在这个画面上,遇到这种情况该怎么解决呢?遇到这种情况大家也不要慌,小面小编就来演示下如何解决小白一键重装一直在系统优化升级的问题。 工具/原料: 系统版本:win10家庭版 …

电脑免费录屏软件哪个好用?分享3款,亲测好用

相比于图片,视频给人的感受更加通俗易懂,短短几分钟的视频,就能将几十张图片想要表达的意思给表达出来。电脑录屏正是制作视频的其中一部分,但也有不少的小伙伴对于电脑录屏不太熟悉,希望小编分享一些电脑免费录屏软件…

HTML语法学习以及作业解答

文章目录技巧html标签练习作业01作业02作业03作业04作业05作业06作业07作业08作业09作业10技巧 1 输入 html5即可补全出html的骨架,或者是! tab键 2 MDN网站:https://developer.mozilla.org/zh-CN/ 3 div带回车,span后面不带回…

计组 | DRAM芯片、多模块存储器、加法器标志位、软件硬件的关系、扩展操作码、程序转换过程

内容来自 —— 王道 自用学习笔记整理 一、DRAM芯片与内存条 1.1、DRAM芯片 1.2、访问内存时DRAM芯片读取过程 多个芯片并行传输,每一轮每个芯片的行列都相同,n个芯片就会有n个超元 n个超元加起来就是数据总线的长度,如图中超元=8位,数据总线=8个超元=64位 1.3、DRAM引脚数…

使用Apifox创建Mock智能操作

去接口管理新建一个接口来设计 然后直接保存运行,就可以发现已经自动为我们的Mock添加上了相关的属性值,只需要输入相关的字段名就可以了。 设置自定义智能Mock,之前我们智能Mock生成的数据都是通过这个工具实现的。只要你的值匹配上了就会通…

从数据治理到数据应用,制造业企业如何突破数字化转型困境丨行业方案

我国制造业拥有31个大类、179个中类和609个小类,是全球产业门类最齐全、产业体系最完整的制造业。作为世界工厂,中国制造业在拉动本国经济增长、促进本国就业等方面贡献卓越,更是我国民生消费的底层基础。同时,中国从原来的原料出…

OpenSSL QuickStart

文章目录1. Windows环境PerlnasmOpenSSL编译VS测试项目2. Linux环境编译测试项目参考资料1. Windows环境 Windows 10VS 2019nasm汇编工具:https://nasm.us/Perl: 官网地址https://www.perl.org/get.htmlOpenSSL: 官网地址:https://www.opens…

2022下半年软件设计师备考经验帖

祝大家逢考必过 7月1号备考-11月05号考试 推荐up主:zst_2001 跟着视频来基本必过 以下是复习资料 章节章节01 - 计算机组成原理与体系结构07 - 法律法规与标准化与多媒体基础02 - 操作系统基本原理08 - 设计模式03 - 数据库系统09 - 软件工程04 - 计算机网络10 - …

垂直领域问答小程序开发,打开知识领域无限能量

知乎作为一款问答类app,深受大众信赖,知乎构建了一个人人都可以便捷接入的知识分享网络,让人们便捷的与世界分享知识、经验和见解,让我们发现更大的世界。知乎的成功让很多人看到了垂直领域问答小程序存在的商机,想要进…

[JavaScript]使用opencv.js实现基于傅里叶变换的频域水印(隐水印)

PS:查了多方资料,都没有提到用 JavaScript 来实现频域水印的教程,故经过笔者的实践,遂写一篇教程来简单介绍。 通过了解频域水印的相关知识,我理解了频域水印就是先将图片进行傅里叶变换,得到频域图&#x…