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访问？