Vue3.0入门 + Vant3.0移动端实践（一）环境搭建及首页底部导航栏设计_vue3 开发移动端

Vue3.0出来了，感觉Vue3.0比2.0好用多啦，且据说性能也有不少的提升，那么今后拥抱Vue3.0吧，会是个趋势。

以下记录下Vue3.0的入门和一个移动端的项目工程模板实战。

直接给自己假想个项目实战，是最好的学习锻炼。

先发下原型图，最终达到的效果是这样的：

头部的title,轮播图，快捷入口，功能列表，底部的导航栏及个人中心，最终整成一套的工程模板，方便后续的使用。

               

一、环境准备

nodejs建议安装12.13版本或以上，否则安装最新的vue-cli会报错。

若没有安装yarn,建议安装个，比npm好用且稳定，Yarn是facebook发布的一款取代npm的包管理工具。

npm install -g yarn

Yarn 淘宝源安装，分别复制粘贴以下代码行到黑窗口运行即可
yarn config set registry https://registry.npm.taobao.org -g
yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

安装新版vue-cli

1. yarn global add @vue/cli@next
2. # OR
3. npm install -g @vue/cli@next

创建项目：

vue create pro_name,选择vue3的项目

VUE3.0引入vant3.0组件库

yarn add vant@next -S

再添加按需引入的插件（推荐使用按需引入，减少代码提及）：

yarn add babel-plugin-import -D

在项目根目录添加 babel.config.js 如下所示：

module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

添加路由 Vue-Router 4.0

yarn add vue-router@next

在 src 目录下新建 router 文件夹，添加 index.js 文件 

index.js 代码如下：

// src/router/index.js
import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'
 
// createRouter 创建路由实例
const router = createRouter({
  history: createWebHashHistory(), // hash模式：createWebHashHistory，history模式：createWebHistory
  routes: [
    {
      path: '/',
      component: Home
    }
  ]
})
 
// 抛出路由实例, 在 main.js 中引用
export default router

接下来来个测试吧，看看vant引入成功是什么样：

我们再新建一个 src/views/Test.vue 让 / 路径能渲染出内容。

<template>
  <div>我是按钮</div>
  <van-button type="primary" size="large">大号按钮</van-button>
</template>
 
<script>
export default {
}
</script>

在 App.vue 文件下添加 router-view 组件，渲染路由匹配到的页面组件。

<template>
	<!-- App.vue内容 -->
   <router-view />
</template>
 
<script>
 
export default {
  name: 'App'
}
</script>
 

main.js文件改动下，引入组件，

import { createApp } from 'vue'
import App from './App.vue'
import { Button } from 'vant';
import router from './router'
import 'vant/lib/index.css'; // 全局引入样式
 
const app = createApp(App) // 创建实例
 
app.use(Button) // 注册组件
app.use(router)
 
app.mount('#app')

 

执行 yarn serve,打开浏览器看到如下效果，说明vant已正常使用啦。

Vue-Router 3.x 和 Vue-Router 4.0 不一样的地方,配置上:

// Vue-Router 3.x
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes:  [
  	// 路由配置不变
  ]
})
 
// Vue-Router 4.0
const router = createRouter({
  history: createWebHashHistory(), // hash模式：createWebHashHistory，history模式：createWebHistory
  routes: [
    {
      path: '/',
      component: Home
    }
  ]
})

使用上：

// Vue-Router 3.x
export default {
  methods: {
    goToHome() {
      this.$router.push('Home')
    }
  }
}
 
// Vue-Router 4.0
import { useRouter } from 'vue-router'
export default {
  setup() {
    const router = useRouter()
    const goToHome = () => router.push('Home')
    return { goToHome }
  }
}

接下来，根据上面的原型图，开始首页的涉及，内容有轮播图，底部的导航栏等。

vue-cli 构建的项目默认是不支持 less 的，需要自己添加：

yarn add less less-loader --dev

less这玩意儿做什么用的，因为在vue中很少用到直接编辑的css,而是使用less更多些。Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。 Less 对 CSS 语言增加了少许方便的扩展。LESS是一个CSS预处理器脚本语言,可扩展CSS并将其编译为常规CSS语法，以便可以通过Web浏览器读取。 它提供诸如变量，函数， mixins 和操作等功能，可以构建动态CSS,简单说就是比css更强大和好用吧,为了最终把less打包编译为css,所以需要这两个less less-loader 安装。

less特征及优缺点：

