【Vue】Vueプロジェクトのディレクトリ構成と各コアファイルのサンプルコードを詳しく紹介

Vue.js には厳密なファイルおよびディレクトリ構造の要件はありませんが、一般に、Vue プロジェクトのディレクトリ構造は次のとおりです。

├── node_modules/        # 项目依赖的 node 模块
├── public/              # 公共资源目录
│   ├── favicon.ico      # 网页图标
│   └── index.html       # html模板（单页面应用）
├── src/                 # 源代码目录
│   ├── assets/          # 静态资源文件夹，如图片、字体等
│   ├── components/      # 公共组件
│   ├── router/          # 路由文件夹
│   ├── store/           # Vuex状态管理文件夹
│   ├── views/           # 视图层组件
│   ├── App.vue          # Vue 根组件，也是整个应用的入口
│   └── main.js          # Vue 实例化入口文件，也是整个应用的入口
├── .babelrc             # Babel 配置文件
├── .gitignore           # Git管理忽略文件
├── package.json         # 项目配置文件
├── README.md            # 项目说明文件
└── webpack.config.js    # Webpack配置文件

以下は各コア ファイルのサンプル コードです。

app.vue

<template>
  <div id="app">
    <h1>{
    
    { title }}</h1>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      title: "Vue App",
    };
  },
};
</script>

メイン.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

ルーター/index.js

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    // 懒加载组件
    component: () => import("../views/About.vue"),
  },
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;

ストア/index.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
  actions: {
    increment({ commit }) {
      commit("increment");
    },
  },
  getters: {
    getCount: (state) => state.count,
  },
  modules: {},
});

上記は、Vue プロジェクトの基本的なディレクトリ構造とコア ファイルのサンプル コードです。実際のプロジェクトでは、特定のビジネス ニーズに応じてファイルとディレクトリを合理的に整理および調整できます。