后端只能写后端？vue + vite环境搭建你也必须要会呀！！

编程语言 2022-08-05 06:43:12 阅读次数: 0

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

作为一个后端人员，对于前端基本的人们技术也是需要了解的，虽然平时也会使用vue2甚至vue3去写代码，但是对于系统性的学习和记录还是较少的，毕竟每次都去百度也是挺麻烦的，接下来将会用一些篇幅去提升下这方面的技能，首先从搭建基础环境开始把。

简介

本篇文章将记录vue3 + vite的搭建过程，后续想要做一些关于three.js的开发工作，但是还有学习过，所以项目名称就叫做threejs了。

什么是vite？

时过境迁，我们见证了诸如 webpack、Rollup 和 Parcel 等工具的变迁，它们极大地改善了前端开发者的开发体验。然而，当我们开始构建越来越大型的应用时，需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。我们开始遇到性能瓶颈 —— 使用 JavaScript 开发的工具通常需要很长时间（甚至是几分钟！）才能启动开发服务器，即使使用 HMR，文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复，迟钝的反馈会极大地影响开发者的开发效率和幸福感。

复制代码

Vite 旨在利用生态系统中的新进展解决上述问题：浏览器开始原生支持 ES 模块，且越来越多 JavaScript 工具使用编译型语言编写。

官网地址

image.png

总结来说，vite就是为了改善我们在打包项目时缓慢的效率而提出的，极大的提升了我们的开发体验。

开始搭建

  • node 版本

    根据官方建议，node版本需要在12以上，达不到的请自行去官网下载升级：nodejs.org

    PS D:\workspace> node -v
v16.15.1
复制代码

  • 创建项目

    通常vue我们都是使用如下方式创建：

    create vue appName
复制代码

    但是还需要手动引入vite，非常麻烦，所以我们可以使用如下的方式：

    npm init vite
复制代码

    之后会提示你输入项目名称：

    image.png

    输入名称之后会提示选择框架，这里选择vue：

    image.png

    接下来提示是否使用ts，本文将不使用：

    image.png

    接下来就完成了创建，同时给出提示，进入文件加，安装依赖，启动项目：

    image.png

    我们按照上述操作完成后:

    image.png

    直接访问地址：

    image.png

组件安装

使用vue的过程中，需要使用很多的组件，接下来，将会将常用的组件引入方式，记录如下。

路由组件 router

  • 安装路由

    npm install vue-router@next --save
复制代码

  • main.js引入router

    import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index'

createApp(App).use(router).mount('#app')
复制代码

  • 修改App.vue

    <template>
  <router-view />
</template>

<script>

export default {
  name: 'app'
}
</script>
复制代码

  • 创建路由文件

    src目录下创建router文件夹，下面创建index.js文件：

    image.png

    在index.js添加如下配置：

    // createWebHashHistory 是hash模式就是访问链接带有#
// createWebHistory  是history模式
import {createRouter, createWebHashHistory} from 'vue-router'

// 引入文件，动态路由
const Home = () => import("@/views/home/index.vue");
const routes = [
    {
        path: "/",
        component: Home,
    }
];

const router = createRouter({
    history: createWebHashHistory(),
    routes
})

export default router
复制代码

    上面所示的Home，是项目的首页，我们在src创建文件夹views，在其下创建home，在其下创建index.vue:

    image.png

    内容如下：

    <template>
  hello world
</template>
复制代码

  • 启动访问，输出hello world

请求组件 axios

  • 安装axios

    npm install axios
复制代码

  • 创建文件

    在src下创建request文件夹，在其下创建index.js:

    image.png

    内容如下：

    import axios from 'axios'
// import {ElNotification} from 'element-plus'

const env = import.meta.env
// create an axios instance
const service = axios.create({
   baseURL: env.VITE_BASE_API, // url = base url + request url
   timeout: 50000 // request timeout
})

// request interceptor
service.interceptors.request.use(
   config => {
       config.headers['Content-Type'] = 'application/json'
       // do something before request is sent
       // config.headers['AUTHORIZATION'] = getToken()
       // config.headers['_username'] = getUsername()
       // config.headers['murmur'] = getMurmur()
       return config
   },
   error => {
       // do something with request error
       console.log(error) // for debug
       return Promise.reject(error).catch(err => {
           console.log(err)
       })
   }
)

