Vue CLI 3 多頁應用項目的搭建

在項目初期時，從零開始搭建和配置本地前端開發環境是一項很繁瑣的工做，須要考慮到項目目錄結構、項目基本配置、Webpack 配置等等。經過 Vue CLI 3 能夠快速的生成一個項目，這樣咱們就能夠專一在寫應用上，而沒必要將大量時間花費在配置上。可是官方的 vue create 命令只能快速地創建一個單頁應用的原型，想要開發多頁應用還須要再配置一些東西。可同時支持less,sass。

說明

Vue CLI 3 多頁應用項目**Git地址: https://github.com/zydemail/v...。

初始化

git clone https://github.com/zydemail/vue-mpa.git
cd vue-mpa
npm install

使用

• 開發：

本地運行：npm run serve:dev 注：本地開發調試服務器接口需開啓瀏覽器跨域，可在 Chrome 應用商店安裝 Allow CORS: Access-Control-Allow-Origin 插件便可解決
修復代碼格式錯誤：npm run lintfix

• 打包：

開發環境: npm run dev
測試環境: npm run build:tests
生產環境: npm run build:prod

目錄結構說明

│  .browserslistrc // 配置目標瀏覽器
│  .env.development // 開發環境配置，可在此配置全局變量，使用 process.env 讀取，打包工具會根據不一樣環境自動讀取變量
│  .env.localdev // 本地開發環境配置，可在此配置全局變量，使用 process.env 讀取，打包工具會根據不一樣環境自動讀取變量
│  .env.production // 生產環境配置，可在此配置全局變量，使用 process.env 讀取，打包工具會根據不一樣環境自動讀取變量
│  .env.tests // 測試環境配置，可在此配置全局變量，使用 process.env 讀取，打包工具會根據不一樣環境自動讀取變量
│  .eslintrc.js // eslint 配置
│  .gitignore
│  .postcssrc.js // postcss配置，通常不會用到，使用默認值
│  babel.config.js // babel配置，通常不會用到，使用默認值
│  package-lock.json
│  package.json
│  README.md
│  title.js // 統一配置生成頁面的 title
│  vue.config.js // vue 配置，可配置 webpack 等，可參照 https://cli.vuejs.org/zh/config/
│  
├─public // 此文件夾下能夠放置一些靜態資源，除了index.html會通過處理外，其餘文件都會原封不動的自動複製到 htdocs 根目錄下，不會通過 webpack 的處理。
│      favicon.ico
│      index.html // 全部的打包頁面都會通過這個文件，本模板對多頁的配置採用了統一處理，固然也能夠在 vue.config.js 單獨配置每一個頁面，可參照 https://cli.vuejs.org/zh/config/#pages
│      
├─src // 源代碼文件夾
│  ├─assets // 資源文件夾，可放置 css、images等
│  │      logo.png
│  │      
│  ├─components // 組件文件夾，可定義一些公共組件
│  │      Header.vue
│  │      
│  ├─pages // 頁面文件夾，每一個頁面都是一個文件夾
│  │  ├─about // about 頁面
│  │  │      app.js // 通常不作更改
│  │  │      app.vue // 頁面的 html、css、js 都寫在這個文件裏
│  │  │      
│  │  ├─index
│  │  │      app.js
│  │  │      app.vue
│  │  │      
│  │  └─user
│  │      └─index
│  │              app.js
│  │              app.vue
│  │              
│  ├─style // 公共樣式文件夾，能夠定義一些公共樣式，如瀏覽器重置樣式 reset.less，此文件夾可按需求隨意更改 
│  │  │  index.less
│  │  │  
│  │  └─core
│  │          index.less
│  │          reset.less
│  │          
│  └─utils // 經常使用 js 工具類
│      └─core
│              http.js // http 請求庫，封裝 axios，可直接調用
│              
└─tests // 單元測試，可忽略
    └─unit
            .eslintrc.js