搭建vue3+vant项目架构

git代码仓库，直接下载压缩包使用

1、首先要安装node.js(18.3 或更高版本)

2、创建vue3项目

1. npm create vue@latest

复制代码

然后按照自己的必要进行选择就行

到此vue3项目创建完成，接下来是搭建项目架构
3、设置Vant (移动端ui)

vue3项目引入vant，按需引入组件

1. // 引入vant
2. npm i vant
3. // 辅助按需引入样式
4. npm i @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D

复制代码

在文件vite.config.js，添加以下代码

2. import { defineConfig } from 'vite'
3. import vue from '@vitejs/plugin-vue'
4. import AutoImport from 'unplugin-auto-import/vite'
5. import Components from 'unplugin-vue-components/vite'
6. import { VantResolver } from '@vant/auto-import-resolver'
8. export default defineConfig({
9.   plugins: [
10.     vue(),
11.     AutoImport({
12.       resolvers: [VantResolver()],
13.     }),
14.     Components({
15.       resolvers: [VantResolver()],
16.     }),
17.   ]
18. })

复制代码

使用
vue3中直接在使用的组件，按需引入必要用的组件就行，例如：

1. // test.vue
2. <template>
3.   <van-button type="primary">按钮</van-button>
4. </template>

复制代码

4、设置环境变量

设置各个环境的设置文件

1. // 例如在.env.development文件中
3. NODE_EVN=development  // 环境变量
4. VITE_BASE_API=http://dev.os-api.vertlet.com // 请求的地址

复制代码

1. // package.json 文件
3. "scripts": {
4.     "dev": "vite --open --mode development",
5.     "test2": "vite --open --mode test",
6.     "gray": "vite --open --mode gray",
7.     "production": "vite --open --mode production",
8.     "build:gray": "vite build  --mode gray",
9.     "build:dev": "vite build  --mode development",
10.     "build:test2": "vite build  --mode test",
11.     "build:prod": "vite build",
12.     "preview": "vite preview"
13.   },

复制代码

5、设置axios请求

1. // 创建request.ts 文件，封装axios
2. import axios from 'axios'
3. import { showToast } from 'vant'
5. const instance = axios.create({
6.   baseURL: import.meta.env.VITE_BASE_API,
7.   timeout: 30000,
8.   headers: {
9.     'X-Requested-With': 'XMLHttpRequest',
10.   },
11. })
13. // 请求拦截
14. instance.interceptors.request.use(
15.   function (config) {
16.     const token = localStorage.getItem('token')
17.     // 在发送请求之前做些什么
18.     if (token) {
19.       config.headers['Xl-Os-Token'] = token
20.     }
21.     if (config.method == 'get') {
22.       config.params.from_mobile = 1
23.     } else {
24.       config.data.from_mobile = 1
25.     }
26.     return config
27.   },
28.   function (error) {
29.     // 对请求错误做些什么
30.     return Promise.reject(error)
31.   },
32. )
34. // 响应拦截
35. instance.interceptors.response.use(
36.   (response) => {
37.     const { data } = response
38.     if (data.code === 0) {
39.       // 请求成功
40.       return data
41.     }
42.     showToast(data.msg)
43.   },
44.   function (err) {
45.     console.log(err)
46.     return Promise.reject(err)
47.   },
48. )
50. export function GET(url: string, params: object, config?: object) {
51.   return instance({
52.     method: 'get',
53.     url,
54.     params,
55.     ...config,
56.   })
57. }
59. export function POST(url: string, data: object, config?: object) {
60.   return instance({
61.     method: 'post',
62.     url,
63.     data,
64.     ...config,
65.   })
66. }

复制代码

6、pinia使用

界说store

1. // store/counter.ts
3. import { ref, computed } from 'vue'
4. import { defineStore } from 'pinia'
6. export const useCounterStore = defineStore('counter', () => {
7.   const count = ref(0)
8.   const doubleCount = computed(() => count.value * 2)
9.   function increment() {
10.     count.value++
11.   }
13.   return { count, doubleCount, increment }
14. })

复制代码

使用store
在必要的vue组件中，引入store

1. // views/index.vue
3. <template>
4.   <p>count:{{ count }}</p>
5.   <p>doubleCount:{{ doubleCount }}</p>
6.   <van-button type="primary" @click="increment">anniu</van-button>
7. </template>
9. <script setup lang="ts">
10. // import { getShopGroupList } from '@/service/index'
11. import { useCounterStore } from '@/stores/counter'
12. import { storeToRefs } from 'pinia'
14. const store = useCounterStore()
15. const { count, doubleCount } = storeToRefs(store)
16. const { increment } = store
17. </script>
18. <style lang="scss" scoped></style>

