使用vue3搭建后台系统的详细步骤_vue.js_

// 使用npm创建一个基于vite构建的vue项目 npm create vite@latest // 使用yarn创建一个基于vite构建的vue项目 yarn create vite@latest

vue        vue-ts

 // 此处配置项目服务参数 server: { host: "0.0.0.0", // 项目运行地址，此处代表localhost port: 8888, // 项目运行端口 open: true, //编译之后是否自动打开页面 hmr: true, // 是否开启热加载 },

 // 配置src的别名@ resolve: { alias: { "@": resolve(__dirname, "./src"), }, },

 "baseUrl": "./", // 配置路径解析的起点 "paths": { // 配置src别名 "@/*": ["src/*"] // 当我们输入@/时会被映射成src/ } 

npm install vue-router@latest yarn add vue-router@latest

import { createRouter, createWebHistory, RouteRecordRaw} from 'vue-router'; import Layout from '@/components/HelloWorld.vue' // 定义路由，此处为Array数组，数据类型为RouteRecordRaw const routes: Array = [ { path: '/home', name: 'home', component: Layout } ] // 创建路由 const router = createRouter({ history: createWebHistory(), routes // 将定义的路由传入 }) // 将创建的router路由暴露，使其在其他地方可以被引用 export default router

import { createApp } from 'vue' import './style.css' import App from './App.vue' // 此处引入定义的路由 import router from '@/router/index' // createApp(App).mount('#app') // 此处将链式创建拆解，从中注册路由 const app = createApp(App); // 注册路由 app.use(router) app.mount('#app')

# 选择一个你喜欢的包管理器 // 安装element-plus npm install element-plus --save yarn add element-plus pnpm install element-plus // 安装element-plus的图标库组件 npm install @element-plus/icons-vue yarn add @element-plus/icons-vue pnpm install @element-plus/icons-vue

import { createApp } from "vue"; import "./style.css"; import App from "./App.vue"; // 次数引入定义的路由 import router from "@/router/index"; // 引入element-plus import ElementPlus from "element-plus"; import "element-plus/dist/index.css"; // 引入element-plus的图标库 import * as ElementPlusIconsVue from "@element-plus/icons-vue"; // createApp(App).mount('#app') // 此处将链式创建拆解，从中注册路由 const app = createApp(App); // 注册路由、element-plus等 app.use(router).use(ElementPlus); // 将所有配置挂载到index.html的id为app的容器上 app.mount("#app"); // 此处参考官网，意为将图标库中的每个图标都注册成组件 for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component); }

yarn add pinia # 或者使用 npm npm install pinia

// 从pinia中引入创建实例的函数 import { createPinia } from 'pinia' // 使用createPinia函数创建一个pinia实例并注册 app.use(createPinia())

// 从pinia中引入defineStore函数来定义store import { defineStore } from "pinia"; // 定义一个store并取名为useStore // defineStore第一个参数是应用程序中store的唯一标识，也就是在定义其他store时该标识不能相同 // 此处可以类比为java中的实体类，useStore就是类名，state里的属性是成员属性，getters里的函数是getter方法，actions里的函数是setter方法 export const useStore = defineStore("useStore", { // 定义state // 推荐使用 完整类型推断的箭头函数 state: () => { return { // 所有这些属性都将自动推断其类型 count: 0, name: "Eduardo", isAdmin: true, }; }, // 定义getters,里面定义一些对state值的取值操作 // 指向箭头函数定义的时候所处的对象，而不是其所使用的时候所处的对象，默认指向父级的this // 普通函数中的this指向它的调用者，如果没有调用者则默认指向window getters: { doubleCount: (state) => state.count * 2, doubleCountOne(state) { return state.count * 2; }, doublePlusOne(): number { return this.count * 2 + 1; }, }, // 定义actions,里面定义一些对state的赋值操作 actions: { setCounter(count:number){ this.count = count } } }); // 1、只有一个参数的时候，参数可以不加小括号，没有参数或2个及以上参数的，必须加上小括号 // 2、返回语句只有一条的时候可以不写{}和return，会自动加上return的，返回多条语句时必须加上{}和return // 3、箭头函数在返回对象的时候必须在对象外面加上小括号 // 在vue中定义函数时，我们尽量都指明函数返回值类型以及参数的数据类型