官方文档
https://staging-cn.vuejs.org/guide/introduction.html#what-is-vue
https://v3.cn.vuejs.org/guide/installation.html#vite
webpack --》vite
npm init vite@latest --template vue-ts //ts工程，js工程不加-ts
main.ts文件(包括引入element-plus、router、pinia等)
import { createApp } from 'vue'
import App from './App.vue'
// 整体引入
import ElementPlus from 'element-plus'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import router from "./router/index";
import { createPinia} from 'pinia';
// UI样式
import '@/styles/index.scss';
const app = createApp(App);
app.use(router).use(ElementPlus, { size: 'default', zIndex: 3000 })
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.use(createPinia())
app.mount("#app");
vue-router 升级到 4.0
具体用法会开新章节
router.ts文件
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
export const Layout = () => import('@/view/app-layout/index.vue');
// 静态路由
export const constantRoutes: Array = [
{
path: '/redirect',
component: Layout,
meta: {
hidden: true
},
children: [
{
path: '/redirect/:path(.*)',
component: () => import('@/view/redirect/index.vue')
}
]
},
{
path: "/login",
component: () => import("@/view/login/index.vue"),
meta: {
hidden: true
}
},
{
path: '/',
component: Layout,
redirect: '/dashboard',
children: [
{
path: 'dashboard',
component: () => import('@/view/dashboard/index.vue'),
name: 'Dashboard',
meta: { title: 'dashboard', icon: 'TrendCharts', affix: true }
}
]
}
];
// 创建路由
const router = createRouter({
history: createWebHashHistory(),
// hash模式：createWebHashHistory，history模式：createWebHistory
routes: constantRoutes,
// 刷新时，滚动条位置还原
scrollBehavior: () => ({ left: 0, top: 0 })
});
// 重置路由
export function resetRouter() {
router.getRoutes().forEach(route => {
const { name } = route;
if (name && router.hasRoute(name)) {
router.removeRoute(name);
}
});
}
export default router;
vuex --》pinia
取消了mutations，同步异步都在actions中，更简洁，下节更新pinia
官方 https://pinia.vuejs.org/introduction.html#basic-example
生命周期的变化
没有了created
onMounted 钩子可以用来在组件完成初始渲染并创建 DOM 节点后运行代码
| vue2 （vue3选项写法可用） | vue3 |
|---|---|
| beforeCreate | Not needed* |
| created | Not needed* |
| beforeMount | onBeforeMount |
| mounted | onMounted |
| beforeUpdate | onBeforeUpdate |
| updated | onUpdated |
| beforeUnmount | onBeforeUnmount |
| unmounted | onUnmounted |
| errorCaptured | onErrorCaptured |
| renderTracked | onRenderTracked |
| renderTriggered | onRenderTriggered |
| activated | onActivated |
| deactivated | onDeactivated |
data的定义
使用reactive函数创建一个响应式对象或数组
ref方法来允许我们创建可以使用任何值类型的响应式 ref
⚠️注意区别，一个使用时候有value，一个没有
style
::v-deep写法已经被废弃了，使用:deep(xx)
:deep(.el-drawer__header) {
font-weight: 700;
font-size: 18px;
margin-bottom: 0;
}
可能遇到的坑
1、⚠️注意重名问题，3.0对重名检查严格，变量不要重名，哪怕是父子也有可能造成错误
2、路由或者path地址不可以带有*之类的字符
3、使用element-plus注意看文档，有些属性已废弃
持续更新中。。。。。