Vue工程整合ElementUi

布满荆棘的人生 2023-02-20 07:52 19阅读 0赞

## Vue工程整合ElementUi ##

1.Mac版本:使用VScode编辑Vue工程权限不够，修改文件的权限：截图如下  
![VsCode权限不够，无法修改文件][VsCode]  
2.Vue工程目录结构  
![Vue目录结构][Vue]  
3.npm安装Element-UI

npm i element-ui

4.在main.js中导入ElementUI以及样式库

import Vue from 'vue';
    import ElementUI from '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)
    });

5.写Hello.vue

<template>
        <div>
                <h1>你好，Hello,{
       {name}}</h1>
                 <el-radio v-model="radio" label="1">备选项</el-radio>
                 <el-radio v-model="radio" label="2">备选项</el-radio>
        </div>
    </template>
    
    <script>
    export default {
        data(){
            return{
                name: "张三",
                radio: "2"
            };
        }
        
    };
    </script>
    
    <style>
    
    </style>

6.配置路由

import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    import Hello from '@/components/Hello'
    // @代表src根目录
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        },
        {
          path: '/hello',
          name: 'Hello',
          component: Hello    //Hello.vue
        }
      ]
    })

7.配置首页 App

<template>
      <div id="app">
        <img src="./assets/logo.png">
          <router-link to="/hello">去Hello</router-link>     
          <router-link to="/">去首页</router-link>
        
        <router-view/>
          
      </div>
    </template>
    
    <script>
    export default {
      name: 'App'
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

8.启动Vue工程

npm run dev

去首页  
![首页][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM3MDQ2MTkw_size_16_color_FFFFFF_t_70]  
去Hello  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM3MDQ2MTkw_size_16_color_FFFFFF_t_70 1]

问题：只改变下半部分不改变上半部分的原因是:App.vue  
中的**router-view**可以控制路由的视图，只改变路由的视图。

[VsCode]: https://img-blog.csdnimg.cn/20200625112351358.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM3MDQ2MTkw,size_16,color_FFFFFF,t_70
[Vue]: https://img-blog.csdnimg.cn/20200625110439532.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM3MDQ2MTkw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM3MDQ2MTkw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200625115028170.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM3MDQ2MTkw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM3MDQ2MTkw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200625115056958.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM3MDQ2MTkw,size_16,color_FFFFFF,t_70