您当前的位置:首页 > 电脑百科 > 程序开发 > 前端

element乘风破浪

时间:2022-09-13 13:51:13  来源:今日头条  作者:君子中带着点痞子气

之前进入公司都是有成型的vue项目进行二次开发,所以对如何创建vue项目并不了解。最近开发新项目,前端选择elementui来进行开发,有幸自己完整搭建项目,所以和大家分享一下搭建过程,一起在vue中乘风破浪。

1.我们需要创建vue项目。第一步需要安装node.js。可通过访问https://nodejs.org/zh-cn/进行下载,安装成功后可通过运行命令行 node-v进行查看是否安装成功。如下图所示 。

 

2.接下来我们需要全局安装vue-cli,需要注意的是vue-cli对node.js版本是一定的要求。

 

可以通过运行如下命令进行vue-cli的安装(因vue-cli为国外镜像,下载较慢,可通过更换淘宝源进行安装,运行命令如第1行所示)。安装完成后可运行第三行命令来检查是否安装成功。

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g @vue/cli
vue -V

接下来到我们重磅环节,创建vue项目。首先以管理员身份运行cmd命令行窗口,进入任意一个想创建项目的文件夹,运行 vue create demo01 命令后,如下图所示。

 

可自由选择vue3还是vue2版本,或者也可以进行自定义配置。(我选择vue 3版本进行安装,选中后回车进行安装,安装完成后则显现如下图所示界面)

 

根据提示命令进行运行,出现如下界面,代表我们安装完成。

 

我们访问localhost:8080后,出现项目界面。

 

至此我们vue项目已安装成功,接下来我们安装elementui。我们可以通过运行如下命令进行安装。(element-plus为element3,支持手机端展示)

npm install element-plus –-save

接下来我们需要通过编辑器打开项目,来引入element。

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'     //需要引入的部分1
import 'element-plus/dist/index.css'       //需要引入的部分2
createApp(App).use(ElementPlus)     //需要引入的部分3
createApp(App).mount('#app')

打开HelloWorld页面,将内容改为如下代码。

<template>
  <div class='swt'>
    <el-switch
            v-model="value"
            size="large"
            active-text="Open"
            inactive-text="Close"
    />
    <br />
    <el-switch v-model="value" 
    active-text="Open" inactive-text=
    "Close" />
    <br />
    <el-switch
            v-model="value"
            size="small"
            active-text="Open"
            inactive-text="Close"
    />
  </div>
</template>


<script>


  import { ElSwitch } from 'element-plus'
  export default {
    name: 'MySwich',
    data(){
      return{
        value:true,
      }
    },
    components: { ElSwitch  },
  }
</script>


<style scoped>
  .swt{
    text-align: center;
  }
</style>

在编辑器内运行npm run serve命令,打开项目页面,如下图所示。

 

至此安装elementui的流程就到此结束,请愉快地在vue双向绑定的世界中冲浪吧。



