Vue | JasonQian's Blog

环境配置

下载Node 18.x

配置环境变量：NODE_HOME：C:\WORK\node-v18.14.0-win-x64，NVM_HOME

使用node -v、nvm -v验证

启动ui界面在powershell中vue ui

项目配置信息：package.json

{
  "name": "my-bank-admin-vue2",
  "version": "0.1.0",
  "private": true,
  "scripts": { 
  	"dev": "vite",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "vue": "^2.7.0",                    // Vue 2 核心
    "vue-router": "^3.6.5",             // 路由
    "vuex": "^3.1.0",                   // 状态管理（Vue 2 用 Vuex）
    // 这里就是你放 Bootstrap、jQuery 的地方
    "bootstrap": "^5.3.3",              // ← 你要手动加
    "jquery": "^3.7.1",                 // ← 你要手动加
    "popper.js": "^1.16.1"              // Bootstrap 5 还需要这个
  },
  "devDependencies": {
    "@vue/cli-service": "^5.0.0",
    // ... 构建工具
  }
}

银行几乎都搭了内部仓库（Nexus Repository Manager、JFrog Artifactory、Verdaccio 或自研私服）。

操作步骤（开发机上一次配置，永久生效）：

在项目根目录新建或修改 .npmrc文件（注意是隐藏文件），内容如下：

registry=http://你的内网npm地址/repository/npm-group/   # 问运维要这个地址
# 如果有用户名密码认证，再加下面两行
//你的内网npm地址/repository/npm-group/:username=你的域账号
//你的内网npm地址/repository/npm-group/:_password=你的密码base64（运维给）

然后正常执行：
1
npm install
私服会自动从内网缓存里拉取 Bootstrap、jQuery（运维事先已经把常用包同步进去了）。

优点：和外网体验一模一样，团队所有人统一，CI/CD 也能走私服。

基础概念

文件结构

🚀`src/assets/`静态资源文件夹

功能：存放项目里所有不需要编译的静态文件。

存放内容：

图片（logo.png、icon.svg 等）
字体文件（.ttf、.woff）
全局样式文件（偶尔会放 global.css）
第三方库的静态资源（比如 echarts 的地图 json）

真实用法：在组件里用 import logo from '@/assets/logo.png' 引入，或者直接在 CSS 里 background: url(@/assets/xx.png)。 logo、行标、背景图全扔这里，Vite 会自动优化打包。

🚀`src/components/` —— 公共组件文件夹

作用：存放全局可复用的小组件（不是完整页面）。

存放内容：

自定义组件：BaseTable.vue、BaseForm.vue、PermissionButton.vue、ElDialogWrapper.vue

真实用法**：所有 CRUD 表格、表单、搜索栏、权限按钮都抽到这里。**规则：被 2 个以上页面使用的组件才放这里，否则先放 views 里，后期重构。

🚀`src/router/` —— 路由配置文件夹

作用：管理整个项目的页面跳转（完全取代 JSP 的 <jsp:forward> 和 <c:redirect>）。

存放内容：

index.js（主路由文件，定义所有 path 和 component）
推荐新建 modules/ 子目录，把每个业务模块路由拆分（userRouter.js、menuRouter.js）

真实用法：每个 JSP 页面对应一个路由，使用懒加载 () => import('@/views/user/UserList.vue')，几百个路由也不卡。

🚀`src/store/` —— Pinia 状态管理文件夹

作用：全局共享数据管理（取代 JSP session + 全局变量）。

存放内容：

index.js（Pinia 入口）
每个模块一个文件：user.ts、auth.ts、menu.ts

真实用法：登录 token、用户信息、权限菜单、主题配置全放这里。页面刷新也不丢（配合 localStorage）。

🚀`src/views/` —— 页面视图文件夹（迁移 JSP 的主力战场）

作用：存放每一个具体页面（List + Form + Detail）。

存放内容：

HomeView.vue、AboutView.vue（模板自带，可删）
按模块建子文件夹：user/UserList.vue、user/UserForm.vue、permission/RoleList.vue

真实用法：一个 JSP 页面 = 一个 views 文件夹。里面直接写 <el-table>、<el-form>、查询条件、弹窗操作。

🚀`src/App.vue` —— 根组件

作用：整个应用的最外层容器。

存放内容：全局布局（<router-view> + 侧边栏 + 顶部导航 + 页脚）。

真实用法：用 Element Plus 的<el-container>把后台框架搭起来，左侧菜单、顶部栏全写在这里。

