说实话,我更推荐你学完Vue2直接查看官方文档的中的 Vue3值得注意的新特性
或者说,对Vue2说拜拜,直接看Vue3的起步文档

新的创建实例方式

  • Vue.createApp 方法可以返回一个提供应用上下文的应用实例,应用实例挂载的整个组件树共享同一个上下文
  • 在 2.x 中,开发者可以定义 data 选项是 object 或者是 function,现在,他只能是 function 了。

列表的增/删/过滤 & mounted聚焦

  • 当使用 v-cloak 时,在 mounted 中的 .focus() 需要等待渲染完成(1 tick之后)才能起作用
    使用全局 Vue.nextTick() 或者在实例中使用 this.$nextTick()
  • 从 Vue 3.0 开始,过滤器 filters 已删除,不再支持。
    如果想使用全局过滤器,可以考虑使用全局属性来迁移
    而局部过滤器,直接使用 computed 或者 methods 代替即可。

    官网提到:虽然过滤器的 | 看起来很方便,但它需要一个自定义语法,打破大括号内表达式是“只是 JavaScript”的假设,这不仅有学习成本,而且有实现成本。
    在知乎偶然看见某些人嘲讽“不要实现成本还为什么会有Vue”,我在这里悄悄洗一下,既然有人能做你干的事,要你还有什么用?而且去掉一些无用实现可以更好的保证源码体积,何乐而不为呢?

VueRouter

  • 不再使用 new VueRouter 而是使用 VueRouter.createRouter官方4.x文档

yarn和vue-cli安装

  • npm设置镜像源
    1
    npm config set registry https://registry.npm.taobao.org
  • 安装yarn
    1
    npm install -g yarn
  • 使用yarn安装vue-cli
    1
    yarn global add vue-cli
  • 验证是否安装成功
    1
    vue -V
    如果提示'vue' 不是内部或外部命令,也不是可运行的程序或批处理文件,在环境变量 PATH 中添加
    1
    C:\Users\你的用户名\AppData\Local\Yarn\Data\global\node_modules\.bin
  • 已经可以使用 vue create 项目名 或者 vue ui 创建项目了

ElementUI Plus

vue-cli4项目结构

  • vue-cli4-project
    • node_modules
    • public
      • favicon.ico
      • index.html
    • src———————————————【项目资源,别名@】
      • api————————————— (用于统一管理网络请求)
        • index.js
      • assets————————————【静态资源】
        • logo.png
        • css
        • img
      • common———————————(存放工具类和常量)
        • util1.js
      • components—————————【可复用的组件】
        • Navigation.vue
      • router————————————【路由配置】
        • index.js
      • views————————————【不可复用的组件】
        • Home.vue
      • App.vue———————————【主组件 (使用router-link引入其他模块) 】
      • main.js——————————— 【入口文件 (初始化vue实例/导入插件/设置全局变量) 】
    • .browserslistrc
    • .gitignore
    • babel.config.js
    • package.json
    • package-lock.json
    • README.md

用于参考

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import moment from 'moment'

const app = createApp(App)
//配置路由
app.use(router)
//ElementPlus中文
app.use(ElementPlus, {
locale: zhCn,
})
//全局过滤器
app.config.globalProperties.$filters = {
dateFormat(date,format='YYYY-MM-DD') {
return moment(date).format(format)
}
}
//挂载元素
app.mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/',
name: 'Home',
component: () => import('../views/Home.vue')
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
1
2
3
4
5
6
7
import axios from "axios";

export const BASE_URL = 'http://localhost/'

export const getItemList = (params) => axios.get(BASE_URL + 'items', { params })
export const getItemTypes = () => axios.get(BASE_URL + 'item-types')
export const saveItem = (item) => axios.post(BASE_URL + 'item', item)

使用方式

1
2
3
4
5
6
7
8
9
10
11
12
import {getItemList,getItemTypes} from "@/api";

export default {
//...
methods: {
getTypes(){
getItemTypes().then(resp=>{
this.types = resp.data.data
})
},
},
}