[Vue] Detailed introduction to the directory structure of the Vue project and the sample code of each core file

Vue.js does not have strict file and directory structure requirements, but generally, our Vue project directory structure is as follows:

├── 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配置文件

Below is sample code for each core file:

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>

main.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");

router/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;

store/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: {},
});

The above is the basic directory structure and core file sample code of the Vue project. In actual projects, we can reasonably organize and adjust files and directories according to specific business needs.