Vite快速搭建Vue3+TypeScript项目
# vite
快速搭建 Vue3
+ TypeScript
项目
参考链接:https://zhuanlan.zhihu.com/p/348959109
今年 2 月份,vite
出了 2.x
版本,抱着学一学的心态决定出个简单的项目,结合 element-plus
,以及将会成为每位前端必会的 typescript
,实现了如下内容。为了能帮到每一位想学习的开发者,代码已开源于 GitHub
上
# 先放几张效果图
源码地址:https://github.com/coderlyu/vite-frontend-template
(创作不易,欢迎点颗 star
再走)
- 💡
Vue 3.x
- ⚡️
Typescript
- 🛠️
Vite 2.x
- 📦
Vuex 4.x
- 🔩
Vue-Router 4.x
- 🔑
Md5 And Sign Provide Transmission For Website Security
- 👍
Mock In Development
- 🔖
Iconfont And Svg
- 🔍
Element-plus UI
- 📌
And More...





# 初始化项目
创建项目
yarn create @vitejs/app <project-name>
# 或者
npm init @vitejs/app <project-name>
2
3
4
以博主这个项目为例:文件名为 vite-frontend-template
npm init @vitejs/app vite-frontend-template
此时按下回车,可以看到以下页面,博主选择的是 vue-ts
(上下键可以切换选择的模板),按下回车之后会给你一个配置好了typescript
的 vite
配置模板
之后
cd vite-frontend-template
npm install
npm run dev
2
3
就可以看到项目模板运行之后的样子,本地访问 http://localhost:3000/
# 安装 vue-router
,vuex
npm i vue-router@next vuex@next
# vue-router
在 src
目录下新建 router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import HelloWorld from '../components/HelloWorld.vue'
const routes: Array<RouteRecordRaw> = [
{
path: '',
redirect: (_) => {
return { path: '/home' }
},
},
{
path: '/home',
name: 'HelloWorld',
component: HelloWorld,
},
{
path: '/about',
name: 'About', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "About" */ '../components/About.vue'),
},
{
path: '/:currentPath(.*)*', // 路由未匹配到,进入这个
redirect: (_) => {
return { path: '/404' }
},
},
]
const router = createRouter({
history: createWebHistory(''),
routes,
scrollBehavior(to, from, savedPosition) {
return {
el: '#app',
top: 0,
behavior: 'smooth',
}
},
})
export default router
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
27
28
29
30
31
32
33
34
35
36
37
38
39
在 src
目录下再新建一个 components/About.vue
文件,内容如下:
<template>
<h1>{{ msg }}</h1>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
name: 'About',
data() {
return {
msg: 'About Page',
}
},
setup() {},
})
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# vuex
在 src
目录下创建 store/index.ts
import { InjectionKey } from 'vue'
import { createStore, Store } from 'vuex'
export interface State {
count: number;
}
export const key: InjectionKey<Store<State>> = Symbol()
export const store =
createStore <
State >
{
state() {
return {
count: 0,
}
},
mutations: {
increment(state) {
state.count++
},
},
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
最后修改下 App.vue
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<router-view />
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import HelloWorld from './components/HelloWorld.vue'
export default defineComponent({
name: 'App',
components: {
HelloWorld
}
})
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
运行之后,你可以看到如下页面http://localhost:3000/home
about
页面 http://localhost:3000/about
# 安装 element-plus
npm install element-plus --save
# 按需引入
修改 main.ts
import { createApp } from 'vue'
import { store, key } from './store'
import router from './router'
import App from './App.vue'
import { ElButton } from 'element-plus'
const app = createApp(App)
app.component(ElButton.name, ElButton)
app.use(store, key)
app.use(router)
app.mount('#app')
2
3
4
5
6
7
8
9
10
11
12
13
14
样式按钮引入可以使用插件 vite-plugin-style-import
- 安装
npm i vite-plugin-style-import -D
- 修改
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
styleImport({
libs: [
{
libraryName: 'element-plus',
esModule: true,
resolveStyle: (name) => {
return `element-plus/lib/theme-chalk/${name}.css` // 按需引入样式
},
},
],
}),
],
})
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
在 About.vue
页面使用
<template>
<h1>{{ msg }}</h1>
<el-button type="primary">element-plus按钮</el-button>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
name: 'About',
data() {
return {
msg: 'About Page',
}
},
setup() {},
})
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
此时访问 http://localhost:3000/about
,可以看到按钮已经出来了
# 写在最后
目前 vue3.x
的生态环境在不断完善,使用 vite 开发时,可以在npm
上搜 vite-
,里面还是有很多能用的 vite 插件,比如vite-plugin-mockit
,vite-svg-loader
...
- 同时可以多关注
vue3.x
官网https://v3.vuejs.org/guide/introduction.html
vuex4.x
官网:https://next.vuex.vuejs.org/
vue-router4.x
官网:https://next.router.vuejs.org/guide/
vite2.x
官网:https://vitejs.dev/config/
博主学习的时候也是翻这些内容去学习,如果有心的话,上面的代码,大部分都可以在这些官网里面找到。
源码地址:https://github.com/coderlyu/vite-frontend-template