elementUI 组件库及使用流程

常见的vue技术栈组件库

● 移动端（Vant, Cube-UI, NutUI ）
● PC端（ element-ui, Ant Design of Vue, iView）
● 小程序: uniapp


打开cmd窗口，用vue create 创建项目

vue create element-demo
-------------------------------
? Please pick a preset:
> Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
  Manually select features

//1. vue create 命令会自动创建文件夹，这样就不需要我们手动创建了
//2. 选择Vue2 版本的默认配置
//3. 如果vue create 命令不能正常运行，要先安装脚手架工具， 对应的命令是： npm i -g @vue/cli
//上一步的命令做了两件事：创建文件夹，把示例项目的代码下载到这个文件夹中，为了运行项目，我们还需要进入项目目录下，并运行命令。 对应的命令是：
cd element-demo # 进入项目目录
npm run serve # 运行命令

//查看效果
npm i element-ui -S
//-S: 是--save的简写，表示 这个包是生产依赖， 表示项目上线也要使用这个包。
 //-S: 是可以省略不写的。
// 如果要安装开发依赖，则要加 -D。
//www.yuque.com/fanrenjinjie/vue/xtt68s


//引入路由
npm i vue-router

**没有配置的项目**
定义src/router/index.js
```cpp
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/views/login.vue'

Vue.use(VueRouter)

const router = new VueRouter({
    
    
  routes: [
    {
    
     path: '/login', component: Login }
  ]
})

export default router

引入路由src/main.js中引入

// 省略其他
import router from '@/router/index.js'

new Vue({
    
    
+ router,
  render: h => h(App),
}).$mount('#app')

总结

elementui是做PC项目的首选
组件库一般都会有配套使用教程，基本套路是：
a. npm i 安装
b. 在main.js中导入，并使用

main.js中引入并注册

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

 **BUG修复

描述：

选中其他的菜单，刷新页面，发现默认选中的菜单不对！

解决

:default-active="$route.path"**

elementUI 组件库及使用流程

main.js中引入并注册

猜你喜欢