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 頁面