Vue3框架项目初始化

创建项目

vite 创建项目
lua 复制代码
```
pnpm create vite
```
下载依赖
css 复制代码
```
pnpm i
```
启动项目
复制代码
```
pnpm dev
```

路由配置

下载插件
css 复制代码
```
pnpm install vue-router@4.4.5
```
创建路由页面

路由映射

javascript 复制代码

import { createRouter, createWebHashHistory } from 'vue-router';
import Home from './pages/home.vue';
import ArticleDetail from './pages/article-detail.vue';

const routes = [
  { path: '/', redirect: '/home' },
  { path: '/home', component: Home },
  { path: '/article-detail', component: ArticleDetail },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;

注册路由

javascript 复制代码

import { createApp } from 'vue';
import './style.css';
import App from './App.vue';
// 路由
import router from './router.js';

const app = createApp(App);

app.use(router).mount('#app');

状态管理Pinia配置

下载插件

复制代码

pnpm install pinia pinia-plugin-persistedstate

store/user.js

javascript 复制代码

import { ref } from 'vue';
import { defineStore } from 'pinia';

export const userStore = defineStore(
  'user',
  () => {
    const username = ref('');

    const changeUsername = (value) => {
      username.value = value;
    };

    return { username, changeUsername };
  },
  {
    persist: true, // 数据持久化
  },
);

配置注册

javascript 复制代码

import { createApp } from 'vue';
import './style.css';
import App from './App.vue';
// 路由
import router from './router.js';
// Pinia
import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';

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

// 配置数据持久化
pinia.use(piniaPluginPersistedstate);

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

测试使用

xml 复制代码

<script setup>
import { userStore } from "../store/user";

const user = userStore();

function test() {
  user.setUsername("Steven Wong");
}
</script>

<template>
  <div>{{ user.username }}</div>
</template>

Element Plus配置

下载插件

bash 复制代码

pnpm install element-plus @element-plus/icons-vue

javascript 复制代码

import { createApp } from 'vue';
import './style.css';
import App from './App.vue';
// 路由
import router from './router.js';
// Pinia
import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
// Element Plus
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import * as ElementPlusIconsVue from '@element-plus/icons-vue';

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

// 配置数据持久化
pinia.use(piniaPluginPersistedstate);

// 自动引入图标
Object.keys(ElementPlusIconsVue).forEach((key) => {
  app.component(key, ElementPlusIconsVue[key]);
});

app.use(router).use(pinia).use(ElementPlus).mount('#app');

测试使用button

bash 复制代码

<el-button type="primary">测试</el-button>