第一步安装 vue-cli
创建项目
选择 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 使用
修改代码
复制一些文件和资源
修改项
-
修改
@Component
为@Options
-
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
},
}
VueRouter
改为import { Router } from 'vue-router';
- 路由直接放
const routes: Array<RouteRecordRaw> = [];
- 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';
@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');
$children
被删除了,需要改动使用setup()
获取子元素filter
已经删除了,所以只能通过方法调用
转载请保留原文链接: https://www.zodream.cn/blog/id/216.html