文章目录

一、VUE环境搭建
二、创建VUE项目
- 1. 外部终端创建
- 2. IDea内部终端创建
- 3. 项目介绍
- 4. vue 的特别之处
三、添加前端开发插件依赖
四、前端开发流程
- 1. 创建组件与编码
- 2. 配置组件路由
- 3. 运行
五、前后端交互

提示：本文是VUE项目开发的流程梳理，是对本专栏博客的梳理

一、VUE环境搭建

搭建VUE环境，可参考vue环境搭建
下载使用yarn，可参考yarn的安装和使用

二、创建VUE项目

这里只介绍其中我所熟知的两种方式

1. 外部终端创建

在存储vue项目的目录，清除路径并输入cmd，回车，进入当前目录的命令行终端
创建vue项目
注意名称不可用大写英文
```
vue create demo_01
```
根据自己需要选择模式，这里我选择自定义模式
创建好的项目在IDea中打开即可

2. IDea内部终端创建

在IDea打开Termial，输入如下代码
```
vue create demo_01
```
选择模式，然后创建，创建完毕后，即可在左侧目录找到项目

3. 项目介绍

我们编程的内容主要在src文件夹中，目录介绍：

assets：用于存储页面显示的图片资源
components：views中的公共部分存储在此
router：存储路由信息，用于页面跳转
views：存储页面组件，是编程的重心
App.vue：个人理解就是普通首页，可以随意更改
main.js：整个vue项目的公共配置

4. vue 的特别之处

原始网页是Header+Body作为一个整体的开发，vue是将Header、Body作为单独组件分开开发，与封装的思路是一样的，所以现在不称为页面，称为组件。以前的衣服是一套一套地设计，外套、衬衫、裤子、鞋一起设计，成套的设计。vue是将外套、衬衫、裤子、鞋分开设计，然后再自由组合成一套衣服。

三、添加前端开发插件依赖

打开vue项目，进入外部/内部终端，下载element
下载完成后即可在package.json中查看

修改公共配置文件main.js

import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
// 引入依赖
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'var app=createApp(App)// 使用ElementPlus
app.use(ElementPlus)app.use(router).mount('#app')

四、前端开发流程

1. 创建组件与编码

在views目录下创建组件
可创建文件夹进行分类管理

对组件进行编码

标签	作用
template	可理解为Body部分，但template只能放置一个控件，如果需要放置多个控件，可以嵌套放在div控件中
script	JS脚本的部分
tyle	编写样式部分

<!--写页面内容的部分，与Body类似-->
<template><div id="container"><h5>我的第一个组件</h5><button>点击我看看</button></div>
</template><!--写JS脚本-->
<script>export default {// 组件命名，必须存在name: "UserReg"}
</script><!--编写样式的-->
<style scoped></style>

2. 配置组件路由

引入组件

//先引入编写好的组件
import HomeView from '../views/HomeView.vue'
import UserReg from "@/views/users/UserReg";
import Hello from "@/views/Hello/Hello";
import Main from "@/views/main/Main";

配置路由

//  配置路径、名称、组件
const routes = [{path: '/',name: 'home',component: HomeView},{path: '/about',name: 'about',// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')},{path:'/userReg',name:'/UserReg',component:UserReg},{path:'/hello',name:'/Hello',component:Hello},{path:'/main',name:'/Main',component:Main}
]

完整代码

import { createRouter, createWebHistory } from 'vue-router'
//先引入编写好的组件
import HomeView from '../views/HomeView.vue'
import UserReg from "@/views/users/UserReg";
import Hello from "@/views/Hello/Hello";
import Main from "@/views/main/Main";//  配置路径、名称、组件
const routes = [{path: '/',name: 'home',component: HomeView},{path: '/about',name: 'about',// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')},{path:'/userReg',name:'/UserReg',component:UserReg},{path:'/hello',name:'/Hello',component:Hello},{path:'/main',name:'/Main',component:Main}
]const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes
})export default router

3. 运行

Termial上运行vue，点击链接即可

注意，vue支持热部署，在vue启动期间，如果文件发生改变，vue无需重新启动，刷新页面即可

五、前后端交互

这里参考我的另一个博客，不再赘述VUE前后端分离之数据交互（简单项目作为演示）

VUE项目开发的完整流程相关推荐

【一个项目开发的完整流程】
一个软件项目的开发主要包括5个阶段: 需求分析阶段.设计阶段.编码阶段.测试阶段.维护阶段. 以航空订票管理系统为例: 1.项目开发团队成员分工: A.负责系统美工.撰写系统设计规划书.用户使用手册: ...
软件项目开发的完整流程
APP早已与我们的生活息息相关,一款APP从开发到上线需要哪些步骤,开发一个APP要多长时间,今天和大家分享一下完整的开发流程.北京木奇移动技术有限公司,专业的软件外包开发公司,欢迎交流合作. 1.需 ...
华为手表开发：WATCH 3 Pro（3）创建项目以及运行完整流程
华为手表开发:WATCH 3 Pro(3)创建项目以及运行完整流程初环境与设备创建项目创建项目入口配置项目运行项目报错需要在 Appgallery Connect , 创建项目,然后在 ...
请问单片机开发的完整流程
单片机开发的完整流程包括以下几个步骤: 需求分析:明确项目的目标,确定系统功能要求和性能指标. 硬件设计:根据需求分析的结果,设计系统的硬件结构,并选择合适的单片机芯片. 程序设计:根据硬件设计的结果 ...
vue项目开发实录--仿去哪儿网App-张鹏-专题视频课程
vue项目开发实录--仿去哪儿网App-160人已学习课程介绍本课程为vue项目开发实录(仿去哪儿网App)其中涉及到知识点有:组件搭建,路由,vuex,axios,webpack ...
【vue】 vue项目开发卡片展示页面----菜品管理
vue项目开发卡片展示页面----菜品管理对话框表单获取父组件数据子组件dishform 对话框表单样式 methods 中的dataInit方法获取父组件传来的数据 <script> ...
用 cooking 搭建一个简单又优雅的 Vue 项目开发环境 (入门篇)
本文适合 Vue 的初学者,以及对 webpack 不熟悉的同学阅读.前提是你要会用基本的命令行. Node 和 NPM,以及掌握 ES2015 的基础知识.本文都是在 macOS 环境下运行,要求使 ...
微信小程序开发的完整流程介绍，新手必读
自从跳一跳小程序游戏出现后,一夜之间,小程序就变得家喻户晓了,功能开发也越来越丰富,在微信搜一搜就会发现许多大品牌早已有自己的小程序了,越来越多的企业和商家都看中了这个风口,想快速开发出一款属于自己的 ...
Win10 + VSCode踩坑 + vue项目开发：设置vscode终端为管理员权限
win10系统如何设置vscode的终端为管理员权限? 一次一次的授权太麻烦! 这里直接更改授权为管理员运行即可. 操作与设置步骤: "桌面找到"VSCode"程序图标 ...
Vue项目开发中使用路由懒加载
Vue项目开发中使用懒加载一.使用路由懒加载的好处当打包项目时,JavaScript包会变的非常大,影响页面加载,要是通过把不同的路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应 ...

VUE项目开发的完整流程