vue-cli3 创建多页面应用项目

1、创建vue项目

cmd命令执行  vue create ruc-continuing  创建vue项目，项目名称：ruc-continuing

选择一个 preset（预置项），或自定义：

选择自定义配置选项

路由是否使用History模式？n

选择使用css风格编译语法

选择一种TypeScript格式化规范类型

保存时检测 还是 提交时检测并修复？

选择一种单元测试方案

将以上配置存放至哪？单独放 或 放package.json

是否保存为preset（预设项，之后可以直接使用，如图一）：y

保存的 preset 命名为什么 （我没命名），命名完，之后系统可字段安装项目并生产preset（预置项）

项目配置安装中。。。

项目创建完成. 进入当前项目：cd ruc-continuing 运行项目： npm run serve

2、运行项目，修改运行命令

在编辑器中打开项目，并运行 npm run serve

修改启动命令，项目目录下的 package.json 文件

修改为：

之后，可在终端执行 npm run start   ||  npm start  运行项目。

3、多页面应用配置

在项目目录下创建 vue.config.js 文件

vue.config.js  中配置多页面应用：

创建多页模块，在 src 下创建目录 pages ，在 pages 下创建两个模块 page1 和 page2 ；在 public 下添加模版 page1.html 和 page2.html 。目录结构如下：

/src/pages/page1/App.vue

<template>
  <div id="page1"> App page1 </div>
</template>

<script> export default { name: 'page1' } </script>

/src/pages/page1/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('#page1')

 npm start 启用项目成后,  http://localhost:8080/page1.htm#/ 访问 page1 页面