vue3+vant3初步搭建项目（一）

vue3+vant3

准备vue3环境

• 安装vue3
  使用npm install vue@next命令安装vue3版本

可以安装vue-clinpm install -g @vue/cli，通过脚手架来选择构建vue3项目：选择：

Default (Vue 3 Preview) ([Vue 3] babel, eslint)

也可以使用vite快速构建一个vue3项目，具体步骤和其他内容官网上都有。

npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev

各种安装并启动完之后打开main.js文件，创建vue实例变成了createApp，此时已经构建了一个vue3项目。

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

使用vite构建的项目首页欢迎语是：Hello Vue 3.0 + Vite
使用cli构建的首页欢迎语是：Welcome to Your Vue.js App

安装vant3

具体的其他说明官网上都有

npm i vant@next -S

安装完毕后我们先全局引入来看一下效果，修改main.js为以下代码：

import { createApp } from 'vue'
import App from './App.vue'
import Vant from 'vant';
import 'vant/lib/index.css';

const app = createApp(App);
app.use(Vant);
app.mount('#app')

这写起来有点像写nodejs：const app = require('express')();app.use(()=>{});app.listen();
然后我们复制一个vant按钮到HelloWorld.vue中：按钮，此时页面上增加了一个蓝色按钮。引入vant成功。

平常我们开发的时候用不了那么多vant组件，所以需要配置一下按需引用。按照官网步骤来：

npm i babel-plugin-import -D

安装完毕后我们在babel.config.js文件下配置：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

修改main.js文件：

import { createApp } from 'vue'
import App from './App.vue'
import { vant } from '@/config/vant.config.js'

const app = createApp(App);
vant(app)
app.mount('#app')

在src下新建config目录 新建vant.config.js文件，可以将需要使用到的vant组件在这里引入：

import { Button, List, Cell, CellGroup } from 'vant';

export function vant(app) {
    app.use(Button);
    app.use(List)
    app.use(Cell);
    app.use(CellGroup);
}

在HelloWorld.vue文件中：

<template>
  <div class="hello">
    <h1>{{ msg }}h1>
    <van-button icon="plus" type="primary">按钮van-button>
      <van-list
        v-model:loading="state.loading"
        :finished="state.finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
    <van-cell v-for="item in state.list" :key="item" :title="item" />
  van-list>
  div>
template>

<script>
import { reactive } from 'vue';
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  setup() {
    const state = reactive({
      list: [],
      loading: false,
      finished: false,
    });

    const onLoad = () => {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          state.list.push(state.list.length + 1);
        }

        // 加载状态结束
        state.loading = false;
        // 数据全部加载完成
        if (state.list.length >= 40) {
          state.finished = true;
        }
      }, 1000);
    };
    return {
      state,
      onLoad,
    };
  },
}
script>

已经可以看到vant的按钮和列表的效果：

安装vue-router

npm i vue-router@next

src目录下新增router文件夹，新增index.js路由配置文件，routes为路由详细配置。

import { createRouter, createWebHistory } from 'vue-router'
import routes from './routes'

const router =  createRouter({
  history: createWebHistory(),
  routes
})

export default router

安装vuex

npm i vuex@next

src目录下新增store文件夹index.js文件。

import { createStore } from 'vuex'

export default createStore({
  state: {},
  mutations: {},
  actions: {},
  modules: {}
})

main.js里引入 store和router：

import router from './router'
import store from './store'

安装less-loader

npm i less less-loader -D

至此我们初步的准备工作完成。