【小5聊】ElementUI-Vue3-TS项目简单创建

news2025/1/17 9:07:42

vue2升级到vue3,不管任何框架,升级总有它改进的地方和原因,否则升级就毫无意义,技术变化日新月异,必须保持与时俱进,否则就很容易在技术的浪潮中被淘汰!

vue3相比以前版本,最大一个变化就是配置文件更加简洁

1)vue3升级还有一个重要原因,解决vue2对typescript支持不优化的情况

1、安装Node.js

查看node版本,如果当前已经安装的话,则可查看到具体版本。安装了node,一般npm也会被集成安装了

cmd>node -v

cmd>npm -v

2、安装脚手架

-- 卸载旧版本

npm uninstall -g vue/cli

-- 安装新版本

npm install -g @vue/cli

1)卸载旧版本脚手架

如果您当前电脑上安装过了vue2版本对应的vue/cli脚手架,那么建议先卸载旧版本的脚手架再安装新的脚手架

2)安装新版本脚手架

在安装前,可查看下当前是否安装了脚手架

注意是大写字母V

cmd>vue -V

默认的安装路径

C:\Users\Administrator\AppData\Roaming\npm\node_modules@vue\cli

3)vue、vue-cli和@vue-cli的含义

编号

名称

含义

1

vue

构建用户界面的渐进式JavaScript 框架

2

vue-cli

1)vue的一个官方脚手架工具(快速工程化命令工具), 用来帮助程序员们快速搭建基于vue框架的开发环境

2)vue有很多脚手架工具,vue-cli只是其中一种,侧重于单页面应用 (SPA) 的快速搭建【官网地址:cli.vuejs.org/zh/guide/】

3)vue-cli 4.5版本以下对应的是vue2

3

@vue-cli

1)新版vue-cli,提供了GUI维护界面,@vue/cli 安装的是vue3及以上版本, vue-cli 安装的是vue2

2)vue-cli 4.5版本及以上对应的是vue3

3、常用关键词参数

编号

关键词

作用

说明

1

-g

表示全局安装

2

-save

自动修改 package.json 文件,自动添加依赖项,自动保存到dependencies 目录中,不加–save 则不会自动保存

3

4、创建项目

尽量以字母命名你的项目

vue create yourname

1)切换目标目录

如果你是用cmd命令窗口来创建项目,那么先转到对应目标目录

cd /d G:\temp

2)命名不规范提示

Invalid project name:"myName22122601"

Warning:name can no longer contain capital letters

项目名称无效:“myName22122601”

警告:名称不能再包含大写字母

3)选择版本

使用上下箭头键来选择,此处选择Vue3,然后回车

回车自动安装中

3)安装完成

安装完成,在对应目标就能看到被创建的文件夹和文件

4)启动项目

跳转到对应目录

cd myname22122601

npm run serve

5)运行成功

6)浏览页面

5、项目引入typescript

vue add typescript

6、安装ElementUI

npm install element-plus --save

7、常见报错

1)error Parsing error: Unexpected token, expected ","

npm install --save-dev eslint eslint-plugin-vue

2)没有声明setup

3)

 

 

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

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

相关文章

PyTorch笔记 - Normalization Layer (Batch\Layer\Instance\Group\Weight)

欢迎关注我的CSDN:https://blog.csdn.net/caroline_wendy 本文地址:https://blog.csdn.net/caroline_wendy/article/details/128416962 Normalization in NN: Batch Normalization: per channel across mini-batchtorch.nn.BatchNorm1d / torch.nn.BatchNorm2dLayer Normaliz…

Hive+Spark离线数仓工业项目--数仓维度层DWS层构建(1)

维度建模回顾:建模流程 目标:掌握维度建模的建模流程 实施 step1-需求调研:业务调研和数据调研 - 了解整个业务实现的过程 - 收集所有数据使用人员对于数据的需求 - 整理所有数据来源 step2-划分主题域:面向业务将业务…

盘点五款免费在线进销存系统

本文将介绍:1、五款好用的免费在线进销存系统;2、如何选择进销存软件 免费进销存是企业尝试使用进销存软件的开端,只有尝试之后,才能知道这款软件是否适合本企业的发展。然而,免费购买、销售和库存管理软件并不能用几个…

华为开源自研AI框架昇思MindSpore数据处理:性能优化

目录一、环境准备1.进入ModelArts官网2.使用CodeLab体验Notebook实例二、下载数据集三、数据加载性能优化四、shuffle性能优化五、数据增强性能优化六、操作系统性能优化七、自动数据加速八、数据异构加速数据是整个深度学习中最重要的一环,因为数据的好坏决定了最终…

基于C语言学生信息教务管理系统编程设计含科目、总分、平均分

一.实现功能 1.从键盘添加学生信息 2.从文件添加学生信息 3.显示学生信息到屏幕 4.显示学生信息到文件 5.删除学生信息 6.插入学生信息 7.查找学生信息 8.成绩排名 选1录信息 输入五个人信息 选3 选7查找信息 选2,导入文件 导完显示信息,但是中文有…

国产软件不背黑锅,4款强大又实用的电脑软件,用了舍不得卸载

