vue3与vue2的区别超详细（vue3使用vite2移动端项目搭建）
项目中使用了vue3 vite开发一个App项目，这里记录搭建的流程以及配置。
一.整个项目所需完成的目标配置- vite版本("^2.2.0") Vite 需要 Node.js 版本 >= 12.0.0
- vue3("^3.0.4") @vue/cli 4.5.13
- ts("^4.5.5")
- 集成路由
- 集成Vuex
- 集成axios
- 配置Vant3
- 移动端适配
- 请求代理
vite ts vue3只需要一行命令
npm init @vitejs/app my-vue-app --template vue-ts
1.配置路由
安装路由(4.x)Vue Router安装路由(4.x)"^4.0.12"
在src下新建router目录，新建index.ts文件
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
const routes: Array<RouteRecordRaw> = [
{
path: "/",
name: "Home",
meta: {
title: "首页",
keepAlive: true
},
component: () => import("../views/home/index.vue"),
},
{
path: "/login",
name: "Login",
meta: {
title: "登录",
keepAlive: true
},
component: () => import("../views/login/index.vue"),
},
];
const router = createRouter({
history: createWebHashHistory(process.env.BASE_URL),
routes
});
export default router;
2.在main.ts挂载路由
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from "./router/index";
createApp(App).use(router).mount("#app");
3.配置数据中心vuex
安装
npm i vuex@next --save
在src下创建store目录，并在store下创建index.ts
import { createStore } from "vuex";
export default createStore({
state: {
listData: {1:10},
num:10
},
mutations: {
setData(state,value) {
state.listData = value
},
addNum(state) {
state.num = state.num 10
}
},
actions: {
setData(context,value) {
context.commit('setInfo', value)
},
},
modules: {}
});
挂载 在main.ts挂载数据中心
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from "./router/index";
import store from "./store";
createApp(App).use(router).use(store).mount("#app");
4.Vant3
安装
npm i vant@next -S
vite版本不需要配置组件的按需加载，因为Vant 3.0 内部所有组件模块都是基于 ESM 编写的，天然具备按需引入的能力,样式的按需引入在vite.config.ts配置
组件尽量在局部引用，如果放在全局会增加入口文件的大小，影响首屏加载速度。
需要在vite.config.ts配置样式按需引入
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vitePluginImp from 'vite-plugin-imp'
import {resolve} from 'path'
export default defineConfig({
plugins: [
vue(),
vitePluginImp(
{
libList: [
// 配置vant
{
libName: 'vant',
style(name) {
if (/CompWithoutStyleFile/i.test(name)) {
// This will not import any style file
return false
}
return `vant/es/${name}/index.css`
}
},
]
}
),
],
base: "./", // 打包路径
resolve: {
alias: {
'@': resolve(__dirname, './src') // 设置别名
}
},
server: {
port: 8080,
open: true,
cors: true,
proxy: {
// 选项写法
'/pai': {
target: 'http://fls-fac-cfapp', // 域名需根据项目修改
changeOrigin: true,
} // 代理网址
},
}
})
5.移动端适配
安装postcss-pxtorem
npm install postcss-pxtorem -D
在根目录下创建postcss.config.js
module.exports = {
"plugins": {
"postcss-pxtorem": {
rootValue: 37.5,
propList: ['*'],
selectorBlackList: ['.norem'] // 过滤掉.norem-开头的class，不进行rem转换
}
}
}
在根目录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 () {
setRem()
}
然后在mian.ts引入
import "./utils/rem"
6.配置网络请求axios
npm i -s axios
在src创建utils文件夹,并在utils下创建request.ts
import axios from "axios";
let baseURL = "/api";
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;
使用 async await
import request from "../utils/request";
request({url: "url ",method: "get"})
.then((res)=>{
console.log(res)
})
or
推荐
const getInfo = async () => {
const result = await request({ url: "url ", method: "get" });
console.log(result);
};
配置请求代理 vite.config.ts
export default defineConfig({
plugins: [
vue(),
vitePluginImp(),
],
base: "./", // 打包路径
resolve: {
alias: {
// 键必须以斜线开始和结束
'@': resolve(__dirname, './src') // 设置别名
}
},
// 本地运行配置，及反向代理配置
server: {
port: 8080,//启动端口
open: true,// 开启热更新
cors: true,// 默认启用并允许任何源
proxy: {
// 选项写法
'/pai': {
target: 'http://192.168.128.7', // 域名需根据项目修改
changeOrigin: true,
} // 代理网址
},
}
})
到这里，一个最基本的移动端开发配置完成。
三. vite对<script setup> 和<style vars>的支持正常写法
<script lang="ts">
import { reactive, ref, toRef } from "vue";
export default {
props: {
collectionName: String,
title: String,
},
setup(props: any, context: any) {
const book = reactive({ title: "hello" });
const readersNumber = ref('wrod');
const tile = toRef(props, 'title');
return {
readersNumber,
book,
tile,
};
},
};
</script>
<script setup>写法
<template>
<button @click="handlejump('mine')">按钮</button>
</template>
<script lang="ts" setup="props">
import { reactive } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
// 路由跳转公用
const handlejump = (route: string) => {
router.push(route);
};
</script>
<style vars>使用
<script lang="ts" setup="props">
const state = reactive({
color: "#ccc",
});
</script>
<style >
.text {
color: v-bind("state.color");
}
</style>
so到这里已经是完成啦，最主要的是开发思路，代码设计！！！
简洁、易读、可复用、可维护！
,免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