Tags:element   点击:( )  评论:( )
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:[email protected]),我们将及时更正、删除,谢谢。
▌相关推荐
之前进入公司都是有成型的vue项目进行二次开发,所以对如何创建vue项目并不了解。最近开发新项目,前端选择elementui来进行开发,有幸自己完整搭建项目,所以和大家分享一下搭建过...【详细内容】
2022-09-13  Tags: element  点击:(0)  评论:(0)  加入收藏
在一些内部OA或者流转的文件,或者给一些客户的报价文件、合同,或者一些医院出示的给保险机构的病历资料等,有时候可能都希望快速的使用电子签章的处理方式来给文件盖上特定的印...【详细内容】
2022-03-22  Tags: element  点击:(96)  评论:(0)  加入收藏
引言Hello 大家好,这里是Anyin。最近打算把一个小型项目(小程序点餐系统)重构为微服务+微应用模式,前端的技术栈打算使用Vue3 + TS + ElementPlus + Qiankun 。这里记录下我在构...【详细内容】
2022-03-14  Tags: element  点击:(283)  评论:(0)  加入收藏
<el-table v-loading="loading" :data="list" :border="true" @selection-change="selectChange" :key="tableKey"> <el-table-column type="selection" width="45"></el-t...【详细内容】
2022-02-21  Tags: element  点击:(148)  评论:(0)  加入收藏
&emsp;大家好,我是为广大程序员兄弟操碎了心的小编,每天推荐一个小工具/源码,装满你的收藏夹,每天分享一个小技巧,让你轻松节省开发效率,实现不加班不熬夜不掉头发,是我的目标!&emsp...【详细内容】
2021-03-22  Tags: element  点击:(537)  评论:(0)  加入收藏
之前一直采用VS进行各种前端后端的开发,随着项目的需要,正逐步融合纯前端的开发模式,开始主要选型为Vue + Element 进行BS前端的开发,后续会进一步整合Vue + AntDesign的界面套...【详细内容】
2020-06-09  Tags: element  点击:(138)  评论:(0)  加入收藏
上一篇介绍了 世界排名前十的Linux系统:有最美Linux称号的Elementary,我们已经大致了解了Elementary,而Elementary是基于Ubuntu的发行版,熟悉Ubuntu的朋友使用起Elementary自然...【详细内容】
2019-11-07  Tags: element  点击:(293)  评论:(0)  加入收藏
offsetHeight, offsetWidthHTMLElement.offsetHeight 是一个只读属性,它返回该元素的像素高度,高度包含该元素的垂直内边距和边框,且是一个整数。HTMLElement.offsetWidth 是一...【详细内容】
2019-09-02  Tags: element  点击:(377)  评论:(0)  加入收藏
▌哈哈电竞推荐
之前进入公司都是有成型的vue项目进行二次开发,所以对如何创建vue项目并不了解。最近开发新项目,前端选择elementui来进行开发,有幸自己完整搭建项目,所以和大家分享一下搭建过...【详细内容】
2022-09-13  君子中带着点痞子气  今日头条  Tags:element   点击:(0)  评论:(0)  加入收藏
Spring Boot + Vue 这一对技术栈目前看来可以说是非常的火热,关于 Spring Boot 松哥已经写过多篇教程,公号后台回复 666 可以获取 PDF 链接。前后端分离的文章也写过好几篇了,...【详细内容】
2022-09-06   ITPUB2022  网易号  Tags:Vue   点击:(11)  评论:(0)  加入收藏
1.业务背景 2.实体类 3.自定义Mapper和xml文件 4.Service层 5.Controller层 1.业务背景业务场景中,一个会话中存在多个场景,即一个session_id对应多个scene_id和scene_name如...【详细内容】
2022-09-05  互联网架构小马哥  今日头条  Tags:前端   点击:(15)  评论:(0)  加入收藏
对于前端同学来说,ajax 请求应该不会陌生。jquery 真的ajax请求做了封装,可以通过下面的方式发送一个请求并获取相应结果:$.ajax({ url: "https://echo.apipost.cn/get.php"...【详细内容】
2022-09-01  奔四码农    Tags:ajax   点击:(19)  评论:(0)  加入收藏
前端开发是指使用编码和其他应用程序(如HTML、CSS和JavaScript)创建web门户的用户界面。“前端开发”一词中的前端指的是客户端或web用户遇到的网站的那一面。类似的,前端开...【详细内容】
2022-08-20  粤嵌教育    Tags:前端   点击:(26)  评论:(0)  加入收藏
构建自己的身份验证服务可能很乏味、复杂且耗时。为了节省时间,开发人员经常求助于使用第三方身份验证服务进行身份验证。这篇文章将指导您如何使用 SuperTokens 向 VueJS 应...【详细内容】
2022-08-18  qaseven    Tags: Vuejs   点击:(27)  评论:(0)  加入收藏
来自公众号: 前端自习课链接:https://juejin.cn/post/7084536432731095048/最近入门 Vue3 并完成 3 个项目,遇到问题蛮多的,今天就花点时间整理一下,和大家分享 15 个比较常见的...【详细内容】
2022-08-16  中科爱好小达人    Tags:Vue3   点击:(54)  评论:(0)  加入收藏
最近正在将一个使用单文件组件的 Options API 的 Vue2 JavaScript 项目升级为 Vue3 typescript,并利用 Composition API 的优势。比如,下面这种 选项API 方式:export default {...【详细内容】
2022-08-16  前端小智    Tags:Vue3   点击:(98)  评论:(0)  加入收藏
Vue 创始人尤雨溪宣布,新版 Vue 3 中文文档上线了!地址:cn.vuejs.org其他变化:原先的 Vue 2 文档现在迁移到了 v2.cn.vuejs.org 之前的临时 v3 文档 ( http://v3.cn.vuejs.org )...【详细内容】
2022-08-14  OSC开源社区  搜狐号  Tags:Vue 3   点击:(25)  评论:(0)  加入收藏
什么是Vitest?自从 尤大 的构建工具Vite获得了巨大的人气,现在有了一个由它驱动的极快的单元测试框架。Vitest。Vitest 与 Jest 兼容,具有开箱即用的 ESM、Typescript 和 JSX...【详细内容】
2022-08-09  前端小智    Tags:Vitest   点击:(40)  评论:(0)  加入收藏
站内最新
站内热门
站内头条