Vue3框架项目初始化

创建项目

• vite 创建项目

  pnpm create vite
  

• 下载依赖

  pnpm i
  

• 启动项目

  pnpm dev
  

路由配置

• 下载插件

  pnpm install vue-router@4.4.5
  

• 创建路由页面

• 路由映射

  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;
  

• 注册路由

  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

  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, // 数据持久化
    },
  );
  

• 配置注册

  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');
  

• 测试使用

  <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配置

• 下载插件

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

  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

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