前言

几年前写过一个vue的前端项目,由于这几年没有接触前端基本忘了.最近想重启一个前端的项目,网上查了一下vue3比较流行.就使用vue3开启.由于之前了解过vue,学习过es6的基本语法,所以不打算从零开始.通过vite创建一个vue3的项目,然后在网上找一个开源的admin项目合并一下代码作为自己的工程.在网上找了几个admin,由于nodejs版本更新比较快大多数在本地编辑启动都有问题.后来一想干脆放弃本地启动,直接在自己的vite创建工程里面复制粘贴代码完善自己的工程.本文主要讲解工程逐步完善的过程.

环境搭建

包括本地开发环境和发布环境

本地开发环境:

nodejs安装、vscode安装
本地机器安装nodejs.在官网下载稳定版本就行.没必要最新版本.
由于国内网络限制,配置一个阿里的依赖地址:npm config set registry registry.npmmirror.com

发布环境

安装ngnix,官网下载安装包,启动服务就行了.ng作为正式环境代理服务器,可以统一访问入口,解决跨域问题.
其实正式环境使用nodejs也可以.现在有些项目前后端统一使用nodejs实现,nodejs服务器代替tomcat服务器.后端的数据操作也是通过js连接数据库,大多数存储使用mongo或者es.数据传递结构使用json.没必要像java总是要进行json转对象.话题有点远了.不发散了.

开始开发

使用vscode开发代码
找一个本地的文件路径创建工程:

cnpm create vite

启动服务:

cnpm run dev

启动之后一般打印日志里面会有访问的端口号,直接通过id+port访问就行了.
打包:

cnpm run build

将打包的dist文件夹复制到ng的www路径下.通常ng下面有一个默认的dist,替换就行了.
部署之后就可以通过浏览器访问ng地址访问前端服务了.
以上就是服务的启动和部署阶段

开发过程中依赖的工具包:

axios

前端需要访问后端服务,没有使用vue之前使用ajax访问后端服务.后来在网上看到大多数vue项目都是用axios访问后端,所以在新的工程里面也打算使用axios.
安装axios cnpm install axios.基本用法查看官方文档就行了.
自己封装一个axios的访问接口:

import axios from 'axios'
const requestClient = axios.create(
    {
      baseURL: import.meta.env.VITE_APP_BASE_URL,
        // headers: { 'Content-Type': 'application/json;charset=utf-8' },
      // baseURL: 'http://localhost:5173/api/'
    }
)

requestClient.interceptors.request.use(
    function (config) {
        console.log("config is " + JSON.stringify(config,null))
        return config;
    }, function (error) {
        return Promise.reject(error);
    }
);
export default requestClient

注意 baseURL: import.meta.env.VITE_APP_BASE_URL.这个配置是vite提供的功能.具体用法查看vite文档

vite代理

前端访问后端通常涉及到跨域的问题.通过ng代理可以统一前后端入口,但是在本地开发调试的时候前端的端口和后端服务器的端口不一致.vite提供代理请求的功能,帮助本地开发调试程序使用.
vite.config.ts 配置文件,注意proxy的配置

import { loadEnv, defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path, { resolve } from "path"
const env = loadEnv('string', 'string');
export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      ['/api']: {
        target: 'http://localhost:8081',
        changeOrigin: true,
        rewrite: (path) =>  path.replace(RegExp('/api'), '')
      }
    }
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

这样就可以解决跨域问题.

vue-router

由于vue通常是单页面应用,页面之间的跳转通过浏览器锚点(#域名)实现的.由于vue的模块化代码结构,所以自己写锚点比较麻烦,这里引入vue-router.实现页面跳转.基本功能用起来很简单.
安装依赖包:cnpm install vue-router
main.ts里面增加 vue加载 .use(router)
配置前端路由:

import {createRouter, createWebHistory, RouteRecordRaw} from "vue-router"

const  routes: RouteRecordRaw[] = [
    {
        path: "/redirect",
        component: () => import("../views/Index.vue"),
    },
    {
        path: "/hello",
        component: () => import("../views/HelloWorld.vue"),
    }
];

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

export default router;

具体说明可以查看官方文档.
这样一个基本的前端工程就可以使用了.

总结:

在启动项目之前在网上查了不少学习的资料.
后来发现大多数资料使用的版本都比较旧,在测试过程中通常无法使用.还有的资料说明项目配置过程很细致,但是具体细节还是要查看官方文档.所以总结的经验就是.在网上找到开源的项目学习有哪些文件路径,代码根据不同的功能放到哪些文件夹下.启动vite默认创建的工程基本的文件路径都有了.我增加了views、utils、api等路径.就是根据查看开工项目然后自己总结一下文件路径.然后具体使用开源组件的时候到官网去查看说明.可以避免很多麻烦.
还有一点就是最好不要直接使用网上开源的项目进行修改,毕竟是学习阶段,很多开源项目集成了大量的外部组件.最好还是从0开始,一点一点的构建自己的项目,逐步增加外部组件的使用,清楚各个组件的作用.

未来:

未来会逐步完善前端工程,创建一个自己的vue3-admim.后期还计划增加移动端入口,现在也还在学习.
等有功能开发完了再总结文档
代码地址:
gitee.com/yeohx/all_i…

原文链接：https://juejin.cn/post/7332411241434660873 作者：学无止境的子戌