唯品秀前端博客
立即登录 马上注册

webpack打包过程是先打包然后再放到浏览器运行,这个打包过程随着项目代码的叠加,开发过程中等待打包的时间也会边长。而vite2是先将项目放到浏览器环境下,使浏览器接管了打包程序的部分工作,只需要在浏览器请求源码时进行转换并按需提供源码,这大大增加了开发效率。同时vite2与vue3和typescript更加适合。

vite项目创建

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# npm 6.x
npm init @vitejs/app my-vue-app --template vue

# npm 7+, 需要额外的双横线:
npm init @vitejs/app my-vue-app -- --template vue

# yarn
yarn create @vitejs/app my-vue-app --template vue

vanilla
vue
vue-ts
react
react-ts
preact
preact-ts
lit-element
lit-element-ts
1
2
3
创建完项目后要进入项目文件夹
npm install
安装所需的npm包

路由管理

1
2
在vite2的模板默认安装下是没有路由的需要自行安装
npm install vue-router@4

新建router文件夹创建index.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 引入创建路由管理器 引入创建路由模式 history模式
import { createRouter, createWebHistory } from 'vue-router'
import Home from "@/view/home.vue" // 使用别名@
// 引入路由各页面配置
const routes=[
  {
    path: '/',
    redirect: '/index'
  },
  {
    path: '/home',
    name: 'home',
    component: Home
  },
  {
    path: '/index',
    component: ()=>import('../pages/index.vue')
  }
]
// 创建路由管理器 模式和路由
const router=createRouter({
  history: createWebHistory(),
  routes
})

export default router

@别名配置

1
2
3
4
5
6
7
8
9
10
11
12
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
})

main.ts引入路由管理器

1
2
3
4
5
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'

createApp(App).use(router).mount('#app')
本站所有文章、图片、资源等如无特殊说明或标注,均为来自互联网或者站长原创,版权归原作者所有;仅作为个人学习、研究以及欣赏!如若本站内容侵犯了原著者的合法权益,可联系我们进行处理,邮箱:343049466@qq.com
赞(0) 打赏
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"vite中引入vue-router路由vite2+vue3+TS+vue-router"

表情

最新评论

    暂无留言哦~~