升级vue3记录

Fork Me On Github

第一步安装 vue-cli

 
npm install --global @vue/cli@next
1

创建项目

 
vue create vue-shop
1

选择 Manually select features

勾选 Choose Vue version

Babel

Typescript

Progressive Web App (PWA) Support

Router

Vuex

Css Pre-processors 使用了Scss 必选

Linter/Formatter

Unit TestingE2E Testing 可选其中一个

选择 vue 版本 3.x

接下来输三个 y yes

然后选择 Sass/SCSS

ESLint 规则选择: 选了第一个,碰到很多问题,比如 在 template 中 {{ 1 < 2 }} 小于号居然被提示不符合vue 规则

选择 Lint on save 代码规范检查的时机

保存设置 In dedicated config files

然后 是否保存这个配置方便以后创建其他项目 N

安装一些其他依赖

 
npm install mitt axios vue-class-component@next vue-property-decorator@rc vuex-class vuex-class-modules
1

axios Api数据请求

mitt 全局事件管理,vue3 取消了 $once 等全局事件

vue-class-component@next vue3 Typescript 项目默认使用vue-class-component, 这里是为了安装最新

vue-property-decorator@rc @Prop() 的使用

vuex-class vuex-class-modules 方便vuex 使用

修改代码

复制一些文件和资源

修改项

  1. 修改 @Component@Options

  2. axios 注册全局

ts
        
export default {
    install(app: any) {
        app.config.globalProperties.$post = post
        app.config.globalProperties.$fetch = fetch
        app.config.globalProperties.$patch = patch
        app.config.globalProperties.$put = put
    },
}
12345678
  1. VueRouter 改为 import { Router } from 'vue-router';
  2. 路由直接放 const routes: Array<RouteRecordRaw> = [];
  3. Vuex 使用
    ts
            
    
    import {
     SET_USER, TOKEN_KEY, SET_TOKEN,
    } from '../types';
    import { IUser, ILogin } from '@/api/model';
    import { getSessionStorage, setSessionStorage, removeSessionStorage } from '@/utils';
    import { getProfile, login, logout } from '@/api/user';
    import { Action, Module, Mutation, VuexModule } from 'vuex-class-modules';
    12345678

@Module({ generateMutationSetters: true }) export class AuthModule extends VuexModule { token: string | null = null; user: IUser | null = null;

get isGuest() {
    if (this.user) {
        return false;
    }
    const token = getSessionStorage<string>(TOKEN_KEY);
    return !token;
}

@Mutation
[SET_USER](user: IUser|null) {
    this.user = user;
}


@Action
logoutUser() {
    return new Promise<void>((resolve, reject) => {
        const token = getSessionStorage<string>(TOKEN_KEY);
        if (!token) {
            resolve();
            return;
        }
        logout().then(() => {
            this[SET_TOKEN](null);
            this[SET_USER](null);
            resolve();
        }).catch(reject);
    });
}

}

import { createStore } from 'vuex'; import { AuthModule } from './modules/auth';

const store = createStore({});

export const authModule = new AuthModule({store, name: 'auth'});

export default store;

                    
具体参考 [Vue.js with Typescript and Decorators](https://davidjamesherzog.github.io/2020/12/30/vue-typescript-decorators/)

6. 修改main.ts
```ts
import { createApp } from 'vue';
import App from './App.vue';
import './registerServiceWorker';
import router from './router';
import store from './store';
import emitter from './event';

import './assets/iconfont/iconfont.css';

import http from './utils/http';

createApp(App, {
    onscroll(e: Event) {
        emitter.emit('scroll', e); // 传递滚动事件
    }
}).use(http).use(store).use(router).mount('#app');
1234567891011121314151617181920
  1. $children 被删除了,需要改动使用 setup() 获取子元素
  2. filter 已经删除了,所以只能通过方法调用
点击查看全文
标签: vue
0 494 0
滚动加载的页面默认无法后退保存之前的滚动位置,这么解决
玩转vue和小程序
vue 实现左滑删除,右滑点赞,一个滑动其他的复原!
Vuex 使用心得
2019年03月
Vuex 使用心得,typescript版。