一. 创建环境

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. Adobe Acrobat XI Pro 打开pdf报错 109

    事件起因: 某同事在使用 Adobe Acrobat XI Pro 打开pdf文件时,会偶发性的报错 "处理页面时发生错误.读取本文当时出现问题(109)."   解决办法: 在网 ...

  2. 《Vue.js 设计与实现》读书笔记 - 第5章、非原始值的响应式方案

    第5章.非原始值的响应式方案 5.1 理解 Proxy 和 Reflect Proxy Proxy 只能代理对象,不能代理非对象原始值,比如字符串. Proxy 会拦截对对象的基本语义,并重新定义对象 ...

  3. union联合体的缺陷

    传统的 union 联合体在 C++ 中虽然提供了一种能够在相同的内存空间内存储多种不同类型的方式,但它也有一些显著的缺陷和限制.这些缺陷让 union 的使用不太安全,尤其是在复杂的程序中.以下是传 ...

  4. USB协议详解第1讲(核心概念通俗理解)

    0.概括 USB协议学习中最重要几个概念如下,没有提及的就是对USB协议学习中不重要的或者编程不需要用到的.大家也不用着急,概念必须要学会,否则都不知道下面这些东西是什么还学什么通用串行总线协议,大家 ...

  5. cf1632 Codeforces Round #769 (Div. 2)题解

    A ABC 水题0.0 B Roof Construction 构造题,经过实验构造出了0的右边是不超过\(n\)的最大的\(2^k\rightarrow n\),左边是\(2^k-1,2^k-2,. ...

  6. 活动预告 | 中国数据库联盟(ACDU)中国行定档深圳,一起揭秘数据库前沿技术

    在当今数字化时代,数据库是各行各业中最核心的信息管理系统之一.随着技术的飞速发展,数据库领域也不断涌现出新的前沿技术和创新应用.数据库运维和开发人员需要紧跟前沿技术,才能保持竞争力,并实现更高效.更智 ...

  7. 11-react使用props.children 处理父子组件之间的传值

    // props.children 组件传值 import { Component } from "react" import reactDom from "react- ...

  8. Android复习(二)应用资源——>字符串

    转自:https://developer.android.google.cn/guide/topics/resources/string-resource#kotlin 字符串资源为您的应用提供具有可 ...

  9. day02-json字符串和js对象

    Web1.0时代 早期网站的登录,如果失败,需要刷新页面才能重新登录; 如果不点击提交按钮,就不知道自己密码输错了: 现在大多数的网站,都是局部刷新,在不刷新整个页面的情况下,实现页面更新: 注册的时 ...

  10. mosquitto(MQTT)服务器搭建和基本使用

    一.安装 搭建一个mqtt服务器,这里我们采用mosquitto 1. 下载地址:https://mosquitto.org/download/ 2. 选择windows:https://mosqui ...