一. 创建环境

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. 【赵渝强老师】Kubernetes的探针

    Kubernetes提供了探针(Probe)对容器的健康性进行检测.实际上我们不仅仅要对容器进行健康检测,还要对容器内布置的应用进行健康性检测. Probe有以下两种类型: livenessProbe ...

  2. 利用3Dslice提取血管中心线

    1.首先进入官网下载你需要的版本.你也可以安装老版本,我已经用红色框框出来了. 2.开始安装,等个几十秒钟就ok了. 3.当然要实现提取中心线,还需要 VMTK 这个玩意, 打开应用,找到 insta ...

  3. 什么是WebRTC

    背景:webrtc web real-time communication 实时通信标准,提供了音视频通话系统的能力. 应用场景: 点对点视频聊天,如 微信视频,等实时视频通话应用. 多人视频会议,企 ...

  4. px 、em、rem 的选取依据

    1. px 像素(Pixel).绝对单位.像素px是相对于显示器屏幕分辨率而言的,是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果 px要换算成物理长度,需要 指定精度 DPI. 2. em ...

  5. yarn 和 npm 不能混合使用

    当有 yarn.lock 的时候说明项目使用的yarn 创建的 则后面的都要使用 yarn 操作,比如下载 包 等 : 当项目没有 yarn.lock 而是 package.json.lock 说明项 ...

  6. JDBC连接数据库(mysql)基本实现-七步

    // 包名 package com.zhulx; import java.sql.DriverAction; import java.sql.DriverManager; import java.sq ...

  7. Android复习(二)应用资源——>可绘制对象资源

    可绘制对象资源是图形的一般概念,是指可在屏幕上绘制的图形,以及可使用 getDrawable(int) 等 API 检索,或应用到拥有 android:drawable 和 android:icon  ...

  8. HOW MANY OF THEM?(让人匪夷所思的一题)

    题面 由n个节点构成的,割边数不超过m条的无向连通图个数(无自环和重边),答案对1e9+7取模. \[------------------------------------------- \] 真是 ...

  9. KubeSphere 部署向量数据库 Milvus 实战指南

    作者:运维有术星主 Milvus 是一个为通用人工智能(GenAI)应用而构建的开源向量数据库.它以卓越的性能和灵活性,提供了一个强大的平台,用于存储.搜索和管理大规模的向量数据.Milvus 能够执 ...

  10. 基于Material Design风格开源、免费的WinForms UI控件库

    前言 今天大姚给大家分享一个基于 Google 的 Material Design 风格开源.免费的.NET WinForms UI控件库:MaterialSkin. WinForms介绍 WinFo ...