特征
更清晰和更可读的代码可以以有组织的方式编写。
我们可以定义样式，它可以在整个代码中重复使用。
LESS是基于JavaScript的，是超集的CSS。
LESS是一个敏捷工具，可以排除代码冗余的问题。
优点
LESS轻松地生成可在浏览器中工作的CSS。
LESS使您能够使用嵌套编写更干净，组织良好的代码。
通过使用变量可以更快地实现维护。
LESS使您能够通过在规则集中引用它们来轻松地重用整个类。
LESS提供使用操作，使得编码更快并节省时间。
缺点
学习如果你是新的CSS预处理需要时间。
由于模块之间的紧密耦合，应当采取更多的努力来重用和/或测试依赖模块。
与旧的预处理器(例如Sass)相比，LESS具有较少的框架，Sass由框架 Compass ， Gravity和 Susy 组成。

为了解决移动端适配问题，有两个库也必须装一下，一个是阿里的lib-flexible,一个是postcss-pxtorem(可自动完成px向rem的转换。postcss-pxtorem是PostCSS的插件，用于将像素单元生成rem单位。前端开发还原设计稿的重要性毋庸置疑，目前应用的单位最多还是rem,然而每次在制作过程中需要自己计算rem值，为了能够直接按照设计图的尺寸开发，并且能自动编译转换成rem.),关于淘宝的lib-flexible弹性布局方案和px向rem的postcss-pxtorem插件，网上相关的资料很多，这里仅做个简单介绍。

yarn add lib-flexible

yarn add postcss-pxtorem -D

接下来，开始设计第一个页面，底部的导航栏：

<template>
  <div class="nav-bar van-hairline--top">
    <ul class="nav-list">
      <router-link tag="li" class="nav-list-item active" to="home">
       <van-icon name="home-o" />
        <span>首页</span>
      </router-link>
      <router-link tag="li" class="nav-list-item" to="terminal">
       <van-icon name="tv-o" />
        <span>设备</span>
      </router-link>
      <router-link tag="li" class="nav-list-item" to="alarm">
        <van-icon name="comment-o" />
        <span>报警</span>
      </router-link>
      <router-link tag="li" class="nav-list-item" to="user">
       <van-icon name="user-o" />
        <span>我的</span>
      </router-link>
    </ul>
  </div>
</template>
 
<script>
import { onMounted } from 'vue'
export default {
  setup() {
    onMounted(() => {
 
    })
  }
}
</script>
 
<style lang="less" scoped >
	.fj(@type: space-between){
	  display: flex;
	  justify-content: @type;
	}
    .nav-bar{
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      padding: 5px 0;
      z-index: 1000;
      background: #fff;
      .nav-list {
        width: 100%;
		.fj();
        flex-direction: row;
        padding: 0;
        .nav-list-item {
          display: flex;
          flex: 1;
          flex-direction: column;
          text-align: center;
          color: #666;
          &.router-link-active {
            color: #3663FE;
          }
          i {
            text-align: center;
            font-size: 22px;
          }
          span{
            font-size: 12px;
          }
        }
      }
    }
</style>

其他的没啥，着重说下布局，我觉得页面设计最麻烦的可能在这里了，来回的调整css，而且若非专业前端出身，css玩的溜的不多吧。

style lang="less" scoped ,说明使用less语法，限定为scoped本文件有效。

display: flex;使用flex布局。 z-index: 1000;设置为个很大的值防止被重叠覆盖。

nav-list类里的flex-direction为row,即横向排列

nav-list-item里 flex-direction: column,　竖向排列。

 &.router-link-active设置点击激活某项item后，不同颜色的展示，标识当前处于哪个选项。

bottom 属性规定元素的底部边缘。该属性定义了定位元素下外边距边界与其包含块下边界之间的偏移。上述bottom:0,就是底部位置。

position 属性规定元素的定位类型,fixed   生成绝对定位的元素，相对于浏览器窗口进行定位

总之，这部分的调整是个细活，css用法，熟能生巧吧。调整的多了，用的多了才能逐渐的熟悉。

Vant，有赞出品的移动端UI库，教程：https://www.w3cschool.cn/vantlesson/vantlesson-htl635uq.html

需要多熟悉下less的语法和css的flex布局。推荐阮一峰的博客flex布局教程：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

至此，我们已经设计好了几个底部导航栏组件，叫做NavBar.vue吧，放到src/components目录下。

可能觉得第一次设计components组件有些麻烦，但是比起原来的网页调整还是清晰多了吧，况且，这些components以后都是可复用的组件，积累多了后续效率就高了。

然后在我们的views/Home.vue里引入展示下，看看效果：

<template>
	<div>
		 <nav-bar />
	</div>
</template>
 
<script>
import navBar from '@/components/NavBar'
export default {
	name: 'home',
	components: {
	  navBar
	}
}
</script>