Vue + Vue-CLI + Mint-UI 移動端開發新手示例實戰 - by dogstar

Vue + Vue-CLI + Mint-UI 移動端開發新手示例實戰 - by dogstar

項目源代碼，在碼雲上：https://gitee.com/dogstar/a-vue-mint-demo

快速使用

# 安裝依賴
npm install

# 本地開發調試 localhost:8080
npm run dev

# 打包到生產環境
npm run build

重要參考資料

Mint UI

餓了麼出品的Mint UI - 基於 Vue.js 的移動端組件庫（移動端專用）。
官網文檔：http://mint-ui.github.io/docs/#/zh-cn2

iView

最近很火的一套基於 Vue.js 的高質量UI 組件庫（PC端專用）。
官網文檔：https://www.iviewui.com/

新手開始講故事

這裏主要使用了：

• npm：主流的包依賴管理工具
• vue-cli：開發輔助工具，集成webpack等打包和本地開發工具
• mint-ui：專門用來作移動端開發的UI

一、安裝npm

打開nodejs的官網：https://nodejs.org/en/，而後，選擇合適的版本下載。
例如這裏下載的是windows 64位版：https://nodejs.org/dist/latest/node-v11.2.0-x64.msi

而後，一路點擊，便可安裝完畢。

成功安裝後，就有node和npm這兩個東西可使用了，查看下版本號：

$ node -v
v11.2.0

$ npm -v
6.4.1

二、安裝vue-cli

Vue CLI 3的官網是：https://cli.vuejs.org/ ，其slogan爲：Standard Tooling for Vue.js Development 。

安裝vue-cli很簡單，參考：Installation。

$ npm install -g vue-cli

安裝後，查看版本號：

$ vue -V
3.1.3

三、建立一個項目

在你想建立項目的目錄位置，運行：

$ vue init webpack demo

? Project name (demo)

就會捍到一連串的提示輸入，主要是項目名稱、做者名字、項目描述等。

填寫完畢後，就能夠嘗試運行一下demo了：

$ npm run dev

接着能夠看到熟悉的頁面。

四、使用Mint-UI

如今，開始引入Mint-UI，Mint-UI官網爲：https://mint-ui.github.io/#!/zh-cn 。它的安裝也很簡單，在剛纔的新項目根目錄下，運行：

$ npm install --save mint-ui

而後，把./src/main.js裏面的內容，追加Mint-UI的相關代碼，即改成：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import MintUI from 'mint-ui' // 加這一行
import 'mint-ui/lib/style.css' // 和加這一行

Vue.use(MintUI)   // 還有加這一行

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

若在保持本地運行的話，追加上面代碼後會自動更新構建，一切正常！

WAIT  Compiling...17:30:50

 95% emitting DONE  Compiled successfully in 153ms17:30:50

 I  Your application is running here: http://localhost:8080

五、添加一個本身的新頁面

那怎麼添加一個本身的新頁面呢？

先在./src/router/index.js文件中，把相關的配置改：

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/hi',
      name: 'Hi',
      component: () => import('@/view/hi/hi.vue')
    }
  ]
})

這裏追加了/hi的頁面路由配置，關於router，官方文檔是：https://router.vuejs.org/ 。

別忘了，與此同時，或者在這以前，建立對應的Vue頁面，例如這裏新建文件 ./src/view/hi/hi.vue，並在裏面按照模板、到JS、到樣式的順序，放置你本身的代碼，例如：

<template>
  <div id="hi">
    <mt-header title="標題過長會隱藏後面的內容啊哈哈哈哈">
      <router-link to="/" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
      <mt-button icon="more" slot="right"></mt-button>
    </mt-header>
  </div>
</template>

<script>
/* eslint-disable */

import { Header } from 'mint-ui'

export default {
  name: 'Hi',
  components: {
    'mt-header': Header
  },
  data () {
    return {
    }
  }
}
</script>

<style scoped>
</style>

完成後，就能夠經過如下連接訪問到頁面了。

http://localhost:8080/#/hi

效果以下：

六、如何修改默認佈局？

能夠看到，上面默認的首頁，以及新頁面，都會有一個很大的Vue的Logo圖片，以及會有頂部的距離。怎麼去掉呢？

很簡單，修改文件 ./src/App.vue，內容改成：

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

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

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 0px;
}
</style>

七、取消嚴格的語法檢測

在默認狀況下，會進行嚴格的語法檢測，常常會出現相似如下這樣的信息（例如縮進很差）：

http://eslint.org/docs/rules/no-mixed-spaces-and-tabs  Mixed spaces and tabs
  src\view\hi\hi.vue:6:2
          </router-link>
         ^

這時，若是想去掉，能夠修改 ./build/webpack.base.conf.js文件，去掉裏面的useEslint規則，以下面註釋掉的這一行。

module: {
    rules: [
      //...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },

而後從新本地運行便可。

八、修改打包後的路徑

在開發完成後，就能夠打包，準備發佈到生產環境進行正式訪問了。但會有一個小問題，若是生產環境的位置不是在網站根目錄的話，就會致使資源加載不到。這時，能夠修改 ./config/index.js文件中的assetsPublicPath配置，改成相應的相對路徑。例如是dist，就改成：assetsPublicPath: '/dist/'，以下：

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/dist/',

再次打包發佈後，就能找到相關的靜態文件了。

九、TODO：Network訪問？