从0到1搭建vite+vue3+vant4+pinia的h5项目

#通过vite构建vue项目 

这里展示的话使用的式yarn  vite官方地址:开始 | Vite 官方中文文档

#使用NPM
npm create vite@latest my-vue-app -- --template vue

#使用yarn
yarn create vite my-vue-app --template vue

my-vue-app是创建项目的名称 可自行定义

#响应式布局 vw布局 

这里采用vw布局 配置起来也是很简单的 

这里是以常用的 375x667（iPhone 6/7/8) 移动设备尺寸 适用于大多数普通的移动设备。这个尺寸通常在H5项目中用作设计稿的基准尺寸。

#下载安装依赖
yarn add postcss-px-to-viewport --save-dev

#vite.config.js文件中配置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path';
import postcssPxToViewport from 'postcss-px-to-viewport';

export default defineConfig({
  base:'/h5',
  // publicPath: './',
  plugins: [
    vue(),
    Components({}),
  ],
  css: {
    postcss: {
      plugins: [
        postcssPxToViewport({
          unitToConvert: 'px',
          viewportWidth: 375,
          viewportHeight: 667,
          unitPrecision: 3,
          viewportUnit: 'vw',
          selectorBlackList: ['.ignore', '.hairlines'],
          minPixelValue: 1,
          mediaQuery: false,
        }),
      ],
    },
  },
})

 如果在代码中px单位能自动转换成vw单位 就表示配置成功啦

#安装sass 和 sass-loader

yarn add sass --save-dev             

yarn add sass-loader --save-dev

安装完成即可直接使用<style lang='scss' scoped></style>

#安装路由配置

1.安装路由 yarn add vue-router@4

2.在src文件夹下单独创建一个router文件夹，router文件夹下创建index.js文件 index.js代码如下，这里采用的是hash路由

import { createRouter, createWebHashHistory } from 'vue-router'
export const routes = [
    {
        path:'/home',
        name:'home',
        component:() => import('@/views/Home/index.vue'),
        meta:{
          index:1,
          title: '首页'
        }
    },
    //这里redirect 表示重定向到home页面
    {
      path: '/',
      redirect: '/home',
      meta:{
        title: '首页'
      }
    }
]
const router = createRouter({
    // 使用hash(createWebHashHistory)模式
    // (createWebHistory是HTML5历史模式，支持SEO)
    history: createWebHashHistory(),
    routes
})

export default router

3.在main.js中引入router并且使用

 #配置根路径 /@ 

1.在vite.config.js文件中代码如下

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'; 
import postcssPxToViewport from 'postcss-px-to-viewport';

//记得一定要引入path模块

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})

2.在使用中 @/没有提示的话 在根目录下创建jsconfing.json文件  配置代码如下，如果还是没有提示重新启动编辑器即可！！

{
  "compilerOptions": {
      "target": "ES6",
      "module": "commonjs",
      "allowSyntheticDefaultImports": true,
      "baseUrl": "./",
      "paths": {
        "@/*": ["src/*"]
      }
  },
  "exclude": [
      "node_modules"
  ]
}

#引入vant4组件库

官方文档:Vant 4 - A lightweight, customizable Vue UI library for mobile web apps.

1.通过yarn安装vant

yarn add vant

2.这里用到了unplugin-vue-components 插件  通过yarn安装如下

yarn add unplugin-vue-components -D

3.在vite.config.js文件中代码如下  然后看效果!!!!!

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path';
//下面两行必须引入 否则vant样式不生效
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
})

 #使用pinia

1.通过yarn安装pinia

yarn add pinia

2.在根目录下创建store文件夹 然后分别创建index.js和user.js 代码参考如下

//index.js文件中
import { createPinia } from "pinia";

const pinia = createPinia()

export default pinia

//然后要引入到 main.js文件中
import router from '@/router/index'
import pinia from '@/store/index'

const app = createApp(App)
app.use(router).use(pinia).mount('#app')

// store/user.js代码如下
import { defineStore } from 'pinia'

const useUser = defineStore('user',{
    state:()=>({
      userName:'admin',
      userId:1,
    })
})
export default useUser

3.在页面中使用案例

<script setup>

import useUser from '@/store/user'
const userInfo = useUser()
console.log(userInfo.userName,userInfo.userId) //admin 1
//可以直接修改结果 刷新页面会丢失 如果需要持久化数据请参考pinia做持久化处理 例如:
userInfo.userName = '张三'
userInfo.userId = 2
console.log(userInfo.userName,userInfo.userId) //张三 2

</script>

以上就是一些h5项目的简单搭配啦 希望大家都能配置成功 本文暂时没用到TypeScript！！