一. 创建环境

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. LINQ 统计字符频率

    var arr = new string[] {"test","zhulongxu","asdfdgd","yangmi" ...

  2. vue项目中的package.json的private选项的作用

    { "name": "项目名称", "description": "描述", "version": ...

  3. JOI 2020 Final

    A - 長いだけのネクタイ (Just Long Neckties) JOI 公司开了一个派对.有 \(n + 1\) 条领带,第 \(i\) 条领带的长度是 \(a_i\).有 \(n\) 名员工, ...

  4. How To Remove the Oracle OLAP API Objects From 9i and 11g Databases (Doc ID 278111.1)

    How to remove the Oracle OLAP API objects from a 9i database We can consider like olap api objects: ...

  5. 微宏科技基于 KubeSphere 的微服务架构实践

    作者:尹珉,KubeSphere Ambassador.contributor,KubeSphere 社区用户委员会杭州站站长. 公司简介 杭州微宏科技有限公司于 2012 年成立,专注于业务流程管理 ...

  6. node.js 安装过程(绿色免安装版)

    20220908_node.js 安装过程(绿色免安装版) 1.下载 下载一个长期支持(LTS)版本:https://nodejs.org/en/download/ 我选择绿色免安装版 2.解压 将下 ...

  7. buck电路 & boost电路

    buck电路 buck电路是直流的降压电路,我们下面给大家讲下,如何把12V的直流电压降压成5V的直流电压 1.buck电路拓扑:12V----->5V 2.降压原理 a.开关闭合,电流走向 电 ...

  8. 题解:NOIP2023 天天爱打卡

    NOIP2023 天天爱打卡 - luogu 算法一 upd :2024/10/31. 记 \(f[i]\) 表示第 \(i\) 天休息, \(1\sim i\) 天能获得的最大能量. 考虑如何从 \ ...

  9. 经典强化学习算法:分层强化学习算法—options算法2(理解篇)

    论文地址: https://people.cs.umass.edu/~barto/courses/cs687/Sutton-Precup-Singh-AIJ99.pdf 例子: 这是一个寻路问题,该问 ...

  10. 负载均衡在web系统中的应用

    在日常的架构设计与开发中,常用的负载均衡算法主要分为静态和动态两类.静态负载算法以固定的频率分配任务不考虑服务器的状态信息,如轮询法.随机法等:动态负载均衡算法以服务器的实时负载状态信息来决定任务的分 ...