一. 创建环境

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. OPENLDAP部署完整版(Linux)附一键式脚本

    (一)环境信息1,系统环境2,域信息(本章节使用)(二)应用部署1,ladp部署1. yum方式安装OpenLDAP服务2.拷贝数据库配置配置文件,并启动服务3.slappasswd生成OpenLDA ...

  2. Maya 2019.2 Mtoa 无法正常加载并报错

    事件起因: 在开始安装 Maya2019.2 时自动安装的 Mtoa 的版本为 5.3.1,但是在插件管理器里无法启用插件,于是乎去网上下了一个低的版本 5.1.1,虽然可以使用但是渲染出来的东西不能 ...

  3. USB协议详解第10讲(USB描述符-报告描述符)

    1.报告描述符的概念和作用 开门见山,报告描述符就是描述报告(HID接口上传输事务中的数据)的一组数据结构. 首先大家可能会问,报告又是什么?我们前面讲过,USB主机一般是以中断的方式向HID设备发送 ...

  4. 封装大屏组件 screenfull

    错误场景:使用大屏插件 screenFull 报错:in ./node_modules/screenfull/index.js  Module parse failed: Unexpected tok ...

  5. 【信创问题】解决东方通(TongWeb)报错 java.lang.NoClassDefFoundError: javax/persistence/spi/PersistenceProvider

    写在前边 今天帮现场同事定位问题,情况是项目同事使用东方通(TongWeb7.0)部署公司项目时,出现以下报错导致服务启动失败. 简单排查了下发现:war包内WEB-INF/lib/javax.per ...

  6. C# 并发控制框架:单线程环境下实现每秒百万级调度

    前言 在工业自动化和机器视觉领域,对实时性.可靠性和效率的要求越来越高.为了满足这些需求,我们开发了一款专为工业自动化运动控制和机器视觉流程开发设计的 C# 并发流程控制框架. 该框架不仅适用于各种工 ...

  7. 5.15 相约上海!2021 年度首届云原生 Meetup | KubeSphere & Friends

    时至今日,Kubernetes 虽然变成了云原生这套系统化方法论和开源技术的核心一环,但已经无法独立存在,而是与云原生生态中所有的技术形态息息相关.为了将云原生生态中的各个技术形态结合起来,帮助企业最 ...

  8. HTML 中 script 标签的属性和加载顺序

    script 标签默认是阻塞加载的,也就是先下载src内容,然后执行src内容,然后再往后读文档 head 中的 script 按顺序加载执行,然后再加载 body 的元素. 把 script 移动到 ...

  9. Games104 现代游戏引擎 Picoolo环境搭建 vulkan配置

    0 前言介绍 games104 现代游戏引擎课程是由 GAMES: Graphics And Mixed Environment Symposium 支持的一个课程. 如我们所视,Games并非的含义 ...

  10. three.js+vue智慧社区web3d数字孪生三维地图

    案例效果截图如下: 具体案例场景和功能,详见b站视频: https://www.bilibili.com/video/BV1Bb421E7WL/?vd_source=7d4ec9c9275b9c7d1 ...