vue3和elements创建应用
一. 创建环境
1. 创建D:\code\vue 文件夹
2. vscode打开文件夹
3. 打开终端,输入
npm install -g @vue/cli

4. 配置环境变量
终端输入:npm config list找到路径

将路径加入windows环境变量

5. win11系统设置-搜索:开发者
找到powershell,启用未签名状态下,运行脚本

6. 终端输入vue -V 测试

二. 新建VUE项目
1. Terminal输入vue create demo ,选择vue3,一路等待安装。

2. cd my-project, 然后npm run serve,OK了。


三. 安装element
想要搭建一个后台管理系统的前端页面,这样一个简单的页面是远远不够的,我们还需要丰富我们的页面,此时就可以使用到element框架了。
1. 安装element
npm install element-plus --save
2. main.js引入
import router from 'router'
import store from 'store'
import ElementPlus from 'element-plus';
import 'element-plus/theme-chalk/index.css';
createApp(App).use(store).use(ElementPlus).use(router).mount('#app')
npm run serve,少啥,npm i啥。
其中,我npm i了router、store、url
3. npm run serve,跑正常了

四. 愉快地玩耍
1. 在App.vue里,创建个button
<template>
<div>
<img alt="Vue logo" src="./assets/logo.png">
<el-button>哈哈</el-button>
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>

vue3和elements创建应用的更多相关文章
- vue2.0与vue3.0项目创建
脚手架安装与卸载 安装 npm install -g vue-cli //or npm install -g @vue/cli 卸载 npm uninstall -g vue-cli //or npm ...
- Vue3.0工程创建 && setup、ref、reactive函数 && Vue3.0响应式实现原理
1 # 一.创建Vue3.0工程 2 # 1.使用vue-cli创建 3 # 官方文档: https://cli.vuejs.org/zh/guide/creating-a-project.html# ...
- 学习 vue3 第一天 vue3简介,创建vue3项目 Composition Api 初识
前言: 从今天开始来和大家一起学习 vue3 相信大家都不陌生,已经火了一段时间了,但是还是有不少人没有学习,那就跟着六扇老师来简单的入个门 废话不多说,来开始今天的学习 Vue3 简介: 2020年 ...
- vue3.0脚手架 创建项目
1.下载node最新稳定版本,并且安装 2.安装好之后,在cmd或者terminal下, 使用npm -v 查看当前npm版本,验证是否安装成功 3.安装成功后,运行 npm i -g @vue/cl ...
- 图文并茂quasar2.6+vue3+ts+vite创建项目并引入mockjs,mockjs 拦截ajax请求的原理是什么,quasar为什么要使用boot?
每天都要开心(▽)哇: 首先呢,我们来创建项目 执行下面命令,开始创建项目啦 $ npm i -g @quasar/cli $ npm init quasar 下面是我的选项,仅供参考哇 √ What ...
- vue3.0创建项目和基本配置
借鉴博客:https://www.jianshu.com/p/6307c568832d/ https://www.cnblogs.com/KenFine/p/10850386.html 项目创建好后, ...
- 基于tauri+vue3.x多开窗口|Tauri创建多窗体实践
最近一种在捣鼓 Tauri 集成 Vue3 技术开发桌面端应用实践,tauri 实现创建多窗口,窗口之间通讯功能. 开始正文之前,先来了解下 tauri 结合 vue3.js 快速创建项目. taur ...
- 从零开始使用 Webpack 搭建 Vue3 开发环境
从零开始使用 Webpack 搭建 Vue3 开发环境 创建项目 首先需要创建一个空目录,在该目录打开命令行,执行 npm init 命令创建一个项目,这个过程会提示输入一些内容,完成后会自动生成一个 ...
- 什么是可变参数?如何创建不可变集合?Steam三类方法是什么?获取流方法特点?流中间方法特点?终结流方法特点?
==知识梳理== ==重难点梳理== ==今日目标== 1.能够了解什么是可变参数 2.能够了解如何去创建不可变集合 3.能够掌握Stream流的使用 ==知识点== 1.可变参数 2.Stream流 ...
- Vue(1):用Vue-cli构建Vue3项目
使用Vue-cli构建Vue3项目 1.检查node版本 node -v 以上node版本位14.15.0满足Vue3项目的创建条件(Vu3需要node 版本8以上) 为什么需要安装node? vue ...
随机推荐
- 【赵渝强老师】SQL的字符函数
字符函数,顾名思义,操作的就是字符串.通过下图,我们来了解一下Oracle的字符函数. 一.大小写控制函数 lower.upper.initcap select lower('Hello World' ...
- 高通pmic voter机制
前不久在高通 SDM450 平台接触了 voter 机制(投票机制).最近终于得空,结合一个问题简单研究了一下.现将研究流程简单记录一下,由于时间有限,所以是实用为目的,没有做详细的分析,不过结合着这 ...
- .NET云原生应用实践(一):从搭建项目框架结构开始
开篇 很早之前就想做一套案例,介绍.NET下如何从零开始搭建一个云原生的应用程序.不过这个话题有点大,会要包含很多内容.我本打算从新建一个ASP.NET Core Web API应用程序开始介绍,但又 ...
- AOT漫谈专题(第五篇): 如何劫持.NET AOT编译器 进行源码级调试
一:背景 1. 讲故事 上篇聊到了 C#程序编译成Native代码 的宏观过程,有粉丝朋友提了一个问题,能不能在 dotnet publish 发布的过程中对AOT编译器拦截进行源码级调试,这是一个好 ...
- KubeSphere 社区双周报 | KubeKey v3.0.0 发布 | 2022-11-10
KubeSphere 从诞生的第一天起便秉持着开源.开放的理念,并且以社区的方式成长,如今 KubeSphere 已经成为全球最受欢迎的开源容器平台之一.这些都离不开社区小伙伴的共同努力,你们为 Ku ...
- Web渗透09_文件包含漏洞
1 文件包含漏洞描述 开发人员编写代码时独立性好是一个很重要的要求,这边一个数据库类,那边一个模型类.几百行的整体代码,在整合时两行行代码就可以包含进来使用.文件包含有助于独立的代码之间的配合!有时引 ...
- vmware剪贴板共享不起作用的解决方法-银河麒麟V10服务器版
安装了虚拟机自带的vmware tools,还是不行 试试这样: yum install open-vm-tools yum install open-vm-tools-desktop 或者: sud ...
- jsp页面访问数据库根据数据情况,定时弹出提醒
需求:根据数据库情况,在页面定时弹出相应的消息 实现: 1. 展示DIV设置 <script language="javascript" type="text/ja ...
- 多模型COE方法
1.概述 在当前的人工智能发展中,单一模型的表现往往难以满足复杂任务的需求.为应对这些挑战,多模型协作的方法应运而生,"专家组合"(Mixture of Experts)便是其中一 ...
- Discuz7.2 faq.php页面注入漏洞分析
由于discuz在全局会对GET数组进行addslashes转义,导致该漏洞的产生. 参数问题存在于faq.php的grouppermission函数中. 具体细节访问:网易博客siberia h ...