用vscode在vue中加element组件，图片的引入

找到对应目录
cmd

vue init webpack (名字)

在src中App.vue中，将图片注释掉

src中mian.js加入

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI)

变成这样

---

然后终端输入

npm i element-ui -S
npm install
npm run dev

---

若要加入其他界面
在 src -> router -> index.js中
routers中

adminMange就是自己加的

---

重定向

redirect后还要加一个路径，不让找不到，以上首页是显示adminage的内容

---

抽出组件后怎么用

<template>
<div>
<col-button></col-button>//自己的组件
</div>
</template>

<script>
import ColButton from './colButton.vue'//（1）导入
export default{
  components:{ColButton},//（2）
}
//import后面的单词要和components中完全一致，但前面的标签就不用在乎大小写了
</script>

如果抽取的组件是在特定位置的，那在用时就必须放在特定位子里
例如，抽取的组件是**< el-form-item>**里，那用组件只能用在< el-form>中

加入图片

在vue项目开发中, 动态地址，图片要用require 引入，不用 :src="’…/img/image.jpg’" 会被解析为字符串

ur1：
        // "../../page/1632134553151.jpeg.jpeg", 
        //上面这个是不行的
        require('@/page/1632134553151.jpeg.jpeg')

（上面的这一张图片是我从网上找的）

这是选择图片

走马灯中加图片

<el-carousel-item v-for="item in imgList" :key="item">
	<img :src="item.url" />
</el-carousel-item>

imgList: [
        {
          url: require("../../page/light1.png"),
        },
        {
          url: require("../../page/lightname.png"),
        },
        {
          url: require("../../page/light2.png"),
        },
      ],

导航栏

src\pages\home\our.vue

导航栏中菜单对应界面，只需把index改为注册是的path就好

      <el-menu-item index="/invest">
        <i class="el-icon-s-data"></i>
        <span>管理</span>
      </el-menu-item>

这样点击管理菜单就会显示 /invest 界面的内容