首页 > 其他分享 >Vite 2.0 + Vue3 + Ts + Vant3移动端项目

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

时间:2024-03-05 20:44:33浏览次数:35  
标签:vue const app Ts ts Vant3 import router 2.0

highlight: androidstudio

Vite 2.0 搭建 Vue3 移动端项目

一. 涉及技术点

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

二. 步骤

vite+ts+vue3只需要一行命令
npm init @vitejs/app my-vue-app --template vue-ts
初始化项目
npm install
npm run dev
** 配置路由**

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

npm install vue-router@4

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

//现在创建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:

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

安装

npm i vant@next -S

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

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

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.安装

npm i -s axios

2. 配置axios

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

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.使用

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

配置请求代理

vite.config.ts

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

npm install postcss-pxtorem -D

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

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

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

// 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引入

import "./utils/rem"

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

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

正常写法

<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>写法

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

是不是简洁了很多

<style vars>如何用?

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

 

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

 就这么简单! 

 

 

  

  

  

  

  

  

 

  

  

 

 

  

标签:vue,const,app,Ts,ts,Vant3,import,router,2.0
From: https://www.cnblogs.com/mmzuo-798/p/18054908

相关文章

  • 详细vite创建vue3项目(vue3+vue-router+ts+vite+element-plus+pinia)
    详细vite创建vue3项目(vue3+vue-router+ts+vite+element-plus+pinia):https://blog.csdn.net/qq_44423029/article/details/126378199?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170891147716800185818285%2522%252C%2522scm%2522%253A%252220140713.130102334..%2......
  • 网页浏览器Chrome开发者调试工具-Elements(元素)
    前言全局说明网页浏览器Chrome开发者调试工具-Elements(元素)一、Elements(元素)网页内容都是以元素为单位,比如一行字等等二、页面选择元素在页面上想要查看源码的地方,鼠标右键-审查,就能打开源码对应位置。三、元素工具打开审查页面后,在工具左上角点击后,就可以在页面......
  • Add correct host key in /root/.ssh/known_hosts to get rid of this message
    这是因为使用ssh登录后的服务器,因为某些原因被重置了,再次登录的使用的老的秘钥不再可以使用,这里需要删除重新设置查询cat/root/.ssh/known_hosts登录机器的ip以及对应的密码删除方法,删除ip对应的秘钥ssh-keygen-f"/root/.ssh/known_hosts"-R"192.168.31.10"......
  • QC3.0快充识别芯片FP6601Q:电子工程师的首选,兼容QC2.0与平芯微技术
    概述FP6601Q是一款智能充电管理芯片,具有出色的协议识别功能,可以自动识别接入的充电设备并调整输出电压,以满足不同设备的充电需求。它支持BC1.2、Apple、SamsungAFC、华为FCP/SCP、ClassA、QC3.0和QC2.0等多种充电协议,适用于苹果、三星、华为等多种品牌设备的快速充电。同时,它还......
  • python-Grequests,一个好用的 requests库的异步版本!
    Grequests是什么?grequests是一个Python库,它是requests库的异步版本。它允许你同时发送多个HTTP请求,而不必等待每个请求依次响应。可以在等待服务器响应的同时执行其他任务,从而节省时间并提高效率。安装Grequestspipinstallgrequests使用示例一:批量获取网页假如有一个......
  • 在PowerShell中下载文件是一项常见的任务,可以通过多种方法完成。下面我将介绍使用Invo
    在PowerShell中下载文件是一项常见的任务,可以通过多种方法完成。下面我将介绍使用Invoke-WebRequest、New-Object和Start-BitsTransfer命令来下载文件的方法。使用Invoke-WebRequestInvoke-WebRequest是一个非常强大的命令,用于向网页发送HTTP和HTTPS请求。你可以使用它来下载文......
  • 青少年CTF-Crypto(新手版本2.0,无factor1)
    凯撒大帝的征讨之路题目:lnixoa{1x2azz7w8axyva7y1z2320vxy6v97v9a}知识点:凯撒加密我的题解:importbase64#shift得出移位多少,移位后的字母-移位前的字母defcaesar_decrypt(ciphertext,shift=ord('l')-ord('q')):str_list=list(ciphertext)i=0whilei......
  • jymusic V2.0 前台XSS漏洞
    JYmusic是一款开源的跨平台音乐管理系统。有着清新的界面和强大的功能。jymusic界面在2.0版本中发现了一个可以打管理员cookie的漏洞利用条件1.登录会员2.认证音乐人上传音乐时,抓包,修改name或者cover_url参数值为:XSS"><script>alert(document.cookie)</script>>此时......
  • Ubuntu2.0解压安装mysql8.0
    https://www.cnblogs.com/dodoye/articles/15501845.html踩过的坑:linux版本和下载的版本不匹配,卸载不完全有些残留 二、解压、安装等dodo@gk-oa:~$tar-xvfmysql-server_8.0.23-1ubuntu20.04_amd64.deb-bundle.tarlibmysqlclient21_8.0.23-1ubuntu20.04_amd64.deblib......
  • windows下用Code::blocks gcc/mingw系使用wxWidgets库
    很多Windows下用Code::blocks+wxWidgets的朋友最开始的时候都会因为这个错误无法编译而放弃wx。下面给出详细解决方法:1.到WX的目录下,找到include\wx\platform.h文件,用Codeblocks打开它2.Codeblocks下用菜单栏的Search->Find功能,找到#include"wx/setup.h"一行3.将"wx/set......