国产软件常背黑锅“流氓、付费、广告多”,然而有些小众软件却非常良心强大,实在不该被牵连。 1、电脑图像工具箱 这是一个极其好用的图片处理百宝工具箱,完全免费无广告,集成工具超百个,功能包括:图像处理、…

洛谷千题详解 | P1027 [NOIP2001 提高组] Car 的旅行路线【C++语言】

博主主页:Yu仙笙 专栏地址:洛谷千题详解 目录 题目描述 输入格式 输出格式 输入输出样例 解析: 0.0.题意: 1.1.建图 2.2.最短路 C源码: C源码2: C源码3: ------------------------------------------------…

离散数学实践二编程判断关系R的性质【java实现】

文章目录实验要求思路完整代码结果展示实验要求 判断关系 R 是否为自反关系 实验类型:设计性实验目的 通过算法设计并编程实现对给定集合上的关系是否为自反关系的判断,加深学生对关系性质的理解,掌握用矩阵来判断关系性质的方法。 实验内容…

【Python】沃罗诺伊图 | KNN 最邻近算法 | Voronoi 函数

猛戳!跟哥们一起玩蛇啊 👉 《一起玩蛇》🐍 写在前面:上一章我们介绍了介计算几何领域的德劳内三角剖分,我们提到过关于点集的很多种几何图都与德劳内三角剖分密切相关,其中最具代表的就是我们本章要介绍的 …

运营商展望来年再提2B市场,然而拯救4G/5G业务的都是手机用户

2022年即将结束,各个行业都开始进行年终盘点并对来年的业务进行规划,三大运营商也对此进行了展望,媒体报道指运营商对来年的发展偏向于2B市场,这已不是它们第一次提偏重企业市场了,然而现实来看拯救这些运营商的其实一…

详解SpringBean的作用域(Scopes)

文章目录一、SpringBean作用域总览二、"singleton" Bean作用域三、"prototype" Bean作用域1、验证singleton、prototype类型的Bean2、总结四、"request" Bean作用域1、配置2、简介五、"session" Bean作用域1、配置2、简介3、总结sessi…

《哈希表》

【一】哈希概念 顺序结构以及平衡树中,元素关键码与其存储位置之间没有对应的关系,因此在查找一个元素时,必须要经过关键码的多次比较,顺序查找时间的复杂度为O(N),平衡树中为树的高度,即O(log2N),搜索的效率取决于搜…

JavaWeb技术栈概述

1.1 Web概述 Web是全球广域网,也称为万维网(www),能够通过浏览器访问的网站。 在我们日常的生活中,经常会使用浏览器去访问百度、京东、传智官网等这些网站,这些网站统称为Web网站。如下就是通过浏览器访问…

实验三 第四章 MongoDB 副本集

一、实验目的: 了解MongoDB副本集 熟悉MongoDB副本集成员 掌握MongoDB副本集部署 掌握MongoDB副本集操作 理解副本集机制 二、实验环境: 一台win10系统的笔记本电脑 三、实验内容: 4.3部署副本集 4.3.1环境准备 创建的三台虚拟机配置如下&a…

python中的split()、rsplit()、splitlines()用法比较

1 split() 从左向右切割2 rsplit() 从右向左分割3 splitlines() 根据换行符切割4 rsplit()妙用split(分隔符,分割几次)从左向右寻找,分割元素并放入列表中,该分隔符丢弃; rsplit(分隔符,分割几次)从右向左寻找&#x…

算法的复杂性分析

算法的复杂性分析 文章目录算法的复杂性分析0、 算法评价的基本原则1、影响程序运行时间的因素2、算法复杂度2.1 算法的时间复杂度2.2 渐进表示法2.2.1 运行时间的上界2.2. 运行时间的下界2.2.3 运行时间的准确界3、总结4、参考0、 算法评价的基本原则 评价一个算法的好坏实际就…

第二证券|市场短期盘整 不改中期向好格局

12月初以来A股商场全体走势偏弱,上星期首要指数更是五连跌,上证指数重回3100点下方。关于商场近期的再度调整,本周组织观念显现,疫情带来的扰动或是首要原因。 不过,大都组织以为,心情面要素对商场的影响仅…

面试官:ui组件可以自动加载,那么业务组件可以吗?

大厂面试题分享 面试题库 前端面试题库 (面试必备) 推荐:★★★★★ 地址:前端面试题库 背景 笔者在最近在公司接手了一个老的对内使用的项目,接手后体验了下 发现首屏加载比较慢。分析了下大概的原因是main.js挂…

算法进阶:双指针(一)c++leetcode例题

82. 删除排序链表的重复元素 力扣传送: https://leetcode.cn/problems/remove-duplicates-from-sorted-list-ii/description/ 给一个排好序的链表,删除把链表中出现的所有的重复的项: 1 2 2 3 3 3 4 5 -----> 1 4 5 这道题有很多种解法&a…

Unity3D——第一人称FPS生存游戏(resident zombies)

游戏源文件和游戏试玩程序:链接: 链接:https://pan.baidu.com/s/1Ln2tFizqEO_uEoQhuxvgrQ?pwdl6w0 提取码:l6w0 游戏思路前身搭建: 用一些正方体和胶囊做出来的基础场景, 人物设计:红色的胶囊体是敌人,手持枪械是…