最新 vue-cli 构建项目

news2024/9/25 17:10:45

vue-cli 构建项目

当前使用最新版本构建一个vue node项目

插件

  1. vue-cli
  2. vue
  3. element-plus
  4. router
  5. vuex

安装vue-cli

npm install -g @vue-cli

安装完后 vue --version 查看版本

vue  --version

创建一个项目

vue create demo

在这里插入图片描述

这里要选择版本,不同版本要相组合配置的插件版本不同,这里用vue3

cd demo

安装 element-plus

npm install element-plus --save
vue add element-plus

在这里插入图片描述

这里选择安装方式,这里选择全部安装

安装 router

npm install vue-router@4
vue add router

安装vuex

npm install vuex@next --save
vue add vuex

到这里基本的插件就安装完成了

最后执行npn install 更新一下

npm install

运行项目

nom run serve

请添加图片描述发现报出这问题

修改 main.js
修改前

在这里插入图片描述

修改后

在这里插入图片描述

内容

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(store).use(router).use(ElementPlus).mount('#app')

再次运行

npm run serve

在这里插入图片描述

好了这样就整个搭建成功了
后面可以将element ui 内容放进来看一下

在这里插入图片描述
大家还有问题,请留言

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

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

相关文章

反射的基本使用

文章目录1. 一个需求引出反射2. 反射机制2.1 Java Reflection2.2 Java 反射机制可以完成2.3 反射相关的主要类2.4 反射优点和缺点2.5 反射调用优化-关闭访问检查3. Class类3.1 基本介绍3.2 Class类的常用方法3.3 获取Class类对象3.4 哪些类型有Class对象3.5 类加载3.6 类加载流…

aws imagebuilder 理解并使用imagebuilder构建pcluster自定义ami

参考资料 ec2-image-builder-workshop Troubleshoot EC2 Image Builder 理解imagebuilder imagebuilder 使用 cinc-client 进行客户端统一配置,CINC is not Chef,而是chef的免费分发版本。 https://cinc.sh/about/ imagebuilder管道的整体逻辑如下 核…

OpenHarmony如何切换横竖屏?

前言在日常开发中,大多APP可能根据实际情况直接将APP的界面方向固定,或竖屏或横屏。但在使用过程中,我们还是会遇到横竖屏切换的功能需求,可能是通过物理重力感应触发,也有可能是用户手动触发。所以本文主要带大家了解…

Git 代码版本管理工具详解 进厂必备

目录前言Git 概述什么是版本控制?为什么需要版本控制?版本控制工具集中式分布式Git 工作机制Git安装Git 常用命令(部分)初始化本地库设置用户签名初始化本地库查看本地库状态***工作区代码编写***添加暂存区撤销工作区的修改***提交本地库***工作区修改代…

选择排序算法的实现和优化

初识选择排序: 算法思想[以升序为例]: 第一趟选择排序时,从第一个记录开始,通过n-1次关键字的比较,从第n个记录中选出关键字最小的记录,并和第一个记录进行交换 第二趟选择排序时,从第二个记…

Linux学习笔记【part1】目录结构与VIM文本编辑器

Linux基础篇学习笔记 1.CentOS 7 64位安装 第一步,在软件选择中可以设置图形界面。 第二步,手动分区中设置挂载点,分别为引导分区、通用分区和交换区。 第三步,设置内核崩溃转储机制,这对服务器来说非常有用。 第四步…

传输层协议:TCP与UDP协议的区别

TCP和UDP有哪些区别? 关于TCP与UDP协议两个协议的区别,大部分人会回答,TCP是面向连接的,UDP是面向无连接的。 什么叫面向连接,什么叫无连接呢?在互通之前,面向连接的协议会先建立连接。例如&a…

网络工程师备考7章

考点分布: 注:考点不多,这个重点记住即可; 7.1 IPV4的问题与改进 7.2 IPV6的报文格式 注:版本0110表示IPV6,源地址和目的地址都是128位(bit),整个头部固定40个B(字节) 注:通信类型和流标记实际上是没有用的。负载长度是实际的报文长度,下一个头部:IPV6是可以作…

