Vite新建一个vue3 ts项目
第一步 初始化项目
npm init vite@latest复制代码
接下来按照提示进入项目juejin，初始化和运行就可以在浏览器里查看效果了
运行后在终端提示：Network: use `--host` to expose，意思是需要把本机ip和端口暴露出来，要不然只能通过localhost本机访问，修改vite.config.js即可。
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path' //引用解决别名
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
//下面解决暴露本地地址和端口：Network: use `--host` to expose
server: {
host: '0.0.0.0',
port: 8079, //可以指定新的端口访问
open: true
},
//解决暴露地址
//下面别名,可以使用‘@’来代替src目录了
resolve:{
alias:[
{
find:'@',
replacement:resolve(__dirname,'src')
}
]
}
})复制代码第二步 添加路由
安装
npm install vue-router@next --save复制代码
在src目录下，创建router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
// createWebHashHistory hash 路由
// createWebHistory history 路由
// createMemoryHistory 带缓存 history 路由
import Login from '../views/login/index.vue'
import Main from '../views/main/index.vue'
const routes: RouteRecordRaw[] = [
{
path: "/login",
// component: () => import("../views/login/index.vue")
component: Login
},
{
path: '/',
component: Main
}
]
const router=createRouter({
history:createWebHistory(),
routes
})
export default router复制代码在main.ts中挂载路由
import { createApp } from 'vue'
import App from './App.vue'
import router from './router' //引入路由
createApp(App).use(router).mount('#app') //路由挂载复制代码在app.vue页面中添加
<router-view />
作者：12码力
链接：https://juejin.cn/post/7026708587955093512