从零开始搭建Vue3+Vite+TS+Router+Pinia脚手架

文末附有完整代码链接

环境要求

Vite 要求 Node.js 的版本为 14.18+或者16+，建议使用16以上的版本

项目创建

下面使用npm做示例代码，通用可以使用yarn或者pnpm

npm create vite@latest
1

然后安装提示一步步操作即可，正常情况会输出如下结果，这样就创建了一个基于Vite和TS的Vue项目

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
√ Project name: ... vite-project
√ Select a framework: » Vue
√ Select a variant: » TypeScript

Scaffolding project in D:\Projects\vite\vite-project...

Done. Now run:

  cd vite-project
  npm install
  npm run dev

1
2
3
4
5
6
7
8
9
10
11
12
13

或者使用下面命令直接设置框架和项目名称

npm create vite@latest project-name -- --template vue-ts
1

进入项目根目录可以看到项目下的文件列表

.gitignore
.vscode
public
src
index.html
package.json
README.md
tsconfig.json
tsconfig.node.json
vite.config.ts
1
2
3
4
5
6
7
8
9
10

进入项目根目录，安装依赖包

npm install
1

进入项目根目录，运行下面命令启动项目

vite
1

添加Router

引入Router模块

npm install vue-router@4
1

首先在view目录下创建两个页面，First.vue和Second.vue

First.vue

<template>
	<div>First
	div>
template>

<script lang="ts" setup>

script>
<style scoped lang="scss">

style>

1
2
3
4
5
6
7
8
9
10
11
12

Second.vue

<template>
	<div>Second
	div>
template>

<script lang="ts" setup>

script>
<style scoped lang="scss">

style>

1
2
3
4
5
6
7
8
9
10
11
12

然后创建路由配置文件

src/router/index.ts

import {createRouter, createWebHashHistory, RouteRecordRaw} from "vue-router"

const routers: RouteRecordRaw[] = [
    {
        path: '/first',
        alias: '/',
        name: '第一个页面',
        component: () => import('../view/First.vue')
    },
    {
        path: '/second',
        name: '第二个页面',
        component: () => import('../view/Second.vue')
    },
]

const router = createRouter({
    history: createWebHashHistory(),
    routes: routers
})

export default router;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

配置main.ts，为了方便展示，清空了style.css中的样式

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
const app = createApp(App)

import router from "./router";

app.use(router)

app.mount('#app')
1
2
3
4
5
6
7
8
9
10

最后修改App.vue

<script setup lang="ts">
import {useRouter} from "vue-router";
const $router = useRouter()
const handleFirstBtnClick = () => {
	$router.push('/first')
}
const handleSecondBtnClick = () => {
	$router.push('/second')
}
script>

<template>
  <div>
	  <button @click="handleFirstBtnClick">Firstbutton>
	  <button @click="handleSecondBtnClick">Secondbutton>
	  <router-view>router-view>
  div>
template>

<style scoped>
style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

运行项目

添加Pinia

安装pinia

npm install pinia
1

创建store文件src/stores/index.ts

import {defineStore} from "pinia";

export const useStore = defineStore('common', {
    state: () => ({
        count: 1,
    }),
    actions: {
        increment() {
            this.count++
        },
    }
})

1
2
3
4
5
6
7
8
9
10
11
12
13

修改main.ts，加入下面代码

import {createPinia} from "pinia";
app.use(createPinia())
1
2

修改First.vue

<template>
	<div>First
		<button @click="handleClick">count加1button>
	div>
template>

<script lang="ts" setup>
import {useStore} from "../stores";

const store = useStore()
const handleClick = () => {
	store.increment()
}

script>
<style scoped lang="scss">

style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

修改Second.vue

<template>
	<div>Second
		<div>count: {{count}}div>
	div>
template>

<script lang="ts" setup>
import {useStore} from "../stores";
import {storeToRefs} from "pinia";

const store = useStore()
const {count} = storeToRefs(store)
script>
<style scoped lang="scss">

style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

这样就可以在first页面点击按钮修改count的值，在second页面进行显示count的值
这样一个完整的vue3脚手架就搭建好了

源码下载链接 0积分下载