由于项目都是vue框架的spa页面,然后项目需要一个活动页和微信的分享,这样用vue框架很累赘;以前我是直接用h5;刚好最近vue3.0出来了,然后撸一个活动页面练练手。这个过程还是蛮曲折的,用这文章记录一下;

学习资源链接:

vue3.0中文文档

vite中文文档

vite配置

vant3.0

vant按需加载:

由于只用到了vant的部分功能,需要按需加载;

1、单个组件加载时,样式加载一直不对,也不知道为啥,然后只能全局加载样式,然后加载样式的方式也不能直在用vant,打包会报错,估计是vite的问题;

import { Collapse, CollapseItem, ImagePreview } from "vant";

import "/@modules/vant/lib/index.css";

  components: {
    VanCollapse: Collapse,
    VanCollapseItem: CollapseItem,
  },

2、图片懒加载,加载了Lazyload组件 也是一直报错,也没成功;有人用过的可以给我样例;

3、用babel-plugin-import完成按需加载

module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

vue3.0

1、入口文件

import { createApp } from 'vue'
import Router from './router'
import App from './App.vue'

import './plugin/flexible'
import xhr from './plugin/api'

const app = createApp(App);
app.use(Router);
app.use(xhr);
app.mount('#app');

2、全局对象,网上都说用ctx获取,但是发现打包之后获取有问题,只能用appContext;

internalInstance.appContext.config.globalProperties.$route.params;

3、路由hash模式用createWebHashistory()

const router = createRouter({
  history: createWebHashHistory(),
  routes
});

4、reactive和toRefs,用reactive申明响应对象是,setup里面赋值,但是在模板里面获取不到值,需要用toRefs将变量的属性改成响应式对象

vite

启动速度是真的快,启动不需要编译,希望可以革webpack;

Logo

前往低代码交流专区

更多推荐