vue3+vite+ts+pinia+element-puls+Ant Design Vue 手把手教你创建一个vue3项目

---

1. 创建vue3项目

pnpm create vite@latest
or
yarn create vite
or
npm create vite

1.1 输入项目的名字

Project name: » vite-project

1.2 按上下选择框架，这就选vue然后回车

√ Project name: ... test
? Select a framework: » - Use arrow-keys. Return to submit.
    Vanilla
>   Vue
    React
    Preact
    Lit
    Svelte

1.3 选择ts

? Select a variant: » - Use arrow-keys. Return to submit.
    JavaScript
>   TypeScript
    Customize with create-vue
    Nuxt

然后控制台出现后面这三条命令

Done. Now run:
  cd test
  npm install
  npm run dev

2. 安装less/scss

2.1 安装less依赖

pnpm i -D less 
or 
yarn add -D less 
or 
npm install --save less

2.2 安装sass 依赖

pnpm i -D sass
or 
yarn add -D sass 
or 
npm install --save sass

3. 自动导入组件库配置

3.1 安装插件

unplugin-vue-components unplugin-auto-import

pnpm install -D unplugin-vue-components unplugin-auto-import

3.2 使用插件

打开 vite.config.ts 文件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from "path";
// 自动导入vue中hook reactive ref等
import AutoImport from "unplugin-auto-import/vite"
//自动导入ui-组件 比如说ant-design-vue  element-plus等
import Components from 'unplugin-vue-components/vite';
 
// https://vitejs.dev/config/
export default defineConfig({
	plugins: [
		vue(),
		AutoImport({
			//安装两行后你会发现在组件中不用再导入ref，reactive等
			imports: ['vue', 'vue-router'],
            //存放的位置
			dts: "src/auto-import.d.ts",
		}),
		Components({
			// 引入组件的,包括自定义组件
            // 存放的位置
            dts: "src/components.d.ts",
		}),
	],
 
})

4. 配置 router

4.1 安装router

pnpm install vue-router@4 
or 
yarn add vue-router@4
or 
npm install vue-router@4

4.2 main.ts文件引入

import { createApp } from 'vue'
import App from './App.vue'
 
 //routes
 import router from "./router/index"; 
 
const app= createApp(App)
 
 //routes 
 app.use(router)  
app.mount('#app')

4.3 在src下创建一个 router 文件夹，再创建一个 index.ts 文件

import { createRouter, createWebHistory } from "vue-router";
 
 
let routes= [
    {
        path: '/',
        name: 'home',
        //使用import可以路由懒加载，如果不使用，太多组件一起加载会造成白屏
        component: () => import('../view/homeView.vue')
    },
    //{
        //配置404页面
        //path: '/:catchAll(.*)',
        //name: '404',
        //component: () => import(''),
    //}
]
// 路由
const router = createRouter({
    history: createWebHistory(),
    routes
})
// 导出
export default router 

5. 配置pinia

以下是在 TypeScript项目中使用 Pinia的步骤：

5.1 首先安装依赖：

npm install pinia

5.2在项目的 main.ts 文件中导入 Pinia，并在 Vue 实例中注册 Pinia。

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
const pinia = createPinia()

app.use(pinia)
app.mount('#app')

5.3 创建一个 store 模块。在 Pinia 中，一个 store 模块就是一个包含了状态和操作的对象。

import { defineStore } from 'pinia'

export const useCounterStore = defineStore({
  // 定义 store 模块的名字
  id: 'counter',
  // 定义状态
  state: () => ({
    count: 0,
  }),
  // 定义操作
  actions: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    },
  },
})

5.4 在组件中使用 store 模块。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useCounterStore } from '@/store/counter'

export default defineComponent({
  name: 'Counter',
  setup() {
    const counterStore = useCounterStore()

    return {
      count: counterStore.count,
      increment: counterStore.increment,
      decrement: counterStore.decrement,
    }
  },
})
</script>

这里的 useCounterStore 函数将会返回 store 模块的实例，然后我们就可以使用其中的状态和操作了。注意，这里的状态和操作是响应式的，所以在模块中的任何更改都将会立即反映到组件的模板中。