1、首先
npm init vite@latest 或者yarn create vite 再或者 pnpm create vite
安装时选择vue+ts
2、路由的创建与使用 vue3需要4.0版本的路由
1)安装 npm i vue-router
2)创建路由脚本：src目录下>创建router目录>index.ts
编写：/src/router/index.ts
import { createRouter, RouteRecordRaw, createWebHashHistory } from "vue-router"; import Home from "../view/login/index.vue"; const routes = [ { path: "/home", component: Home, name: "home", }, // { // path: "/product", // component: () => import("../views/Product.vue"), // name: "product", // }, ]; const router = createRouter({ history: createWebHashHistory(), //哈希值模式 routes, }); export default router;
3)在main.ts里配置
import { createApp } from 'vue' import App from './App.vue' import router from './router/index' createApp(App).use(router).mount('#app') //use必须要在mount之前
3、安装配置scss/less
npm install sass/less --save npm install sass/lless-loader --save-dev 复制代码
在vite.config.ts设置
css: { // css预处理器 preprocessorOptions: { scss: { charset: false, //需要在assets下创建对应的文件global.scss additionalData: '@import "./src/assets/css/global.scss";', }, }, }
global.scss文件
$main:#ccc; $c:pink <template> <div class="home"> <h1 class="h1">全局使用scss</h1> </div> </template> <style lang="scss" scoped> .home{ height: 40px; //使用全局变量 background: $main; .h1{ color:$c } } </style>
4、设置主题颜色
1）、在css文件下新建color.css
2)、设置变量
:root { --bg-color: #10141d; //默认背景颜色 } $bg-color: var(--bg-color); //默认背景颜色
3）、vite.config.js配置
import vue from '@vitejs/plugin-vue' import { resolve } from 'path' const pathResolve = (dir) => { return resolve(__dirname, ".", dir) } const alias = { '@': pathResolve("src") } export default ({ command }) => { const prodMock = true; return { base: './', resolve: { alias }, server: { port: 3004, host: '0.0.0.0', open: true, }, // 重点⬇️！！！！ css: { preprocessorOptions: { scss: { additionalData: '@use "@/assets/css/color.scss" as *;' } } } }; }
5）、css中使用（注意要有lang="scss"）
<style lang="scss"> #app { width: 100%; height: 100vh; background: $bg-color; } </style>
5、引入状态管理pinia/vuex
1)引入使用pinia
pnpm i pinia --save
2)配置编写
//store/index.ts import type { App } from 'vue'; import { createPinia } from 'pinia'; const store = createPinia(); export function setupStore(app: App<Element>) { app.use(store); } export default store
3)在 main.ts 中引入并使用
import { createApp } from 'vue' import App from './App.vue' import store from './store' // 创建vue实例 const app = createApp(App) // 挂载pinia app.use(store) // 挂载实例 app.mount('#app');
4)定义State： 在 src/store 下面创建一个 user.ts
import { defineStore } from 'pinia' export const useUserStore = defineStore({ id: 'user', // id必填，且需要唯一 state: () => { return { name: '张三' } }, actions: { updateName(name) { this.name = name } } })
5)store/modules/todo/index.ts
export const todoStore = defineStore({ id: 'todo', state: (): ITodoStore => { return { list: [] } }, getters: { getList(): ITodoItem[] { return this.list } }, actions: { addTodoItem(item: ITodoItem) { this.list.unshift(item) }, completeTodoItem(item: ITodoItem, isComplete: boolean) { const index = this.list.indexOf(item) this.list[index].complete = isComplete }, deleteTodoItem(item: ITodoItem) { const index = this.list.indexOf(item) this.list.splice(index, 1) } } }) export function todoStoreWidthOut() { return todoStore(store); }
6)使用方式
第一种
<script lang="ts" setup> import { ITodoItem } from "@/model/todo" import { todoStoreWidthOut } from "@/store/modules/todo" const todoStore = todoStoreWidthOut() const list = todoStore.getList const onDelete = (item: ITodoItem) => { todoStore.deleteTodoItem(item) } </script>
第二种
<template> <div>{{ userStore.name }}</div> </template> <script lang="ts" setup> import { useUserStore } from '@/store/user' const userStore = useUserStore() </script>
修改state
// 1. 直接修改 state （不建议） userStore.name = '李四' // 2. 通过 actions 去修改 <script lang="ts" setup> import { useUserStore } from '@/store/user' const userStore = useUserStore() userStore.updateName('李四') </script>
7）使用vuex
1、npm i vuex@next --save
2、创建目录/src/store/index.ts
import { createStore } from 'vuex' // 创建一个新的 store 实例 const store = createStore({ state () { return { count: 0 } }, mutations: { increment (state,payload) { state.count += payload } }, getters:{ totalPrice(state) { return state.count*99.9 } }, actions:{ asyncAdd(store,payload){ setTimeout(()=>{ store.commit('increment',payload) },1000) } } }) export default store
3、在main.ts里输入
import { createApp } from 'vue' import App from './App.vue' import router from './router/index' import store from './store/index' createApp(App).use(router).use(store).mount('#app') //use必须要在mount之前
4、在页面上使用
<template> <div> <h1>购物车</h1> <h2>商品数量{{store.state.count}}</h2> <h2>商品总价{{store.getters.totalPrice}}</h2> <button @click="addProd">添加商品数量+2</button> <button @click="asyncAddProd">异步添加商品数量+10</button> </div> </template> <script setup> import { useStore } from 'vuex'; let store = useStore() function addProd(){ store.commit('increment',2) } function asyncAddProd(){ store.dispatch('asyncAdd',10) } </script>
