vue3 + JS + vant 搭建移动端H5项目（完整项目）

为了创建一个基于Vue 3、JavaScript和Vant的移动端H5项目，你需要执行以下步骤：

1. 确保你有Node.js和npm/yarn安装。

2. 安装Vue CLI：

   
   
   
   npm install -g @vue/cli

3. 创建一个新的Vue 3项目：

   
   
   
   vue create my-project

   在提示时选择Vue 3。

4. 进入项目目录：

   
   
   
   cd my-project

5. 添加Vant Weapp组件库：

   
   
   
   npm install @vant/weapp-theme-vant --save

6. 在src目录下创建一个plugins文件夹，并添加Vant Weapp插件：

   
   
   
   // src/plugins/vant.js
   import { createApp } from 'vue'
   import Vant from '@vant/weapp-theme-vant'
    
   export default {
     install(app) {
       createApp(app).use(Vant)
     }
   }

7. 在main.js中引入并使用Vant插件：

   
   
   
   // src/main.js
   import { createApp } from 'vue'
   import App from './App.vue'
   import vant from './plugins/vant'
    
   const app = createApp(App)
   app.use(vant)
   app.mount('#app')

8. 在vue.config.js中配置Vant Weapp组件库的npm路径别名：

   
   
   
   // vue.config.js
   module.exports = {
     chainWebpack: config => {
       config.resolve.alias
         .set('@vant/weapp', '@vant/weapp-theme-vant/dist/commonjs/index.js')
     }
   }

9. 使用Vant组件在你的.vue文件中：

   
   
   
   <template>
     <view>
       <van-button type="primary">按钮</van-button>
     </view>
   </template>

10. 运行项目：

    
    
    
    npm run serve

这样你就有了一个基于Vue 3、JavaScript和Vant的移动端H5项目框架。根据具体需求，你可以添加更多组件和功能。