1. 初始化 Vue 项目   



创建vue3 项目  


vue create k8s-platform-fe



2. 引入 Element Plus



安装 element-plus   首先去安装这些依赖包，安装好了将其引入，引入的方式有全局引用和局部引入。其实和组件是一样的，局部引入哪里引入哪里使用。如果每个页面都涉及到使用element组件的时候，就没有必要一个一个组件去引入了，那么只需要在main.js里做全局的引入就行了。



#进入项目目录
cd k8s-platform-fe

#安装element plus，这些依赖是根据每个项目去隔离的
npm install element-plus

element-ui的图标不需要一个一个导入就可以直接使用了。但是element-plus的话需要一个一个导入。图标如果没有去做全局注册的话，要去导入一下，引入一下才能使用这个图标，也就是局部导入，这样在后面使用图标的时候直接使用就行了，就不需要再去导入了。

下面就是整个element的初始化就完成了。

import { createApp } from 'vue'
import App from './App.vue'

//导入elementplus
import ElementPlus, { ElIcon } from 'element-plus'
//默认情况下找的是node_models目录下的，导入样式表
import 'element-plus/dist/index.css'
//导入element-plus所有图标
import * as ELIcons from '@element-plus/icons-vue'
import 'element-plus/dist/index.css'

//改造vue初始化实例
const app = createApp(App)
//将所有图标注册为组件
for (let iconName in ELIcons){
    //第一个参数是你注册的组件名，这里是原生的组件名,第二个参数是组件
    app.component(iconName,ElIcon[iconName])
}
//使用element-plus
app.use(ElementPlus)
app.mount('#app')

component是注册组件，在main.js里面的话就是全局注册，所有地方都能用，use是使用第三方包的特性，也就是安装vue的插件，你像antd、elementplus、router这些，除了npm install外，还需要vue去引入这个插件。


App.vue当中如下： 

<template>
  <P>elemnet-plus组件如下</P>
 <el-button type="primary">这是一个elemnet按钮</el-button>
</template>

<script>
export default {
  name: 'App',

}
</script>

 这样就说明成功了。

Vue+Element Plus 初始化_vue.js

 

 

下面要去做整个项目的初始化。

 


3. 配置 Vue 路由


安装 Vue Router 和进度条 


npm install vue-router
npm install nprogress



配置 App.vue 入口， src/App.vue   这个时候需要将框架里面原先帮我们配置好的东西全部删除掉



 

Vue+Element Plus 初始化_初始化_02