复制代码

移动端设配问题

使用amfe-flexable，postcss-pxtorem，进行移动端适配；
   amfe-flexable： 是阿里发布的一套可伸缩适配方案。它能根据装备的宽高来设置页面body元素的字体大小，将1rem设置为装备宽度/10以及在页面大小转换时可以重新计算这些数值，但仅限于<style></style>标签里设置的px，对于行内样式和百分比是不生效的。
    postcss-pxtorem是postcss的一个插件，可以将对应的像素单位转换为rem。在vite中可以直接对其进行设置，由于vite已经集成了postcss。
  此中最重要的设置属性为：
  

• rootValue：根元素的值，即1rem对应的像素值大小。一般设置为计划稿尺寸/10
  以及一些其他属性：
  
• propList：必要进行转换的css属性的值，可以使用通配符。如：*意思是将全部属性单位都进行转换；[“position”]会匹配到background-position-y
  
• selectorBlackList：不进行单位转换的选择器。如设置为字符串body，则所有含有body字符串的选择器都不会被该插件进行转换；若设置为[/^body$/]，则body会被匹配到而不是.body
  
• exclude：不必要进行单位转换的文件 mediaQuery：是否允许像素在媒体查询中进行转换
  

1. //npm方式
2. npm install postcss-pxtorem --save-dev
3. npm install amfe-flexible --save-dev
5. //pnpm方式
6. pnpm add postcss-pxtorem -D
7. pnpm add amfe-flexible -D

复制代码

如果项目用的是ts，还必要安装

1. npm i --save-dev @types/postcss-pxtorem

复制代码

由于amfe-flexible没有提供类型信息文件，所以必要自己界说一个.d.ts文件；
使用declare关键字来告诉TypeScript编译器存在一个名为amfe-flexible的模块，但是不提供详细的类型信息

1. // amfe-flexible.d.ts
3. declare module 'amfe-flexible'

复制代码

1. // tsconfig.app.json
2. {
3.   "extends": "@vue/tsconfig/tsconfig.dom.json",
4.   "include": [
5.     "env.d.ts",
6.     "src/**/*",
7.     "./auto-imports.d.ts",
8.     "./components.d.ts",
9.     "./amfe-flexible.d.ts"
10.   ],
11.   "exclude": ["src/**/__tests__/*"],
12.   "compilerOptions": {
13.     "composite": true,
14.     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
15.     "allowJs": true,
16.     "baseUrl": "./",
17.     "paths": {
18.       "@/*": ["src/*"]
19.     }
20.   }
21. }

复制代码

1. // main.js
3. import 'amfe-flexible'

复制代码

1. // vite.config.js 配置postcss-pxtorem
3. import { fileURLToPath, URL } from 'node:url'
5. import { defineConfig } from 'vite'
6. import vue from '@vitejs/plugin-vue'
7. import postCssPxToRem from 'postcss-pxtorem'
9. // https://vitejs.dev/config/
10. export default defineConfig({
11.   plugins: [vue()],
12.   resolve: {
13.     alias: {
14.       '@': fileURLToPath(new URL('./src', import.meta.url))
15.     }
16.   },
17.   css:{
18.     postcss:{
19.       plugins:[
20.         postCssPxToRem({
21.           rootValue:37.5,
22.           propList:['*'],
23.         })
24.       ]
25.     }
26.   }
27. })

复制代码

引入scss

1. npm i sass -D

复制代码

1. // vite.config.ts
3. export default defineConfig({
4.   plugins: [
5. // ...
6.   css: {
7.     preprocessorOptions: {
8.       scss: {
9.         // 配置全局sass变量注入
10.         additionalData: '@use "@/styles/variable.scss";',
11.       },
12.     },
13.   },
14. })

复制代码

添加调试面板VConsole

   vConsole是一个轻量、可拓展、针对手机网页的前端开发者调试面板

1. npm install vconsole

复制代码

1. // main.js
3. import VConsole from 'vconsole';
5. if (import.meta.env.MODE !== "production") {
6. // 生产环境不展示
7.   new VConsole();
8. }

复制代码

遇到问题

   BUG：在vue文件中导入ts，会出现标红报错：Cannot find module ‘@/service/index’ or
its corresponding type declarations.Vetur(2307)
  解决：在使用vue2的时候，用的插件是vetur；但是vue3推荐使用的是vue-offical。只要切换一下插件就没问题了。
   BUG：设置vant后，由于插件能帮我们自动引入，因此无需手动引入组件，导致ts识别为“Cannot find name
‘showToast’”，如图：

  解决：必要把生成的auto-imports.d.ts和components.d.ts引入tsconfig中，如图

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。