【vite2 + vue3】从0搭建体验（一）

阿海爱学习
1,289 阅读2分钟

通过命令行创建一个Vite2项目

保证Node.js版本 >= 12.0.0

一、创建项目的两种方式

1.通过npm创建

$ npm init @vitejs/app

2.通过yarn创建

$ yarn create @vitejs/app

运行上面命令后会让你进行一些选择配置

1.输入项目名称：

image.png 2.选择一个模版(这里选择vue)

image.png

一个简单的项目就创建好啦，接着进入到刚才创建的项目目录安装一下依赖,然后npm run dev就可以愉快跑起来了

But：凡事都有个but，跑起来以后会有个小warning

image.png

说明：script setup 是一个试验性功能，可能在以后的版本中会被移除，所以建议想用这个的可以锁死版本。个人觉得setup script 是一个很好的体验，也得到很多开发者的支持，不会移除。

核心思想：为了简化组件的声明过程，引入组件后直接可以在template中使用，看下面的🌰 image.png

Vue支持

Vue的整合也通过插件实现，和其他框架一视同仁：

image.png

Vue3 setup script 详解

  • 组件的导入

之前导入组件的方式

  1. 在script标签内 import Comp from './components/Comp.vue
  2. 在export default { components: {Comp}}内进行注册
  3. 最后在template模版中进行使用

现在可以直接导入组件而省去上述步骤2

栗子🌰

step1: 创建一个组件

image.png

step2: 在helloworld组件中引入使用

image.png

  • 属性定义 通过从vue包引入defineProps方法进行属性的定义

image.png

  • 定义事件 在组件的内部，可能有对外的输出事件，可以通过从vue 包引入defineEmit的方法

image.png

这个方法返回的是一个函数，可以帮助我们去派发事件

在button里面用法

image.png

在父组件里面

image.png

这样就成功的调用了

  • 获取上下文
const ctx = useContext()
// 得到setup的上下文

所以触发事件的方式还可以这样写

image.png

整合vue-router

版本问题

与vue3相匹配的是vue-router4和vuex4版本 千万不要装错

第一步 装包

// https://github.com/vuejs/vue-router-next
// https://github.com/vuejs/vuex/tree/4.0
$ npm i vue-router@4 vuex@4 -S

第二步 插件的初始化配置

  1. vue-router4是用createRouter来创建router实例
// router/index.js

// 跟之前一样有两种模式可以选择，分别是Hash Mode和HTML5 Mode
import {createRouter, createWebHashHistory, createWebHistory} from 'vue-router'

const router = createRouter({
 history: createWebHashHistory(),
 routes: [
   { path: '/' ,component: () => import('../views/home.vue')}
 ]
})

export default router
  1. 在main.js文件中进行挂载

import { createApp } from 'vue'
import router from './router'

createApp(App).use(router).mount('#app')
  1. 在App.vue中添加router-view
<template>
  <router-view></router-view>
</template>

数据封装

统一封装数据请求服务，可以解决以下一些问题：

  • 统一配置请求
  • 请求、响应统一处理

准备工作：

  • 安装axios

$ npm i axios -S

  • 添加配置文件： .env.development

VITE_DJ_BASE_API=/api

vite会从项目根目录下从以下文件加载额外的环境变量，本质是用dotenv来做的。 这样就可以通过import.meta.env.VITE_DJ_BASE_API获取到相应的变量

浏览器打印如下：

image.png

  • 在utils目录下新建request.js文件对axios进行简单的二次封装
import axios from 'axios'

const service = axios.create({
  baseURL: import.meta.env.VITE_DJ_BASE_API,
  timeout: 50000
})

service.interceptors.request.use(config => {
  config.headers['Bear '] = 'my token'
  return config 
}, error => {
    console.log(error);
    return Promise.reject(error)
})

service.interceptors.response.use(response => {
  const res = response.data 
  // 处理逻辑
}, error => {
    console.log(error);
    return Promise.reject(error)
})

export default service

这样就初步的搭建起来

avatar
文章
阅读
粉丝