Vue.js 项目引入 Element-UI 组件库并配置路由详细步骤

一时失言乱红尘 2022-12-27 08:22 185阅读 0赞

**step1.** 安装 Element-UI 组件库：

>> npm install element-ui --save

**step2.** 在 Vue.js 项目中的 main.js 中引入 element-ui 组件库，在文件中添加如下内容：

import ElementUI from 'element-ui'   			// 引入element-ui
    import 'element-ui/lib/theme-chalk/index.css'  	// 引入element样式
    
    Vue.use(ElementUI); 							// 实例化element

main.js 文件如下：

## main.js
    
    import Vue from 'vue'
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    import 'lib-flexible/flexible'
    import './assets/css/index.css'
    import router from "@/router/index";
    import App from './App.vue'
    
    Vue.config.productionTip = false
    Vue.use(ElementUI)
    
    new Vue({ 
      router,
      render: h => h(App),
    }).$mount('#app')

**step3.** Vue.js 项目默认的路由在在 src 目录下，通常我们在这里配置我们的 router 信息，考虑到后面的路由会比较多，这里我们建个 router 目录来专门管理路由。在这里建一个 index.js 文件来配置路由，再建一个 router.js文件来存放路由信息，所以这里我们需要在 main.js 中引入：

import router from '@router/index.js'

index.js 中写入 router 如下配置：

## index.js
    
    import Vue from 'vue'
    import Router from 'vue-router'
    import routers from './routers'
    
    Vue.use(Router)
    
    const router = new Router({ 
        mode: 'history',
        routes: routers
    });
    
    export default router

**step4**. 在 routers.js 文件中就可以统一的写入路由条目了，将路由写入到 routes 中去， 用 export 来导出默认模块为 routes，这样在 index.js 中就可以使用 import 引入该模块了。  
routers.js 文件如下：

## routers.js
    
    const Header = () => import('@/components/Header')
    const Aside = () => import('@/components/Aside')
    const Form = () => import('@/components/Form')
    
    const routes = [
        { 
            path: '/head',
            name: 'Header',
            component: Header
        },
        { 
            path: '/aside',
            name: 'Aside',
            component: Aside
        },
        { 
            path: '/form',
            name: 'Form',
            component: Form
        }
    ]
    
    export default routes

**step5**. 如果此时启动项目报错，一般是报如下错误，原因是缺少 core-js 依赖，安装该包即可。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center][]

>> npm install core-js --save

**step6.** 通常在 PC 端 Vue.js 项目中，将路由文件放到 src/router 文件夹中，将页面文件放到 src/templates 文件夹中，将组件文件放到 src/components 文件夹中，将静态资源文件放到 src/assets 文件夹中，项目结构如下：

![在这里插入图片描述][2020120911562187.png_pic_center]

**step7.** 启动项目，运行成功。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/d6b4abe76932468cbdb353a0b943eb6b.png
[2020120911562187.png_pic_center]: /images/20221120/60b88b41bda647fcbd4916bebc29f28f.png