一. 创建环境

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. [OI] 平衡树

    1. 二叉查找树 二叉查找树的思想和优先队列比较像,都是把若干个数据按一定规则插到一棵树里,然后就可以维护特定的信息. 在优先队列的大根堆实现里,我们让每棵子树的根节点都大于它的儿子,这样就可以保证根 ...

  2. P9118 [春季测试 2023] 幂次

    二诊前愉快的一次测试,关键是还有奶茶喝 第二题,本来直接暴力去重枚举可以的六十分的,但是.......花了30分钟优化剪纸,优化空间后,惨变35分. [春季测试 2023] 幂次 题目描述 小 Ω 在 ...

  3. js 中必须加分号的位置集合

    1. 匿名函数(自执行函数)(function (){}()) 2. 解析赋值    2 个变量交换位置

  4. v-model 语法糖-在父子组件传值 的简写形式

    props的变量名字 必须是  value ,this.$emit('input',数据值) 的自定义事件必须是 input : v-model 是 vue 中进行数据双向绑定的指令,在内部实际上是通 ...

  5. 07 - react 唯一修改state状态的方式 setState

    // setState 修改状态 如果是直接修改页面不会改变 使用 setState 修改数据 才会驱动视图的改变 // setState 的原理:修改玩状态之后会调用 render 函数 impor ...

  6. 13. 说一下$set,用在Vue2还是Vue3

    $set 是 vue2 中对象用来追加响应式数据的方法 : 使用格式 : $set(对象 , 属性名 , 值 ) vue3中使用 proxy 替代了 Object.defineProperty 实现对 ...

  7. 39. 关于 diff 算法

    diff 算法是vue渲染列表数据的时候,把新的 Vnode 和旧的 Vnode 比较,通过 key 值的对应,变化的标签就更新视图,不变的就复用 :

  8. getshell后的基本信息收集

    基本信息收集 系统类型判断 使用whoami能快速判断系统是Linux还是Windows. 如果是Windows, 使用命令systeminfo | findstr OS可得到WIndows版本. 使 ...

  9. Web渗透05_SQL注入(TOP 1漏洞)

    SQL注入是所有WEB漏洞中最危险的攻击方式,带来的危害也是最大的.没有之一. SQL注入基础 在编写web应用时,几乎所有的数据都存储在网站的数据库中,你的账号信息,收藏信息,文章信息等等数据都存在 ...

  10. docker的使用-01配置国内镜像仓库提高加快拉取镜像的速度

    docker的使用-01配置国内镜像仓库提高加快拉取镜像的速度 我的docker版本:(win10专业版,安装的当前最新版docker desktop) docker --version Docker ...