Vue CLI 3 多页应用构建入门教程

Vue CLI3基础学习之pages构建多页应用 本篇文章主要介绍了关于Vue CLI3基础学习之pages构建多页应用的相关资料，通过示例代码介绍的非常详细，对大家学习或者使用Vue CLI3具有一定的参考学习价值。 多页应用是由多个单页构成的应用，每个单页可以看成是一个html文件，那么多个单页便是多个html文件，多页应用便是由多个html组成的应用。 在多页应用中，每个单页都可以拥有单页应用src目录下的文件及功能，包括入口文件、组件、路由、vuex等。多页应用的目录结构如下所示： * node_modules：项目依赖包目录 * build：项目webpack功能目录 * config：项目配置项文件夹 * src：前端资源目录 + images：图片目录 + components：公共组件目录 + pages：页面目录 - page1：page1目录 - components：page1组件目录 - router：page1路由目录 - views：page1页面目录 - page1.html：page1 html模板 - page1.vue：page1 vue配置文件 - page1.js：page1入口文件 - page2：page2目录 - index：index目录 + common：公共方法目录 + store：状态管理store目录 * .gitignore：git忽略文件 * .env：全局环境配置文件 * .env.dev：开发环境配置文件 * .postcssrc.js：postcss配置文件 * babel.config.js：babel配置文件 * package.json：包管理文件 * vue.config.js：CLI配置文件 * yarn.lock：yarn依赖信息文件 在多页应用中，每个单页都需要一个独立的入口文件、组件、路由、vuex等。多页应用的入口文件包含了page1.js、page2.js、index.js等。 多页应用的优势在于可以将不同的页面独立出来，每个页面都可以拥有自己的入口文件、组件、路由、vuex等，从而提高了应用的灵活性和可维护性。 在使用Vue CLI3构建多页应用时，需要注意以下几点： * 需要在vue.config.js文件中配置多页应用的入口文件 * 需要在每个页面目录下创建独立的入口文件、组件、路由、vuex等 * 需要在pages目录下创建每个页面的目录 多页应用可以提高应用的灵活性和可维护性，Vue CLI3提供了强大的支持来构建多页应用。