ElementUI的使用

最新推荐文章于 2025-04-01 15:21:45 发布

程序员小袁鸭

最新推荐文章于 2025-04-01 15:21:45 发布

阅读量2.4k

点赞数

文章标签： elementui vue.js javascript

本文链接：https://blog.youkuaiyun.com/m0_52017422/article/details/123539018

版权

本文介绍了在Vue项目中如何使用ElementUI，包括下载安装和在main.js中引入。同时，详细讲解了vue-router的配置过程，如下载、引入组件以及在router/index.js中设置路由。还提到了路由间的数据传递方法。最后提醒，Vue作为渐进式框架，需根据需求按需引入，避免引发错误，并简单提及了Vue的生命周期和脚手架搭建。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue中element-ui的使用

首先是需要要下载element-ui

npm i install element-ui --s -D

其次，需要导入element-ui，在main.js引入一下内容

import Vue from 'vue';
// 引入element-ui当中的所有组件
import ElementUI from 'element-ui';
//引入element-ui的所有样式
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

Vue当中路由的使用

第一步，就是下载vue-router

npm install vue-router

第二步，自然是将vue-router引入到app当中去啦

import router from './router'
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

第三步自然是将自己创建的组件添加到router中来，在router包下的index.js当中配置路由

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login'
Vue.use(Router)

export default new Router({
  mode:'history',
  routes: [
    {
      path:"/",
      name:"Login",
      component:Login
    }
  ]
})

路由之间的数据传递，类似于一下做法，在路径中添加参数

export default{
router:[{
 path:'/merberLevel/:id/:username',
 name:"name"
 component:component
}]
}

vue使用其他组件库，可以去官网看，找到自己的目标，通过拼接修改即可

注意

vue是一种渐进式框架用到什么就引入什么东西有的时候如果引用没有反而是会报错的

vue的脚手架也是需要自己会用的

vue init webpack 项目名称

vite 搭建一个脚手架

npm install vite
# npm 6.x
npm init vite@latest my-vue-app --template vue

# npm 7+, 需要额外的双横线：
npm init vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app -- --template vue
# 创建一个vite初始化项目，几乎是什么都没有，都需要自己去配置，但是有一个优点就是小巧，自己想添加功能自己去添加就可以了
vue的几板斧 vue-router element-ui axios store
vue很多的的地方都是用到了这些东西，尤其是路由是十分的必要的，还需要去掌握他们之间的值的传递
props  es6规范 这样还是相当的重要的 打字的速度还是很重要的