vite+vue3+vant H5手机端应用项目快速搭建

wait wait

已于 2024-07-29 11:27:38 修改

阅读量231

点赞数

分类专栏：前端开发文章标签： vue typescript vue.js

于 2024-07-29 11:22:54 首次发布

本文链接：https://blog.csdn.net/qq_45809464/article/details/140764631

版权

前端开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

项目附件懒人下载：

版本介绍

- node：v6.14.18
- npm: v20.16.0
- vue3+vite+vant
- vant4参考地址：https://vant-ui.github.io/vant/#/zh-CN
- vite借鉴地址：https://cn.vitejs.dev/guide/

项目搭建

1、新建工程文件夹（laikebao名称随意）

2、打开CMD命令窗口，依次执行下列 "npm" 命令 , 注意只执行前缀是npm 的命令

执行命令1：npm create vite@latest
npx: installed 1 in 1.013s
√ Project name: ... consumer //输入你要新建的项目名称
√ Select a framework: » Vue //选择开发语言 vue
√ Select a variant: » TypeScript //选择ts, 不会的可以选择JS, 
执行命令2：npm install

3、使用自己常用的编译工具，打开我们的项目，可以在编译工具中在此执行一遍 “npm install” 项目位置有迁移或变动，就把 node_modelules 这个文件夹删除，然后执行 npm install 命令就好

4、执行启动命令 npm run dev , 执行成功之后

5、在浏览器中访问 http://localhost:5173/

npm run dev

> consumer@0.0.0 dev D:\Project\laikebao\consumer
> vite


  VITE v5.3.5  ready in 263 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

6、vite+vue3项目就搭建起来了，现在安装 vant4，如果你只是用作后台管理系统或者web端应用就可以直接使用了，无需在安装 vant4-UI,这个 UI 是做手机端应用开发使用的，web端可以集成 iview、element、ant design vue等优秀的UI框架

执行命令：npm i vant

+ vant@4.9.3
added 3 packages from 1 contributor in 4.455s

5 packages are looking for funding
  run `npm fund` for details

7、我们验证一下vant4 是否安装成功

重新main.ts文件夹，导入vant 的组件
清除掉所有的css信息，防止干扰我们对组件的使用 style.css清空
main.ts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import 'vant/lib/index.css';
import { Button } from 'vant'
let app = createApp(App)
app.use(Button)
app.mount('#app')

App.vue

<script setup lang="ts">
</script>

<template>
  <div>
    <van-button type="primary">主要按钮</van-button>
    <van-button type="success">成功按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="danger">危险按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
  </div>
</template>

<style scoped>
</style>