Vue3 real combat series: Vue3.0 + Vant3.0 build seed projects

Recently, I am writing an open source mall project with Vue3. After open source, everyone can also use the ready-made source code of Vue3 large mall project to practice. I am currently in the development stage, and Vant3.0 is used in the process. This article is about how to build a seed project using Vue3.0 + Vant 3.0.

Previous review: Here comes Vue3, the refactoring plan of the Vue3 Open Source Mall project is officially launched!

As we all know, Vue 3.0 has been released for a little over a month, but there are not many Vue UI component libraries in the market that can make corresponding Vue UI components quickly. As far as I know, there are Ant Design of Vue and Vant. The migration of these two component libraries is relatively complete, and there may be some small omission, but it will not affect the overall situation. You can go to their Github repository and mention the Issue.

Next, I will take you to manually build a Vue 3.0 seed project with the component library Vant, the latest routing VUe-Router 4.0, the latest state management plug-in Vuex 4.0.

Create a project

Creating a project takes three forms

Vue-Cli
Vite
Webpack

This article will use Vite to create the project, after all, it is a packaging tool that you have worked so hard to write, in a non-production environment, we try to play with the latest stuff (it is impossible not to learn).

We according to the official document to the tutorial to initialize the project, here amway a domestic accelerated version of the Chinese document, the official Chinese website seems to be deployed in a foreign server, domestic open very very slow, very affect learning.

Use NPM:

$ npm init vite-app vant-v3
$ cd vant-v3
$ npm install
$ npm run dev
Copy the code

Using yarn:

$ yarn create vite-app vant-v3
$ cd vant-v3
$ yarn
$ yarn dev
Copy the code

Personally, I prefer to use YARN because it is faster. If you like NPM, you are advised to add Taobao image and install it using CNPM, which is also fast.

In doing this, I personally feel very fast.

The initialization project directory is as follows:

Both careful and careless students will find that the entry file seems to have changed.

Yes, it does. V2 is the way to initialize an instance, and V3 is the way to initialize an instance in a functional style.

/ / Vue2.0
new Vue({
  render: h= > h(App)
}).$mount('#app')

/ / Vue3.0
import { createApp } from 'vue'
createApp(App).mount('#app')
Copy the code

Example Add route vue-router 4.0

After the release of Vue 3.0, You said that the peripheral plug-ins have not been well adapted to the update.

Indeed, vue-Router 4.0 is still beta-13 as of now, which means try not to use the beta version of the plug-in in a production environment, more or less there are still a few minor issues that have not been resolved.

But we can play with their own projects can be seen in advance, next let’s install the routing plug-in.

yarn add vue-router@next
Copy the code

As with V2, we need to create a new router folder under SRC and add the index.js file.

The code is as follows:

// src/router/index.js
import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '.. /views/Home.vue'

// createRouter Creates a route instance
const router = createRouter({
  history: createWebHashHistory(), Hash mode: createWebHashHistory; History mode: createWebHistory
  routes: [{path: '/'.component: Home
    }
  ]
})

// Throw a route instance and reference it in main.js
export default router
Copy the code

Let’s create a new SRC /views/ home.vue to render the/path:

<template>
  <div>I was fourteen</div>
</template>

<script>
export default{}</script>
Copy the code

Next, add the router-view component under app.vue to render the page component that the route matches:

<template>
<! -- Same as vue-Router3, where routing components are displayed -->
  <router-view />
</template>

<script>

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

Vue-router 3. X is different from Vue-Router 4.0.

The first is to declare the form of the route instance:

