乐趣区

关于javascript:Vue3学习入门

Vue

npm init vite@latest <project-name> --template vue
cd <project-name>
npm install
npm 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')
        }
    }
})
退出移动版