一文教会你搭建vite项目并配置路由和element-plus

 更新时间:2022年07月19日 10:09:04   作者:五号社会好青年  
由于项目搭建过程实在繁琐,容易遗忘,每次新建项目还得百度一下怎么搭建,所以写下本文提醒自己,下面这篇文章主要给大家介绍了关于搭建vite项目并配置路由和element-plus的相关资料,需要的朋友可以参考下

1.创建项目

npm init vite@latest m-component -- --template vue-ts

2.安装vite

npm i

3.启动项目

npm run dev

4.可在vite.config.ts文件下修改端口号,默认为3030,我们可以改成习惯用的8080

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server:{
    port:8080
  }
})

5.安装路由router和element-plus

npm i -S vue-router@next element-plus

可在package.json中查看下载的路由和element-plus配置信息

6.在src目录下新建views和router文件夹,然后在router目录下新建index.ts文件,在index.ts文件下配置路由

import { createRouter,createWebHistory,RouteRecordRaw } from "vue-router";
import Home from "../views/Home.vue"
const routes:RouteRecordRaw[] = [
    {
        path:'/',
        component:Home
    }
]
const router = createRouter({
    routes,
    history:createWebHistory()
})

export default router

在views目录下新建一个Home.vue文件

<template>
    <div>
       首页
    </div>
</template>

<script lang="ts" setup>

</script>

<style lang="scss" scoped>
</style>

6.然后在main.ts中引入

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

const app =createApp(App)
app.use(router)
app.mount('#app')

7.使用element-plus

在main.ts中引入使用

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app =createApp(App)
app.use(router).use(ElementPlus)
app.mount('#app')

在Home.vue中

<template>
    <div>
        <el-button>按钮</el-button>
    </div>
</template>

<script lang="ts" setup>

</script>

<style lang="scss" scoped>
</style>

8.在App.vue中编写样式

<template>
    <router-view></router-view>
</template>

<style>
*{
    margin: 0;
    padding: 0;
}
</style>

这里使用的scss,需要先安装sass 和sass-loader(*这是css的预处理器)

npm i -D sass sass-loader

附:vite引入element-plus修改主题色报错

原因:引入文件路径不对

解决:~改成node_modules/,安装scss --dev,然后引入时去掉.scss/.css,完美运行

$--color-primary: #62c28c;
 
/* 改变 icon 字体路径变量,必需 */
$--font-path: "node_modules/element-plus/lib/theme-chalk/fonts";
@import "node_modules/element-plus/packages/theme-chalk/src/index";

总结

到此这篇关于搭建vite项目并配置路由和element-plus的文章就介绍到这了,更多相关vite搭建并配置路由element-plus内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue中vue-router路由使用示例详解

    Vue中vue-router路由使用示例详解

    Vue Router是Vue提供的路由管理器,将组件与路由一一对应起来,这种对应关系就路由,这篇文章主要介绍了Vue中vue-router路由使用,需要的朋友可以参考下
    2024-06-06
  • 通过vue写一个瀑布流插件代码实例

    通过vue写一个瀑布流插件代码实例

    这篇文章主要介绍了通过vue写一个瀑布流插件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • 解决VUE3 keep-alive页面切换报错parentComponent.ctx.deactivate

    解决VUE3 keep-alive页面切换报错parentComponent.ctx.deactivate

    这篇文章主要介绍了解决VUE3 keep-alive页面切换报错parentComponent.ctx.deactivate is not a function的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 详解webpack打包vue时提取css

    详解webpack打包vue时提取css

    本篇文章主要介绍了详解webpack打包vue时提取css,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • Element Table 自适应高度的实现示例

    Element Table 自适应高度的实现示例

    el-table的高度不能适应不同电脑的分辨率,也不能跟随浏览器的高度变化而变化的问题,本文就来解决一下Element Table 自适应高度,感兴趣的可以了解一下
    2024-07-07
  • Vue自定义过滤器格式化数字三位加一逗号实现代码

    Vue自定义过滤器格式化数字三位加一逗号实现代码

    这篇文章主要介绍了Vue自定义过滤器格式化数字三位加一逗号的实现代码,需要的朋友可以参考下
    2018-03-03
  • Vue异步更新DOM及$nextTick执行机制解读

    Vue异步更新DOM及$nextTick执行机制解读

    这篇文章主要介绍了Vue异步更新DOM及$nextTick执行机制解读,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • Vue+Vant 图片上传加显示的案例

    Vue+Vant 图片上传加显示的案例

    这篇文章主要介绍了Vue+Vant 图片上传加显示的案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue 使用v-for进行循环的实例代码详解

    vue 使用v-for进行循环的实例代码详解

    这篇文章主要介绍了vue 使用v-for进行循环的实例代码详解,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • vue中使用echarts制作圆环图的实例代码

    vue中使用echarts制作圆环图的实例代码

    这篇文章主要介绍了vue中使用echarts制作圆环图的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07

最新评论