手把手教你基于vue-cli搭建多页面应用项目

1. 全局安装vue-cli

npm install -g vue-cli

2.基于webpack项目模板创建项目

进入你的工作目录 在命令行输入
vue init webpack yourProjectName

2.1 项目模板初始化选项

按照个人喜好进行配置的选择就好，嫌麻烦可以一路回车，除了vue-router 其他全部No也行（最好不使用eslint 因为要配置一些东西 还可能存在报错bug）

3. vue-cli单页面运行效果

根据黄字提示进入指定目录 然后运行即可

运行效果图：

4. 基于Vue-cli的多页面应用配置

5.这个是创建完项目后的初始目录结构，接下来我们要进行目录结构的改造

5.1 在src目录下创建一个pages目录，按照个人习惯可以在pages目录下面再创建各种类别的文件夹（如index.html放在index文件夹下面），将根目录下的index.html放在pages下面的index文件夹下面，删除src目录下的App.vue文件（删除App.vue是可选项）。 如果不想移动也可以直接删除掉根目录下的index.html文件。

5.2 在index.html所在目录下面创建index.js和index.vue

5.3 在index.vue中写自己想要写的页面

5.4 在index.js里面添加如下内容

import Vue from 'vue'
import index from './index.vue'

// eslint-disable-next-line no-new
new