Table of contents
1. Create a vue3 project
pnpm create vite@latest
or
yarn create vite
or
npm create vite
1.1 Enter the name of the project
Project name: » vite-project
1.2 Press up and down to select the frame, then select vue and press Enter
√ Project name: ... test
? Select a framework: » - Use arrow-keys. Return to submit.
Vanilla
> Vue
React
Preact
Lit
Svelte
1.3 select ts
? Select a variant: » - Use arrow-keys. Return to submit.
JavaScript
> TypeScript
Customize with create-vue
Nuxt
Then the following three commands appear on the console
Done. Now run:
cd test
npm install
npm run dev
2. Install less/scss
2.1 Install less dependencies
pnpm i -D less
or
yarn add -D less
or
npm install --save less
2.2 Install sass dependencies
pnpm i -D sass
or
yarn add -D sass
or
npm install --save sass
3. Automatically import component library configuration
3.1 Install the plugin
unplugin-vue-components unplugin-auto-import
pnpm install -D unplugin-vue-components unplugin-auto-import
3.2 Using plugins
Open the vite.config.ts file
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. Configure the router
4.1 install router
pnpm install vue-router@4
or
yarn add vue-router@4
or
npm install vue-router@4
4.2 main.ts file introduction
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 Create a router folder under src, and then create an index.ts file
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. Configure pinia
Here are the steps to use Pinia in a TypeScript project:
5.1 First install dependencies:
npm install pinia
5.2 Import Pinia in the main.ts file of the project, and register Pinia in the Vue instance.
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 Create a store module. In Pinia, a store module is an object that contains state and operations.
import {
defineStore } from 'pinia'
export const useCounterStore = defineStore({
// 定义 store 模块的名字
id: 'counter',
// 定义状态
state: () => ({
count: 0,
}),
// 定义操作
actions: {
increment() {
this.count++
},
decrement() {
this.count--
},
},
})
5.4 Use the store module in components.
<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>
The function here useCounterStorewill return an instance of the store module, and then we can use the state and operations in it. Note that the state and actions here are reactive, so any changes made in the module will be immediately reflected in the component's template.