文章目录

• 1. 创建vue3项目
• • 1.1 基于webpack的工程创建
  • 1.2 通过vite来创建vue3项目
  • • vue3插件推荐
  • 1.3 通过npm init vue@3创建项目
• 2. vue3入口文件
• 3. vue3中的全局方法修改
• 4. vue3中封装全局方法
• 5. vue3生命周期函数
• 6. setup中生命周期使用
• 7. data函数方式

1. 创建vue3项目

1.1 基于webpack的工程创建

在用这种方式创建vue3项目时，要注意以下几点：

1. 确保你的vue-cli 脚手架版本在 4.5.0 以上，这样才能创建
2. 检查脚手架版本 vue -V 或 vue --version
3. 如果版本低话，请重新安装 vue-cli，使用命令为：npm install -g @vue/cli

创建流程：

1. 在命令提示符输入vue create vue3-project

2. 选择安装方式：

   

3. 选择安装的模块

   

4. 选择安装的vue版本

   

5. 路由的模式

   

6. ccs预处理

   

7. 配置文件的存储位置

   

8. 不保存创建项目的设置,到此项目创建成功

   

1.2 通过vite来创建vue3项目

1. 在命令提示符输入以下命令：yarn create vite myapp01_vite

   

2. 选中vue进行创建

   

3. 选择语言模式

   

4. 至此，项目创建完成，按提示运行项目

   

最后，我们来看一下创建成功后的目录结构：

vue3插件推荐

1.3 通过npm init vue@3创建项目

使用create-vue来创建vue3项目,它也是基于vite来构建的

命令：

npm init vue@3

指定项目名称：

选择需要的配置：

2. vue3入口文件

vue3 的入口文件，相对于 vue2 做了一定改变：

// 创建vue入口程序，由原来的类实例，变成现在的函数方式，为了更好在打包时优化代码
import { createApp } from 'vue'
// 根组件
import App from './App.vue'// 实例化一个Vue顶层组件
const app = createApp(App)
app.mount('#app')

3. vue3中的全局方法修改

vue2 中的全局方法都是添加在 Vue 类的静态方法或属性当中，而在 vue3 中，我们把全局方法都添加在了 app 实例当中。

示例：

入口文件（main.js）：

// 创建vue入口程序，由原来的类实例，变成现在的函数方式，为了更好在打包时优化代码
import { createApp, h } from 'vue'
// 根组件
import App from './App.vue'// 实例化一个Vue顶层组件
const app = createApp(App)// vue3中把之前vue2中的全局方法进行了改变，全都迁移到app实例上
// 定义一个全局组件
app.component('loading', {render() {return h('h1', null, '加载中...')}
})// 给vue添加全局的成员属性
app.config.globalProperties.$http = '我是网络请求对象'// 全局自定义指令 v-red  
// 7个钩子函数：created beforeMount mounted beforeUpdate updated beforeUnmount unmounted
app.directive('red', {created(el) {el.style.cssText = 'color:red;'},// 删除app组件// mounted(el) {//   el.remove()// }
})// 全局混入
app.mixin({data() {return {title: '我是全局混入'}},mounted() {console.log('全局混入 -- mounted');}
})// 全局插件
app.use(instanceVue => {// console.log(instanceVue);instanceVue.component('test', {render() {return h('h3', null, '我是插件中定义的组件')}})
})app.mount('#app')

App组件（App.vue）：

4. vue3中封装全局方法

入口文件（main.js）：

// 创建vue入口程序，由原来的类实例，变成现在的函数方式，为了更好在打包时优化代码
import { createApp } from 'vue'
// 根组件
import App from './App.vue'import createGlobalComponent from './components'
import globalProperties from './config/globalProperties'// 实例化一个Vue顶层组件
const app = createApp(App)// 创建全局组件
// createGlobalComponent(app)
app.use(createGlobalComponent)
app.use(globalProperties)app.mount('#app')

App组件（App.vue）：

commponents入口文件（index.js）：

import loading from './loading'
import test from './test'const createGlobalComponent = app => {loading(app)test(app)
}export default createGlobalComponent

loading组件（index.js）：

import loading from './loading.vue'export default app => app.component('loading', loading)

loading组件（loading.vue）：

test组件同loading组件代码基本一致，这里省略。

全局成员属性配置文件（config/globalProperties.js）：

export default app => {// 给vue添加全局的成员属性app.config.globalProperties.$http = '我是网络请求对象'
}

运行结果：

5. vue3生命周期函数

执行顺序：

6. setup中生命周期使用

由于组合API（setup()）中生命周期钩子函数能够执行多次，所以我们可以使用自定义钩子，实现不同的功能。

注意：setup中，它不能使用this，它里面没有 beforeCreate和created生命周期。

我们可以创建一个 hooks 文件，用来存储，我们自定义的钩子函数，例如下面这个函数：

usePrintHook.js：

import { onMounted } from 'vue';const usePrintHook = () => {// 在挂载完成后，输出一句话// 初始化时，进行网络请求// 挂载完成后，进行dom操作 onMounted(() => {console.log('我是一个mounted生命周期')})// 可以书写返回值return 'abc'
}
export default usePrintHook

App组件（App.vue）：

7. data函数方式

data 只能定义成一个函数，例如下面这样：