Vite 2.0 + Vue3 + Ts + Vant3移动端项目

highlight: androidstudio

Vite 2.0 搭建 Vue3 移动端项目

一. 涉及技术点

• vite
• vue3
• ts
• router
• vuex
• axios
• vant3
• 移动端适配
• 请求代理

二. 步骤

vite+ts+vue3只需要一行命令

?

1	npm init @vitejs/app my-vue-app --template vue-ts

初始化项目

?

1 2	npm install npm run dev

** 配置路由**

1.安装vue-router的时候一定要带上版本号，否则现在安装的还是3.x的版本

?

1	npm install vue-router@4

2.在src/新建文件夹router，并在router文件加下新建index.ts文件：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

//现在创建router的方式与vue2.x的版本已经很不同了 import {createRouter, createWebHashHistory} from 'vue-router'; const routes = [     {         path: '/',         redirect: '/home',     },     {         path: '/home',         component: () => import('../components/home.vue')     } ];   const router = createRouter({     history: createWebHashHistory(), //替代之前的mode，是必须的     routes }); export default router;

 

3. 修改src/main.ts：

?

1 2 3 4 5 6 7 8

import {createApp} from 'vue'; import App from './App.vue'; import router from './router/index'; //引入vue-router import './index.css';   const app = createApp(App); app.use(router); // 挂载到app上 app.mount('#app');

　Vant3

安装

?

1	npm i vant@next -S

vite版本不需要配置组件的按需加载，因为Vant 3.0 内部所有模块都是基于 ESM 编写的，天然具备按需引入的能力，但是样式必须全部引入137.2k在main.ts全局引入样式

2.在main.ts全局引入样式

?

1 2 3 4 5 6 7 8 9 10 11

import { createApp } from 'vue' import App from './App.vue' import router from "./router"; import store from "./store"; import vant from 'vant' import 'vant/lib/index.css'; // 全局引入样式 createApp(App) .use(router) .use(store) .use(vant) .mount('#app')

配置网络请求axios

1.安装

?

1	npm i -s axios

2. 配置axios

在src创建utils文件夹,并在utils下创建request.ts

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

import axios from "axios"; const service = axios.create({   baseURL,   timeout: 5000 // request timeout }); // 发起请求之前的拦截器 service.interceptors.request.use(   config => {     // 如果有token 就携带tokon     const token = window.localStorage.getItem("accessToken");     if (token) {       config.headers.common.Authorization = token;     }     return config;   },   error => Promise.reject(error) ); // 响应拦截器 service.interceptors.response.use(   response => {     const res = response.data;       if (response.status !== 200) {       return Promise.reject(new Error(res.message || "Error"));     } else {       return res;     }   },   error => {     return Promise.reject(error);   } ); export default service;

3.使用

?

1 2 3 4 5

import request from "../utils/request"; request({url: "/profile ",method: "get"}) .then((res)=>{   console.log(res) })

配置请求代理

vite.config.ts

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path';   // https://vitejs.dev/config/ export default defineConfig({   plugins: [vue()],   base:"./",//打包路径   resolve: {     alias:{       '@': path.resolve(__dirname, './src')//设置别名     }   },   server: {     port:4000,//启动端口     open: true,     proxy: {       // 选项写法       '/api': 'http://123.56.85.24:5000'//代理网址     },     cors:true   }   })

移动端适配(postcss-pxtorem)

1.安装postcss-pxtorem

?

1	npm install postcss-pxtorem -D

2.在根目录下创建postcss.config.js

?

1 2 3 4 5 6 7 8 9 10

module.exports = {   "plugins": {     "postcss-pxtorem": {       rootValue: 37.5,       // Vant 官方根字体大小是 37.5       propList: ['*'],       selectorBlackList: ['.norem']       // 过滤掉.norem-开头的class，不进行rem转换     }   }

3.在根目录src中新建util目录下新建rem.ts等比适配文件

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

// rem等比适配配置文件 // 基准大小 const baseSize = 37.5 // 注意此值要与 postcss.config.js 文件中的 rootValue保持一致 // 设置 rem 函数 function setRem () {   // 当前页面宽度相对于 375宽的缩放比例，可根据自己需要修改,一般设计稿都是宽750(图方便可以拿到设计图后改过来)。   const scale = document.documentElement.clientWidth / 375   // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）   document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px' } // 初始化 setRem() // 改变窗口大小时重新设置 rem window.onresize = function () {   console.log("我执行了")   setRem() }

4.在mian.ts引入

?

1	import "./utils/rem"

以上，一个最基本的移动端开发配置完成。

三. vite对<script setup>和<style vars>的支持格外友好

正常写法

?

1 2 3 4 5 6 7 8 9 10 11 12 13

<script lang="ts"> import { defineComponent } from "vue"; import { useRouter } from "vue-router"; export default defineComponent({   setup() {     const router = useRouter();     const goLogin = () => {       router.push("/");     };     return { goLogin };   }, }); </script>

　<script setup>写法

?

1 2 3 4 5 6 7

<script lang="ts" setup="props"> import { useRouter } from "vue-router"; const router = useRouter(); const goLogin = () => {   router.push("/"); }; </script>

是不是简洁了很多

<style vars>如何用？

?

1 2 3 4 5

<script lang="ts" setup="props"> const state = reactive({   color: "#ccc", }); </script>

　

?

1 2 3 4 5

<style > .text {   color: v-bind("state.color"); }/ </style>

　就这么简单!