Vue3项目搭建

# 安装 vue

文档https://cn.vuejs.org/guide/introduction.html (opens new window)

npm i vue@latest

import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);

app.mount("#app");

1
2
3
4
5
6

# 安装 vue-router

文档https://router.vuejs.org/zh/introduction.html (opens new window)

npm i vue-router@4

import { createMemoryHistory, createRouter } from "vue-router";

import HomeView from "./HomeView.vue";
import AboutView from "./AboutView.vue";

const routes = [
  { path: "/", component: HomeView },
  { path: "/about", component: AboutView },
];

const router = createRouter({
  history: createMemoryHistory(),
  routes,
});
app.use(router);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 安装 pinia

文档https://pinia.vuejs.org/zh/introduction.html (opens new window)

npm i pinia

import { createPinia } from "pinia";

const pinia = createPinia();

app.use(pinia);

1
2
3
4
5

# 安装 pinia-plugin-persistedstate

pinia 持久化文档https://prazdevs.github.io/pinia-plugin-persistedstate/zh/guide/ (opens new window)

npm i pinia-plugin-persistedstate

import { createPinia } from "pinia";
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
app.use(pinia);

1
2
3
4
5
6

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

export const useStore = defineStore(
  "main",
  () => {
    const someState = ref("hello pinia");
    return { someState };
  },
  {
    persist: true, // 声明为true为持久化存储
  }
);
export const useStore = defineStore("store", {
  state: () => ({
    someState: "hello pinia",
  }),
  persist: {
    key: "my-custom-key",
  },
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 安装 Element-Plus

文档https://cn.element-plus.org/zh-CN/ (opens new window)

npm i element-plus --save

import ElementPlus from "element-plus";
import "element-plus/dist/index.css";

app.use(ElementPlus);

1
2
3
4

# 安装 tailwindcss

文档https://tailwindcss.com/docs/installation (opens new window)

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

1
2

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

1
2
3
4
5
6
7
8
9
10
11
12

@tailwind base;
@tailwind components;
@tailwind utilities;

1
2
3

#vue3

上次更新: 2024/12/25, 14:12:27

← pinia持久化插件pinia-plugin-persist的使用 steup下调用子组件方法→