// response interceptor
service.interceptors.response.use(
   response => {
       const res = response.data
       if (!res.code) {
           return res;
       }
       if (res.code !== 0) {
           if (res.code === 401) {
               removeToken();
               // this.router.push("index")
               // ElNotification({
               //     title: 'Error',
               //     message: '请重新登录',
               //     type: 'error',
               // })
               location.reload()
           } else {
               // ElNotification({
               //     title: 'Error',
               //     message: res.msg,
               //     type: 'error',
               // })
           }
       } else {
           return res
       }
   },
   error => {
       console.log('err' + error) // for debug
       // ElNotification({
       //     title: 'Error',
       //     message: error.msg,
       //     type: 'error',
       // })
       return Promise.reject(error).catch(err => {
           console.log(err)
       })
   }
)
export default service
复制代码

    如上主要涉及对请求和响应的拦截，判断其状态：

    • 请求：设置一些公共配置，比如header的格式，token等
    • 响应：获取相应的状态，对于非正常相应，做出统一的处理。

    上面引入了element-pluis，所以在异常响应是可以使用其ElNotification提示框，本文不做引入了，需要的可以自行引入：element-plus，报错请自行去除或替换

    当我们使用axios去发送请求时，只需要创建api文件夹，在其下创建相应业务模块的js即可，如下所示：

    image.png

vite.config.js配置

在没有引入vite前，我们的配置文件时vue.config.js，因为跨域的问题，所以需要在其内部配置请求的代理，从而实现请求转发，让我们能够在开发时正确的请求到后台的接口。

vite.config.js同样需要这样的配置。

  • 安装path

    npm install --save-dev @types/node
复制代码

  • 开发环境变量

    定义一个全局配置文件.env.development

    image.png

    内容如下：

    VITE_BASE_API='/dev-api'
VITE_BASE_URL='http://localhost:2022'
复制代码

  • 修改vite.config.js

    import {defineConfig, loadEnv} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path' // 需安装此模块

export default defineConfig(({mode, command}) => {
   const env = loadEnv(mode, process.cwd());
   return {
       plugins: [
           vue()
       ],
       resolve: {
           alias: {
               '@': path.resolve(__dirname, 'src')
           }
       },
       define: {
           'process.env': {}
       },
       server: {
           host: 'localhost',
           port: '8080',
           strictPort: false,//设为true时端口被占用则直接退出，不会尝试下一个可用端口
           cors: true,//为开发服务器配置CORS, 默认启用并允许任何源
           open: true,//服务启动时自动在浏览器中打开应用
           hmr: false,//禁用或配置 HMR 连接
           proxy: {
               [env.VITE_BASE_API]: {
                   target: env.VITE_BASE_URL,//实际请求地址
                   changeOrigin: true,
                   ws: true,// websocket支持
                   rewrite: (path) => path.replace(env.VITE_BASE_API, '')//替换实际请求后台地址
               }
           },
           https: false
       }
   }
})
复制代码

总结

到此为止，一个vue3 + vite 的简单环境就搭建完成了。你学废了吗？

此环境主要用于平时开发建议前端项目使用，为了减少每次重新搭建项目，去百度的痛苦。

创作不易，如需转载，请标明作者【我犟不过你】。

猜你喜欢

转载自juejin.im/post/7127920435693355021
今日推荐
周排行
Android图片与下拉框
java常用的设计模式之单例模式
zabbix自动化监控之自动注册
杨老师课堂之Excel VBA 程序开发第八讲使用工作表函数
Android 去掉底部虚拟导航栏
Android Studio 3.2 Beta 4 发布，功能改进和修复
Linux-3.5_总线驱动设备
Qt QTableView QStandardItemModel用法
session处理
分享几个实用的方法
每日归档
更多
2025-02-06(0)
2025-02-05(0)
2025-02-04(0)
2025-02-03(0)
2025-02-02(0)
2025-02-01(0)
2025-01-31(0)
2025-01-30(0)
2025-01-29(0)
2025-01-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022