🚀`src/main.ts（或 main.js）` —— 项目入口文件

作用：项目启动的第一行代码。

存放内容：

创建 Vue 实例
注册 Pinia、Router、Element Plus、axios 拦截器、全局指令

真实用法：统一加 token 拦截器、Element Plus 主题配置都在这里写。保持干净，别乱改。

真实企业项目中我还会额外新建的文件夹（推荐立刻加上）

src/
├── api/          # 所有 axios 请求封装（userApi.ts、menuApi.ts）
├── utils/        # 工具函数（request.ts、auth.ts、validate.ts）
├── hooks/        # 自定义 Hooks（useTable.ts、useDialog.ts）
├── styles/       # 全局样式、主题变量
├── layout/       # 布局组件（Header.vue、Sidebar.vue）
└── types/        # TypeScript 类型定义

快速上手建议（迁移 JSP 时的最佳实践）

先删掉 HelloWorld.vue 和 AboutView.vue，保持项目干净。
在 views/ 下新建 user/ 文件夹，按照我之前给你的 UserList.vue 示例开始迁移第一个页面。
记住核心思维：views 放页面，components 放零件，api 放接口，store 放状态。

代码

整个vue项目通过main.js中的createApp(App).use(store).use(router).mount('#app')将所有的组件挂载到/public/index.html中的<div id="app"></div>

每一个页面都是一个.vue文件，由三个部分组成，如下

<template>
</template>

<script>
</script>

<style scoped>  // 加了scoped表示这个css只在当前页面中渲染，起到了隔离的作用
</style>

如何引入其他组件？

在/views/HomeView.vue中引入/components/HelloWorld.vue

在/components/HelloWorld.vue的script里抛出本身

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>  <!-- 赋值 -->
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',  // 起别名，用于引入标识
  props: {
    msg: String  // 其他组件调用的时候，可以赋值
  }
}
</script>

在/views/HomeView.vue中引入

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/> <!-- 在这里使用，并给msg赋值 -->
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'  // 在这里引入
</script>

在/router/index.js中将createWebHashHistory改为createWebHashHistory可以避免访问时出现/#/的情况

引入的格外组件，如bootstrap，在main.js中引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'bootstrap/dist/css/bootstrap.css';  // 这里
import 'bootstrap/dist/js/bootstrap';

createApp(App).use(store).use(router).mount('#app')

script部分
export default对象的属性：
    name：组件的名称
    components：存储<template>中用到的所有组件
    props：存储父组件传递给子组件的数据
    watch()：当某个数据发生变化时触发
    computed：动态计算某个数据
    setup(props, context)：初始化变量、函数
        ref定义变量，可以用.value属性重新赋值，效率低于reactive
        reactive定义对象，不可重新赋值
        props存储父组件传递过来的数据
        context.emit()：触发父组件绑定的函数


template部分
    <slot></slot>：存放父组件传过来的children。
    v-on:click或@click属性：绑定事件
    v-if、v-else、v-else-if属性：判断
    v-for属性：循环，:key循环的每个元素需要有唯一的key
    v-bind:或:：绑定属性


style部分
	<style>标签添加scope属性后，不同组件间的css不会相互影响。


第三方组件
    view-router包：实现路由功能。
    vuex：存储全局状态，全局唯一。
        state: 存储所有数据，可以用modules属性划分成若干模块
        getters：根据state中的值计算新的值
        mutations：所有对state的修改操作都需要定义在这里，不支持异步，可以通过$store.commit()触发
        actions：定义对state的复杂修改操作，支持异步，可以通过$store.dispatch()触发。注意不能直接修改state，只能通过mutations修改state。
        modules：定义state的子模块

环境配置

基础概念

文件结构

🚀src/assets/静态资源文件夹

🚀src/components/ —— 公共组件文件夹

🚀src/router/ —— 路由配置文件夹

🚀src/store/ —— Pinia 状态管理文件夹

🚀src/views/ —— 页面视图文件夹（迁移 JSP 的主力战场）

🚀src/App.vue —— 根组件

🚀src/main.ts（或 main.js） —— 项目入口文件

代码

🚀`src/assets/`静态资源文件夹

🚀`src/components/` —— 公共组件文件夹

🚀`src/router/` —— 路由配置文件夹

🚀`src/store/` —— Pinia 状态管理文件夹

🚀`src/views/` —— 页面视图文件夹（迁移 JSP 的主力战场）

🚀`src/App.vue` —— 根组件

🚀`src/main.ts（或 main.js）` —— 项目入口文件