Vue+Element Plus 初始化

1. 初始化Vue项目   

vue create k8s-platform-fe

2. 引入Element Plus

#进入项目目录
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'//改造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当中如下： 

 这样就说明成功了。

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

3. 配置Vue路由

npm install vue-router
npm install nprogress

路由占位符，也就是后面匹配到哪条路由，那条路由所使用到的组件视图就会被放到这个位置。

也就是将路径对应的页面放到这个位置，那就将其引入到了主入口。

再创建一个test页面去封装路由。

//导入router的路由方法
import { createRouter,createWebHistory} from "vue-router";//导入进度条组件
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'//路由规则
const routes = [{path: '/test',component: () =>import('@/views/test/Test.vue'),meta: {title: "测试页"}}
]//路由规则创建好之后创建路由实例
const router = createRouter({history: createWebHistory(),routes
})//进度条的配置
NProgress.inc(100)
//easing 动画字符串
//speed 动画速度
//showSpinner 进度环显示隐藏
NProgress.configure({ easing: 'ease', speed: 600, showSpinner: false })router.beforeEach((to, from, next) => {// 启动进度条NProgress.start()// 设置头部if (to.meta.title) {document.title = to.meta.title} else {document.title = "默存"}//放行next()
})router.afterEach(() => {// 关闭进度条NProgress.done()
})// 抛出路由实例, 在 main.js 中引用
export default router

无论是加载/还是/test，每次去加载path的时候，从前置守卫干了一件事情，回车的时候，它会去启动进度条，然后一直往前走，等整个页面加载完成之后，还有后置的路由守卫，然后去将进度条done掉，done掉就结束了。其实就是 NProgress.start()  NProgress.done()干的事情。也就是这两个方法对进度条产生了效果。

router要在main.js里面去应用。

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！