早期前后端混合开发，沟通成本高，分工不明确，不便管理，不便维护扩展
当前主流的开发模式为前后端分离，通过接口文档
前后端分离开发
前端根据接口文档传输参数根据响应数据解析，后端根据接口文档接收参数并响应
开发流程：需求分析->接口定义 (API 接口文档)->前后端并行开发 (遵守规范)->测试->前后端联调测试
在接口开发完成前可以用 YApi 进行测试
前端工程化
指在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化
- 模块化：JS、CSS
- 组件化：UI 结构、样式、行为
- 规范化：目录结构、编码、接口
- 自动化：构建、部署、测试
Vue 脚手架
Vue-cli 是 Vue 官方提供的一个脚手架，用于快速生成一个 Vue 的项目模板，需要 NodeJS
Vue-cli 提供了如下功能：
- 统一的目录结构
- 本地调试
- 热部署：修改代码后无需重新运行，就可以加载最新程序
- 单元测试
- 集成打包上线
NodeJS
官网安装，配置 npm 包位置
1
2
3
npm config set prefix "path"
# 获取位置
npm config get prefix
切换 npm 的淘宝镜像
1
npm config set registry https://registry.npm.taobao.org
安装 Vue-cli
1
npm install -g @vue/cli
确认是否安装成功
1
vue --version
Vue 项目
有命令行和图形化界面两种
1
2
3
4
# 命令行
vue create project-name
# 图形化界面
vue ui
目录结构
根目录：
- node_modules：存放整个项目的依赖包
- public：项目静态文件
- src：项目源代码
- package.json：模块基本信息，项目开发所需要模块，版本信息
- vue.config.js：保存 vue 配置的文件，如代理、端口的配置等
src 文件夹目录
- assets：静态资源
- components：可重用的组件
- router：路由配置
- views：视图组件 (页面)
- App.vue：入口页面 (根组件)
- main.js：入口 js 文件
运行项目
使用 VS Code 可以直接在底部运行
命令行运行
1
npm run serve
更改端口
在 vue.config.js 文件
1
2
3
4
5
6
7
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
port: 7589 // 端口号
}
})
开发流程
入口文件为 src/main.js，以下是默认
1
2
3
4
5
6
7
8
9
10
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App) // 将导入的App创建虚拟元素
}).$mount('#app') // 挂载到#app
上述有 import 关键字代表导入组件，与之相对有 export 代表导出组件
上述 Vue 对象代码类似
1
2
3
4
5
6
new Vue({
el: "#app",
// router: router,
router, // 当值与键相同可省略
render: h => h(App)
})
Vue 的组件文件以 .vue 结尾，每个组件由三个部分组成：<template, script, <style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
<div>
<!-- HTML标签 -->
</div>
</template>
<script>
// JS
export default{
data(){
return{
// 数据模型
}
},
methods:{
// 方法
}
}
</script>
<style>
/* CSS */
</style>