297. 二叉树的序列化与反序列化

297. 二叉树的序列化与反序列化 难度困难 序列化是将一个数据结构或者对象转换为连续的比特位的操作,进而可以将转换后的数据存储在一个文件或者内存中,同时也可以通过网络传输到另一个计算机环境,采取相反方式重构得到原数据。 请设计一个…

Linux:查看服务器信息,CPU、内存、系统版本、内核版本等

还是最近工作的总结,性能验证要根据服务器的配置才能做进一步的结论论证,废话不多说 目录查看Linux内核版本查看Linux系统版本CPU查看CPU信息(型号)物理CPU个数每个物理CPU中core的个数(即核数)查看逻辑CPU的个数内存查看内存信息…

【C语言航路】第十三站:动态内存管理

目录 一、为什么存在动态内存分配 二、动态内存函数 1.内存的分区 2.malloc和free (1)malloc和free库函数文档 (2)malloc和free的使用 2.calloc (1)calloc的库函数文档 (2)c…

模糊图像检测(c++)

Opencv-模糊检测 - 知乎图像清晰度,是指影像上各细部影纹及其边界的清晰程度。 解决问题:由于前端摄像机视频中聚焦不当,异物遮挡等原因,所引起的画面视野图像模糊的现象。 算法原理:将彩色图像转化为灰度图像&#xf…

Python深度学习基础(九)——深入浅析卷积核

深入浅析卷积核引言单通道卷积简单图像边缘检测锐化高斯滤波引言 提到卷积,应该多数人都会想到类似上图的这种示例,可以简单的理解成卷积核与图像中和卷积核相同大小的一块区域与卷积核相乘再求和,通过移动区域产生一个有和组成的新的图像&am…

黑马学ElasticSearch(十二)

目录: (1)ES集群-集群结构介绍 (2)es集群-搭建集群 (3)es集群-集群职责及脑裂 (4)es集群-分布式新增和查询流程 (5) es集群-故障转移 &#…

传输层协议:TCP协议(下)——运作方式(如何三次握手、四次挥手等)

运作方式 TCP协议的运行可划分为三个阶段:连接创建(connection establishment)、数据传送(data transfer)和连接终止(connection termination)。操作系统将TCP连接抽象为套接字表示的本地端点(local end-p…

【PyTorch】教程:学习基础知识-(6) Autograd

AUTOMATIC DIFFERENTIATION WITH torch.autograd 在训练神经网络时,最常用的算法是反向传播算法,在该算法中,参数根据损失函数相对于给定参数的梯度进行调整。 为了计算这些梯度, PyTorch 有一个内置的微分引擎 torch.autograd …

2022秋招算法岗面经题:训练模型时loss除以10和学习率除以10真的等价吗(SGD等价,Adam不等价)

问题描述:训练深度学习模型时loss除以10和学习率除以10等价吗? 先说结论 这个问题的答案与优化器有关 使用Adam、Adagrad、RMSprop等带有二阶动量vtv_tvt​的优化器训练时,当我们将loss除以10,对训练几乎没有影响。使用SGD、Mo…

Streamlit自定义组件开发教程

在这篇文章中,我们将学习如何构建Streamlit组件以及如何发布streamlit组件供其他人使用。 使用 3D场景编辑器快速搭建三维数字孪生场景 1、什么是Streamlit组件? Streamlit 组件是一个可共享的 Streamlit 插件,可让你为应用程序添加新的视觉…

Java——子集

题目链接 leetcode在线oj题——子集 题目描述 给你一个整数数组 nums ,数组中的元素 互不相同 。返回该数组所有可能的子集(幂集)。 解集 不能 包含重复的子集。你可以按 任意顺序 返回解集。 题目示例 输入:nums [1,2,3] …

MySQL管理

1:MySQL管理1.1:系统数据库Mysql数据库安装完成后,自带了一下四个数据库,具体作用如下: 数据库 含义 mysql 存储MySQL服务器正常运行所需要的各种信息 (时区、主从、用 户、权限等) information…