一. 创建环境

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. Blazor开发框架Known-V2.0.11

    Known今天发布了V2.0.11版本,本次版本添加了系统WebApi在线测试,系统菜单样式配置,表格支持用户设置栏位显隐和顺序,系统上下文支持静态组件与后端交互,以及对PgSQL进行了详细的测试,修 ...

  2. [Tkey] A decorative fence

    还是看看简单而富有美感的爆搜吧 #include<bits/stdc++.h> using namespace std; #define int long long #define tes ...

  3. 信息打点-Web应用

    企业信息 小蓝本 https://sou.xiaolanben.com/pc 企业信息 爱企查 https://aiqicha.baidu.com/ 主要看知识产权 网络空间 FOFA https:/ ...

  4. 《Vue.js 设计与实现》读书笔记 - 第12章、组件的实现原理

    第12章.组件的实现原理 12.1 渲染组件 在渲染器内部的实现看,一个组件是一个特殊类型的虚拟 DOM 节点.之前在 patch 我们判断了 VNode 的 type 值来处理,现在来处理类型为对象 ...

  5. Android Systrace 基础知识 -- Why 60 fps ?

    1.正文 今天来讲一下为何我们讲到流畅度,要首先说 60 帧. 我们先来理一下基本的概念: 60 fps 的意思是说,画面每秒更新 60 次 这 60 次更新,是要均匀更新的,不是说一会快,一会慢,那 ...

  6. 58. vue常用的api

    1. nextTick  使用场景:通过异步渲染的页面解构不能直接dom操作,要使用 nextTick (延迟回调)等待一下 :nextTick 的作用:感知dom的更新完成,类似于 updated ...

  7. Blazor Hybrid 实战体验:那些你可能没预料到的坑没预料到的坑

    前言 昨天写了一篇介绍 Blazor Hybrid 技术的文章,但限于篇幅,一些问题未能深入探讨.今天,我想继续记录使用 Blazor Hybrid 过程中遇到的几个问题,以及这个技术目前的一些局限性 ...

  8. Tarjan缩点题单 刷题题解

    Tarjan缩点可以将一个图的每个强连通分量缩成一个点,然后构建新图,该图就会变成一个有向无环图.变成有向无环图之后就能结合最短路,拓扑......解决相应题目 洛谷题单分享: https://www ...

  9. rabbitmq 新下载链接🔗

    Linux下安装RabbitMQ需要依赖socat和erlang插件环境 1 插件下载  1.1 RabbitMQ下载 下载地址一:https://www.rabbitmq.com/download. ...

  10. 双指针习题:Kalindrome Array

    Kalindrome Array 题目链接: Kalindrome Array - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 题面翻译 对于长度为 \(m\) 的序列 \(b\), ...