目录1.创建项目2.安装vite3.启动项目4.可在vite.config.ts文件下修改端口号,默认为3030,我们可以改成习惯用的80805.安装路由router和element
npm init vite@latest m-component -- --template vue-ts
npm i
npm run dev
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
server:{
port:8080
}
})
npm i -S vue-router@next element-plus
可在package.JSON中查看下载的路由和element-plus配置信息
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>
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
const app =createApp(App)
app.use(router)
app.mount('#app')
在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>
<template>
<router-view></router-view>
</template>
<style>
*{
margin: 0;
padding: 0;
}
</style>
这里使用的scss,需要先安装sass 和sass-loader(*这是css的预处理器)
npm i -D sass sass-loader
原因:引入文件路径不对
解决:~改成node_modules/,安装scss --dev,然后引入时去掉.scss/.css,完美运行
$--color-primary: #62c28c;
$--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内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: 一文教会你搭建vite项目并配置路由和element-plus
本文链接: https://www.lsjlt.com/news/164590.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0