基於vue-cli4構建的web app

寫在前面

從 vue-cli3 開始，vue-cli 腳手架工具備了一個很大跨越，帶來了全新的開發體驗，和簡約的配置方案，甚至有了可視化的界面操做，這一波真是，天秀！

具體到細節，主要有如下幾點體驗升級： 一、建立一個項目

• vue create hello-world
• UI 界面操做 vue ui

二、建立項目時的配置選項，能夠保存爲 preset 文件。

• 被保存的 preset 將會存在用戶的 home 目錄下一個名爲 .vuerc 的 JSON 文件裏。若是你想要修改被保存的 preset 選項，能夠編輯這個文件。
• 在項目建立的過程當中，你也會被提示選擇 preset

三、插件 vue-cli 使用了一套基於插件的架構，這與老的 vue-cli 有着很大的區別。

老版本的vue-cli要想在項目結構，webpack 配置，第三方功能/插件引入上，有所改變的話，沒有別的辦法，只能本身動手； 新版本vue-cli就不同了，你能夠本身寫插件，DIY各類功能，也能搜索別人的插件來使用，真的是絲滑了不少。

四、webpack配置 引入了 webpack-chain，咱們可使用鏈式的 api 來修改 webpack 配置。

五、環境變量和模式 默認有一個 vue.config.js 配置文件， 抽離以前的 config 文件夾中配置文件，並引入了模式這個概念。

我決定作一個項目嘗試一波~

項目介紹

map-chart 是一個可視化的移動端web app，基於 Vue 和 Mint UI 構建。使用了最新的前端技術棧，內置了高德地圖（AMap）的使用方案以及 echarts 的使用和多種配置方案，支持動態路由，模擬數據，高級搜索，地圖，數據統計等不少功能特性。

同時，它也是一個很好的學習項目，包含了一些常見問題的解決方案，好比：前端數據模擬，數據可視化，PWA，移動端地圖，圖表，骨架屏等等。

在線預覽： 移動端快速訪問

在線體驗：git.io/JeMCZ

源碼： github.com/Neveryu/map…

源碼

github.com/Neveryu/map…

開發&使用

一、下載代碼後，你能夠選擇將項目引入到 Vue UI 的可視化界面來操做，在左側的菜單欄，能夠進行一系列的安裝依賴，啓動項目，項目配置等等操做。

二、下載代碼後，你可使用命令行工具，進到項目目錄，按照傳統的方式，來安裝依賴以及啓動項目。

"scripts": {
    "start": "npm run serve",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "nofix": "vue-cli-service lint --no-fix",
    "new": "plop"
}
複製代碼

plop

關於 npm run new 命令的說明介紹

當咱們在編輯器中新建一個 .vue 文件的時候，默認是空白的。咱們須要建立 <template>、</script>、<style> 這些標籤。

因此這裏，在這個項目中，基於 plop ，提供了兩個基礎模板，方便建立新的 view 或者 component，你只須要執行以下命令：

npm run new
複製代碼

而後，根據命令行的交互提示，就能夠輕鬆生成咱們想要的基礎代碼片斷。我這裏只是寫了一個很基礎的代碼片斷模板，你徹底能夠按照本身需求定製模板。

若是你以爲配置太複雜，我推薦你能夠安裝如 Vue 2 Snippets VS Code 插件。這種代碼片斷在平時工做中仍是能提高很多開發效率的。

部署

這個項目的部署是簡單的，首先，你可能須要對 vue.config.js 中的 publicPath 字段作點修改，來適應你想要的部署環境；而後，使用 npm run build 命令來構建生成前端文件，而後將文件部署到你的服務器上。

---

寫在最後

個人主頁： neveryu.github.io/index.html

QQ羣：685486827