【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

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

以上就是 Vue 项目的基本目录结构和核心文件的示例代码。在实际项目中，我们可以根据具体的业务需求，对文件和目录进行合理的组织和调整。