目录
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 模块的实例，然后我们就可以使用其中的状态和操作了。注意，这里的状态和操作是响应式的，所以在模块中的任何更改都将会立即反映到组件的模板中。