Vue3.0 is out, I feel that Vue3.0 is much easier to use than 2.0, and it is said that the performance has also been improved a lot, so in the future, it will be a trend to embrace Vue3.0.
The following records the entry of Vue3.0 and the actual combat of a mobile project project template.
Directly imagining a project for yourself is the best learning exercise.
First post the prototype diagram, the final result is this:
The title, carousel, shortcut entry, function list, navigation bar at the bottom, and personal center in the head are finally integrated into a set of project templates, which is convenient for subsequent use.
1. Environmental preparation
Nodejs recommends installing version 12.13 or above, otherwise installing the latest vue-cli will report an error.
If yarn is not installed, it is recommended to install one, which is easier and more stable than npm. Yarn is a package management tool released by facebook to replace npm.
npm install -g yarn
Yarn Taobao source installation, respectively copy and paste the following lines of code to the black window to run
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
Install the new version of vue-cli
yarn global add @vue/cli@next# ORnpm install -g @vue/cli@next
Create project:
vue create pro_name, select the project of vue3
VUE3.0 introduces vant3.0 component library
yarn add vant@next -S
Then add on-demand plug-ins (recommended to use on-demand introduction to reduce code mentions):
yarn add babel-plugin-import -DAdd the babel.config.js following in the project root directory :
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
}Add routing Vue-Router 4.0
yarn add vue-router@next
src Create a new router folder in the directory , add index.js files
index.js code show as below:
// 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 routerLet's take a test to see what the successful introduction of vant looks like:
Let's create a new one src/views/Test.vue so that the / path can render the content.
<template>
<div>我是按钮</div>
<van-button type="primary" size="large">大号按钮</van-button>
</template>
<script>
export default {
}
</script>App.vue Add router-view components under the file and render the page components matched by the route.
<template>
<!-- App.vue内容 -->
<router-view />
</template>
<script>
export default {
name: 'App'
}
</script>
Under the main.js file change, introduce the component,
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')
Execute yarn serve and open the browser to see the following effect, indicating that vant has been used normally.
Vue-Router 3.x And Vue-Router 4.0 not the same place, configuration:
// 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
}
]
})In use:
// 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 }
}
}Next, according to the prototype diagram above, start the home page, including the carousel diagram, the navigation bar at the bottom, and so on.
The project built by vue-cli does not support less by default, you need to add it yourself:
yarn add less less-loader --dev
What is the use of less, because in vue, you rarely use directly edited css, but use less and more. Less (short for Leaner Style Sheets) is a backward compatible CSS extension language. Less adds a few convenient extensions to the CSS language. LESS is a CSS preprocessor scripting language that can extend CSS and compile it into regular CSS syntax so that it can be read by a web browser. It provides functions such as variables, functions, mixins and operations, and can build dynamic CSS. Simply put, it is more powerful and easy to use than CSS. In order to finally package and compile less into CSS, these two less less-loaders are required to install.
Features and advantages and disadvantages of less:
Features
Clearer and more readable code can be written in an organized way.
We can define the style, and it can be reused throughout the code.
Less is based on JavaScript and is a superset of CSS.
Less is an agile tool that can eliminate the problem of code redundancy.
Advantages
LESS easily generates CSS that can work in the browser.
LESS enables you to write cleaner, well-organized code using nesting.
Maintenance can be achieved faster by using variables.
LESS enables you to easily reuse entire classes by referencing them in the rule set.
LESS provides use operations to make coding faster and save time.
Disadvantages
Learning if you are new to CSS preprocessing takes time.
Due to the tight coupling between modules, more effort should be taken to reuse and/or test dependent modules.
Compared with old preprocessors (such as Sass), LESS has fewer frameworks. Sass is composed of frameworks Compass, Gravity and Susy.
In order to solve the mobile-end adaptation problem, there are two libraries that must be installed, one is Ali’s lib-flexible and the other is postcss-pxtorem (which can automatically complete the conversion from px to rem. postcss-pxtorem is a PostCSS plug-in for The pixel unit is generated into a rem unit. The importance of front-end development and restoration of the design draft is undoubted. The most used unit is rem at present, but each time you need to calculate the rem value during the production process, in order to be able to directly develop according to the size of the design drawing, and It can be automatically compiled and converted into rem.), about Taobao’s lib-flexible flexible layout scheme and px to rem’s postcss-pxtorem plug-in, there are a lot of relevant information on the Internet, here is just a brief introduction.
yarn add lib-flexible
yarn add postcss-pxtorem -D
Next, start designing the first page, the navigation bar at the bottom:
<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>
The rest is nothing, focus on the layout, I think the most troublesome page design may be here, adjust the css back and forth, and if you are not a professional front-end background, css is not a lot of fun.
style lang="less" scoped, which means the use of less syntax is limited to scoped and this document is valid.
display: flex; Use flex layout. z-index: 1000; set to a large value to prevent being overlapped.
The flex-direction in the nav-list class is row, which is horizontal arrangement
In nav-list-item, flex-direction: column, arranged vertically.
&.router-link-active setting After clicking to activate an item, different colors will be displayed to identify which option is currently in.
The bottom attribute specifies the bottom edge of the element. This attribute defines the offset between the lower margin boundary of the positioning element and the lower boundary of its containing block. The above bottom:0 is the bottom position.
The position attribute specifies the positioning type of the element, fixed generates an absolutely positioned element, which is positioned relative to the browser window
In short, this part of the adjustment is a fine work, css usage, practice makes perfect. You can gradually become familiar with more adjustments and more use.
Vant, a mobile UI library produced by praise, tutorial: https://www.w3cschool.cn/vantlesson/vantlesson-htl635uq.html
You need to be more familiar with the syntax of less and the flex layout of CSS. Recommend Ruan Yifeng's blog flex layout tutorial: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
So far, we have designed several bottom navigation bar components, called NavBar.vue, and put them in the src/components directory.
You may think it is a bit troublesome to design components for the first time, but it is much clearer than the original web page adjustments. Moreover, these components are reusable components in the future, and the follow-up efficiency will be higher if you accumulate more.
Then introduce the display in our views/Home.vue to see the effect:
<template>
<div>
<nav-bar />
</div>
</template>
<script>
import navBar from '@/components/NavBar'
export default {
name: 'home',
components: {
navBar
}
}
</script>