vue-cli3单页构建大型项目方案

一、如何使用vue-cli3创建单页应用项目？

Vue CLI是vue官方推出的一个全新的脚手架工具，它可以帮助我们快速地构建一个基于Vue.js的单页应用程序。

首先需要在电脑上安装 Node.js 与 npm，然后在命令行工具中执行以下命令进行安装：

npm install -g @vue/cli

安装完成之后，在命令行中执行以下命令来创建一个新的Vue项目：

vue create my-project

其中 my-project 是自定义的项目名称，执行完命令后会出现一个命令行问询，要求用户选择一些配置选项，可以选择使用预设选项或者手动配置每一个选项。其中，包括了一些基本选项和插件，例如：

• Babel - 用于将 ES6+ 编译为浏览器中运行的代码。
• Vuex - 用于状态管理。
• Router - 用于构建 SPA。
• CSS Console - 用于提供 CSS 格式化等功能。
• Unit Testing - 用于单元测试等功能。

完成选择后，会自动下载依赖并生成初始的Vue.js项目结构。

二、如何使用vue-cli3构建大型项目？

1.利用vue-cli3搭建的脚手架工具结合webpack进行开发

在搭建大型项目时，可以选择使用 vue-cli3搭建的脚手架工具结合Webpack进行开发。可以在配置webpack相关内容时，自由发挥，以满足大型项目的需求。

通过 Vue CLI 3 创建的项目默认已经使用了webpack，但其配置默认是隐藏的，可以使用以下命令将其暴露出来：

vue inspect > output.js

执行此命令后，会在项目根目录生成一个 output.js 的文件，其中包含了当前项目的配置信息，如：

const config = {
    mode: 'development',
    entry: {
        app: [
            './src/main.js'
        ]
    },
    ...
};

此时，即可以根据实际需求，进行项目的Webpack配置。

2.利用vue-cli3搭建的多页应用项目

对于一些不太复杂的大型项目，使用 vue-cli3 搭建多页应用也是一种可行的方案。

首先需要安装一个多入口插件：

npm install --save-dev vue-cli-plugin-multi-spaw

安装完插件之后，在命令行中执行以下命令来创建一个多页项目：

vue create my-project
cd my-project
vue invoke multi-spa

其中 my-project 是项目名称，执行完命令后会出现一个问询，要求用户选择一些配置选项，同样可选择使用预设选项或者手动配置每一个选项。

运行完命令之后，即可在src/pages目录下创建相应的页面，然后在vue.config.js文件中进行相关配置。在多页应用开发时，需要注意区分每个页面的入口文件和模板文件，避免代码和样式的混淆问题。

例如下面的示例代码：

//vue.config.js文件
module.exports = {
    pages: {
        index:{
            entry: 'src/pages/index/main.js',
            template: 'src/pages/index/index.html',
            filename: 'index.html',
            title: 'Index Page'
        },
        about:{
            entry: 'src/pages/about/main.js',
            template: 'src/pages/about/about.html',
            filename: 'about.html',
            title: 'About Page'
        }
    }
}

以上就是针对“vue-cli3单页构建大型项目方案”的完整攻略。