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

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

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

简介

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

什么是vite?

时过境迁,我们见证了诸如 webpackRollup 和 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 [email protected] --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
今日推荐