Vue3.0入门 + Vant3.0移动端实践(一)
Vue3.0入门 + Vant3.0移动端实践(一)
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
yarn global add @vue/cli@next# ORnpm 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>