第一步安装 vue-cli

npm install --global @vue/cli@next

创建项目

vue create vue-shop

选择 Manually select features

勾选 Choose Vue version

Babel

Typescript

Progressive Web App (PWA) Support

Router

Vuex

Css Pre-processors 使用了Scss 必选

Linter/Formatter

Unit Testing 和 E2E 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

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 注册全局

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
    },
}

3. VueRouter 改为 import { Router } from 'vue-router';
4. 路由直接放 const routes: Array<RouteRecordRaw> = [];
5. Vuex 使用

   
   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');

7. $children 被删除了，需要改动使用 setup() 获取子元素
8. filter 已经删除了，所以只能通过方法调用

转载请保留原文链接： https://zodream.cn/blog/id/216.html