0


Element-UI在webstorm的安装使用

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录


前言

  1. 提示:这里可以添加本文要记录的大概内容:

例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。


  1. 提示:以下是本篇文章正文内容,下面案例可供参考

一、Element-UI是什么?

Element UI 是一个基于Vue.js的开源UI组件库,专为开发者提供的一套优雅而灵活的UI组件,减少用户对常用组件的安装,降低开发难易程度。其中包含了各种常用的Web组件,如按钮,表单,导航以及高级组件等,如日期选择器,对话框等。Element UI的设计风格简洁美观,易于定制,使其成为许多Vue.js项目的首选UI框架。

二、安装方法

参考官网:链接: link

1.方法一:npm

项目已安装Vue.js,在项目终端执行安装命令或者进入项目文件目录cmd进行安装,安装命令如下:

  1. npm i element-ui -S
  1. 提示:如果安装进程一直没变,可以换淘宝源,输入以下命令
  1. npm config set registry https://registry.npm.taobao.org

配置成功后,可通过以下方式进行验证是否安装成功:
1.npm config get registry,链接里有json格式数据
在这里插入图片描述
2.在package.json里有element-ui的版本号
在这里插入图片描述
3.在node_modules文件里有element-ui文件。若没有此文件,在终端依次执行

  1. npm install

  1. npm run build

以及

  1. npm run dev

2.方法二:CDN引入

  1. <head><!-- 引入样式 --><linkrel="stylesheet"href="//unpkg.com/element-plus/dist/index.css"/><!-- Import Vue 3 --><scriptsrc="//unpkg.com/vue@3"></script><!-- 引入组件库 --><scriptsrc="//unpkg.com/element-plus"></script></head>

三、引入Element写例子

参考官网:链接: link

1.在main.js文件里完整引入

  1. import Vue from 'vue'
  2. import App from './App'
  3. import router from './router'
  4. import ElementUI from 'element-ui';
  5. import 'element-ui/lib/theme-chalk/index.css';
  6. Vue.use(ElementUI);//引入elementui
  7. //Vue.config.productionTip = false
  8. new Vue({
  9. el: '#app',
  10. router,
  11. components: { App },
  12. template: '<App/>'
  13. })

2.创建Vue文件

访问Elements官网,链接: link,将button组件的代码复制到创建的test.vue文件的div容器里
在这里插入图片描述

  1. <template><div class="test"><el-row><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button><el-button type="info">信息按钮</el-button><el-button type="warning">警告按钮</el-button><el-button type="danger">危险按钮</el-button></el-row></div></template><script>
  2. export default{
  3. name:'test'}</script>

3.添加路由

计划将上次的vue的ECharts与本次element-ui组件在同一页面显示。
(在一个页面使用多个router-view显示不同内容)
在router—index.js配置路由,注意路径,默认打开的是HelloWorld文件
在这里插入图片描述
index.js代码如下:

  1. import Vue from 'vue'
  2. import Router from 'vue-router'
  3. import HelloWorld from '@/components/HelloWorld'
  4. import test from '@/components/test'
  5. Vue.use(Router)
  6. export default new Router({
  7. routes: [
  8. {
  9. path: '/',
  10. name: 'HelloWorld',
  11. //component: HelloWorld
  12. components:{
  13. default:HelloWorld,
  14. 'eleui':test
  15. }
  16. },
  17. ]
  18. })

4.修改App.vue文件

将其他组件放在想放的位置,代码如下:

  1. <template><divid="app"><router-view/>//显示默认组件HelloWorld
  2. <divclass="container"><router-viewname="eleui"></router-view></div></div></template><script>exportdefault{name:'App',}</script>

总结

参考文档:https://blog.csdn.net/qq_44706779/article/details/120936543


本文转载自: https://blog.csdn.net/m0_46123285/article/details/136709541
版权归原作者 —丫丫 所有, 如有侵权,请联系我们删除。

“Element-UI在webstorm的安装使用”的评论:

还没有评论