Vue3学习入门

Vue

npm init vite@latest <project-name> --template vuecd <project-name>npm installnpm run dev

使用main.js中引入

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

const app = createApp(App)
app.mount("#app")

Vuex

npm install vuex --save-dev

使用

src目录下新建文件夹store/index.js

import { createStore } from "vuex";

export default createStore({
  state: { },
  mutations: { },
});

main.js中引入

import store from "./store/index";
app.use(store)

home.vue使用时

import { useStore } from "vuex";

export default {
  setup() {
    const store = useStore();
    const increment = () => {
      store.commit("increment");
    };
    .....
  },
};

Vue-Router

安装npm install vue-router@4

使用src下新建router/index.js

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

export default createRouter({
  history: createWebHashHistory(),
  routes: [
  ],
});

main.js引入

import router from "./router";

app.use(router);

Vite项目给路径别名

import  {join} from 'path';
export default defineConfig({
    resolve: {
        alias: {
            '@': join(__dirname, 'src')
        }
    }
})