vue3.0 + vite+ vant3.0

由于项目都是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；

学习资源链接：

vant按需加载：

vue3.0

vite

猜你喜欢