一. 创建环境

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创建应用的更多相关文章

  1. vue2.0与vue3.0项目创建

    脚手架安装与卸载 安装 npm install -g vue-cli //or npm install -g @vue/cli 卸载 npm uninstall -g vue-cli //or npm ...

  2. 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# ...

  3. 学习 vue3 第一天 vue3简介,创建vue3项目 Composition Api 初识

    前言: 从今天开始来和大家一起学习 vue3 相信大家都不陌生,已经火了一段时间了,但是还是有不少人没有学习,那就跟着六扇老师来简单的入个门 废话不多说,来开始今天的学习 Vue3 简介: 2020年 ...

  4. vue3.0脚手架 创建项目

    1.下载node最新稳定版本,并且安装 2.安装好之后,在cmd或者terminal下, 使用npm -v 查看当前npm版本,验证是否安装成功 3.安装成功后,运行 npm i -g @vue/cl ...

  5. 图文并茂quasar2.6+vue3+ts+vite创建项目并引入mockjs,mockjs 拦截ajax请求的原理是什么,quasar为什么要使用boot?

    每天都要开心(▽)哇: 首先呢,我们来创建项目 执行下面命令,开始创建项目啦 $ npm i -g @quasar/cli $ npm init quasar 下面是我的选项,仅供参考哇 √ What ...

  6. vue3.0创建项目和基本配置

    借鉴博客:https://www.jianshu.com/p/6307c568832d/ https://www.cnblogs.com/KenFine/p/10850386.html 项目创建好后, ...

  7. 基于tauri+vue3.x多开窗口|Tauri创建多窗体实践

    最近一种在捣鼓 Tauri 集成 Vue3 技术开发桌面端应用实践,tauri 实现创建多窗口,窗口之间通讯功能. 开始正文之前,先来了解下 tauri 结合 vue3.js 快速创建项目. taur ...

  8. 从零开始使用 Webpack 搭建 Vue3 开发环境

    从零开始使用 Webpack 搭建 Vue3 开发环境 创建项目 首先需要创建一个空目录,在该目录打开命令行,执行 npm init 命令创建一个项目,这个过程会提示输入一些内容,完成后会自动生成一个 ...

  9. 什么是可变参数?如何创建不可变集合?Steam三类方法是什么?获取流方法特点?流中间方法特点?终结流方法特点?

    ==知识梳理== ==重难点梳理== ==今日目标== 1.能够了解什么是可变参数 2.能够了解如何去创建不可变集合 3.能够掌握Stream流的使用 ==知识点== 1.可变参数 2.Stream流 ...

  10. Vue(1):用Vue-cli构建Vue3项目

    使用Vue-cli构建Vue3项目 1.检查node版本 node -v 以上node版本位14.15.0满足Vue3项目的创建条件(Vu3需要node 版本8以上) 为什么需要安装node? vue ...

随机推荐

  1. 【赵渝强老师】SQL的字符函数

    字符函数,顾名思义,操作的就是字符串.通过下图,我们来了解一下Oracle的字符函数. 一.大小写控制函数 lower.upper.initcap select lower('Hello World' ...

  2. 高通pmic voter机制

    前不久在高通 SDM450 平台接触了 voter 机制(投票机制).最近终于得空,结合一个问题简单研究了一下.现将研究流程简单记录一下,由于时间有限,所以是实用为目的,没有做详细的分析,不过结合着这 ...

  3. .NET云原生应用实践(一):从搭建项目框架结构开始

    开篇 很早之前就想做一套案例,介绍.NET下如何从零开始搭建一个云原生的应用程序.不过这个话题有点大,会要包含很多内容.我本打算从新建一个ASP.NET Core Web API应用程序开始介绍,但又 ...

  4. AOT漫谈专题(第五篇): 如何劫持.NET AOT编译器 进行源码级调试

    一:背景 1. 讲故事 上篇聊到了 C#程序编译成Native代码 的宏观过程,有粉丝朋友提了一个问题,能不能在 dotnet publish 发布的过程中对AOT编译器拦截进行源码级调试,这是一个好 ...

  5. KubeSphere 社区双周报 | KubeKey v3.0.0 发布 | 2022-11-10

    KubeSphere 从诞生的第一天起便秉持着开源.开放的理念,并且以社区的方式成长,如今 KubeSphere 已经成为全球最受欢迎的开源容器平台之一.这些都离不开社区小伙伴的共同努力,你们为 Ku ...

  6. Web渗透09_文件包含漏洞

    1 文件包含漏洞描述 开发人员编写代码时独立性好是一个很重要的要求,这边一个数据库类,那边一个模型类.几百行的整体代码,在整合时两行行代码就可以包含进来使用.文件包含有助于独立的代码之间的配合!有时引 ...

  7. vmware剪贴板共享不起作用的解决方法-银河麒麟V10服务器版

    安装了虚拟机自带的vmware tools,还是不行 试试这样: yum install open-vm-tools yum install open-vm-tools-desktop 或者: sud ...

  8. jsp页面访问数据库根据数据情况,定时弹出提醒

    需求:根据数据库情况,在页面定时弹出相应的消息 实现: 1. 展示DIV设置 <script language="javascript" type="text/ja ...

  9. 多模型COE方法

    1.概述 在当前的人工智能发展中,单一模型的表现往往难以满足复杂任务的需求.为应对这些挑战,多模型协作的方法应运而生,"专家组合"(Mixture of Experts)便是其中一 ...

  10. Discuz7.2 faq.php页面注入漏洞分析

    由于discuz在全局会对GET数组进行addslashes转义,导致该漏洞的产生. 参数问题存在于faq.php的grouppermission函数中.   具体细节访问:网易博客siberia h ...