Home 简单Vue项目
Post
Cancel

简单Vue项目

早期前后端混合开发,沟通成本高,分工不明确,不便管理,不便维护扩展

当前主流的开发模式为前后端分离,通过接口文档

前后端分离开发

前端根据接口文档传输参数根据响应数据解析,后端根据接口文档接收参数并响应

开发流程:需求分析->接口定义 (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>
This post is licensed under CC BY 4.0 by the author.

博客运行时间

ElementUI