// Vue-Router 3.x
const router = new VueRouter({
  mode: 'history'.base: process.env.BASE_URL,
  routes:  [
  	// Route configuration is unchanged]})/ / the Vue - 4.0 the Router
const router = createRouter({
  history: createWebHashHistory(), Hash mode: createWebHashHistory; History mode: createWebHistory
  routes: [{path: '/'.component: Home
    }
  ]
})
Copy the code

The second is how to use it:

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

Run yarn dev to open a browser as shown in the following figure:

Add the Vant UI component library

Vant version 3.0 has been released. We can go to the official website to see how to install it.

It won’t be fine. I’ll show you.

The first step is to install it.

yarn add vant@next -S
Copy the code

After the addition, we will add the plugins that are imported on demand (recommended to use the import on demand, with fewer code references) :

yarn add babel-plugin-import -D
Copy the code

Add babel.config.js to the project root directory as follows:

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

Introduce a component in main.js as follows:

import { createApp } from 'vue'
import { Button } from 'vant';
import App from './App.vue'
import router from './router'
import 'vant/lib/index.css'; // Import styles globally
import './index.css'

const app = createApp(App) // Create an instance

app.use(Button) // Register the component
app.use(router)

app.mount('#app')
Copy the code

Add a component to SRC /views/ home.vue as follows:

<template>
  <div>I was fourteen</div>
  <van-button type="primary" size="large">Large buttons</van-button>
</template>

<script>
export default{}</script>
Copy the code

At this point, refresh the browser, and the effect is as shown in the picture below:

Mobile REM ADAPTS

Rem adaptation is not necessary for PC web pages, but FOR H5 development, REM needs to be done. Vant official has also provided us with a scheme, as shown in the figure below:

Let’s adapt and install them according to the plan provided by the official:

yarn add lib-flexible -S
yarn add postcss-pxtorem -D
Copy the code

Lib-flexible is a font-size match for HTML, so you need to install it in dependencies. Postcss-pxtorem is used to convert px units to REM units at compile time, so install it in devDependencies.

After the installation, we need to introduce lib-flexible in main.js and add the following code:

import { createApp } from 'vue'
import { Button } from 'vant';
import 'lib-flexible/flexible'
import App from './App.vue'
import router from './router'
import 'vant/lib/index.css'; // Import styles globally
import './index.css'

const app = createApp(App) // Create an instance

app.use(Button) // Register the component
app.use(router)

app.mount('#app')
Copy the code

And then we need to configure for px to REM.

At first I made the mistake of declaring a.postcssrc.js file in the root directory, but the project created by Vite no longer supports this type of configuration file. Instead, it requires a postcss.config.js file with the following configuration:

// postcss.config.js
// Create a project with vite. Configure postCSS using post.config.js
// For details, see the postcss-pxTorem repository documentation
module.exports = {
  "plugins": {
    "postcss-pxtorem": {
      rootValue: 37.5.// Vant's official root font size is 37.5
      propList: [The '*'].selectorBlackList: ['.norem'] // Filter out the. Norem - class, and do not perform rem conversion}}}Copy the code

Vue/SRC /views/ home.vue/div/SRC /views/ home.vue

<template>
  <div class="demo">I was fourteen</div>
  <van-button type="primary" size="large">Large buttons</van-button>
</template>

<script>
export default{}</script>

<style scoped>
.demo {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
}
</style>
Copy the code

If the preceding figure is displayed, the configuration has taken effect.

Here’s another little thing to note: when you don’t need to turn px to REM, you can use uppercase PX.

This is not converted to rem units at compile time, nor is the.norem prefixed class name declared by the selectorBlackList attribute.

At the end

The above is the content of building Vue3.0 + Vant3.0 + Vue-Router4.0 mobile terminal seed project, the source code has been open source to GitHub vue3-Examples warehouse, warehouse address: github.com/newbee-ltd/… , this warehouse will not regularly update a variety of Vue3.0 related knowledge and a variety of integration of Demo and Vue3 use tips, you can pay attention to, what suggestions are also welcome to give me a message.

Vue3 real combat series: Vue3.0 + Vant3.0 build seed projects

Create a project

Example Add route vue-router 4.0

Add the Vant UI component library

Mobile REM ADAPTS

At the end

Related Posts

“Linked lists” of data structures

(Virtual List + webWorker + indexedDB) processing 100,000 data

About the Development View