当前位置：首页 > article >正文

5 前端系统开发：Vue2、Vue3框架（中）：Vue前端工程化组件式开发

article 2025/2/5 18:07:56

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
五、前端工程化（使用Vue创建一个完整的企业级前端项目）
- 1 Vue脚手架（Vue-cli）环境准备
- - （1）安装NodeJS
- 2 Vue项目简介（创建）
- - （1）Vue项目创建
  - - 通过命令行创建（这个创建的比较简洁，有些自定义功能还是采用ui比较好）
    - 通过图形界面创建
  - （2）Vue项目目录介绍
- 3 Vue项目开发流程
- - （1）Vue项目结构代码解释

前言

五、前端工程化（使用Vue创建一个完整的企业级前端项目）

当前最为主流的开发模式:前后端分离
前端工程化: 是指在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。
- 模块化：JS、CSS
- 组件化：UI结构、样式、行为
- 规范化：目录结构、编码、接口
- 自动化：构建、部署、测试

1 Vue脚手架（Vue-cli）环境准备

介绍: Vue-cli 是Vue官方提供的一个脚手架，用于快速生成一个 Vue的项目模板。
Vue-cli提供了如下功能:
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
依赖环境: NodeJS

（1）安装NodeJS

Node.jsR是一个开源、跨平台的JavaScript运行时环境。其实就和java运行要安装jdk一样。

step1:下载nodejs：https://nodejs.org/zh-cn
我们下载一个长期稳定版本就可以了
正常安装就是了，注意下面这个不用勾选
step2:验证是否安装成功 node -v
可以看到版本号就成功了
step3:配置npm的全局安装路径
用管理员权限运行cmd,执行下面命令：后面的路径就是你前面安装的nodejs选择的安装目录
npm config set prefix “D:\frontDevelopment\nodeJs”
使用 npm config get prefix验证有没有设置成功
step4: 切换npm的镜像（加快资源的下载）
同样使用管理员权限执行下面命令
npm config set registry https://mirrors.huaweicloud.com/repository/npm/
这里镜像源有可能过期了，就去网上找最新的
step5: 安装Vue-cli
使用管理员身份运行命令行，在命令行中，执行如下指令：
npm install -g @vue/cli
step6:验证Vue-cli是否安装成功
vue --version
出现版本号就成功了
step7: 安装Vue的路由功能（先装上，后面会用上）
npm install vue-router

2 Vue项目简介（创建）

（1）Vue项目创建

创建Vue项目
选择你要将项目创建的所在目录打开cmd, 有两种创建方案
- 命令行：vue create 项目名
  注意项目名不能有大写字母
- 图形化界面：vue ui

通过命令行创建（这个创建的比较简洁，有些自定义功能还是采用ui比较好）

step1: 在你想要创建vue项目的目录使用管理员权限打开命令行界面，执行命令
vue create demo_vue_project
step2: 根据需求自行选择vue2或vue3

出现以下界面，项目创建成功：

创建成功后就可以在工作目录看到创建的项目文件夹了

step3: 使用Vscode打开刚创建的项目
step4: 启动vue项目，默认是8080端口
- 命令行：在创建的项目的这级目录下cmd执行下面命令
  npm run serve

直接Vscode里面启动服务
NPM脚本侧边栏没有解决方案：NPM侧边栏没有解决方案
npm：解决 “无法加载文件，因为在此系统上禁止运行脚本“ 问题
在这里插入图片描述

服务启动成功，我们使用URL来访问

step5: 端口切换
直接修改 vue.config.js这个配置文件即可

通过图形界面创建

step1: 在你想要创建vue项目的目录使用管理员权限打开命令行界面，执行命令
vue ui
打开图形化界面

在这里插入图片描述
创建完成（下面界面可以直接关闭了）

直接通过VScode打开，下面的过程就和上面使用命令行创建一样了

（2）Vue项目目录介绍

基于Vue脚手架创建出来的工程，有标准的目录结构，如下:

【注】：由于Vue的版本或者一些其他问题，命令行创建的router和views目录可能没有，图形化界面我们勾选了router插件所以就有了，所以更加推荐图形化界面创建Vue项目。

3 Vue项目开发流程

（1）Vue项目结构代码解释

index.html : 默认的首页入口html文件
该html文件默认导入的main.js文件
组件：在Vue中 .vue后缀的文件就是一个组件
这种组件理解成一个div块，里面定义了这个块的html，css样式，还有javaScript。这样就完美的封装成一个组件可以重复应用了
export default : 这是导出组件的语法，用这个修饰，在其他文件中就能使用 import导入这个 .vue组件对象（框架自动将这个.vue文件封装成一个组件实例化对象）

上面这些都是固定的,暂时不理解没有什么。下面我们会通过学习Element组件库来展示具体怎么使用，通过具体的练习才好理解。

main.js文件解析

import Vue from 'vue'                       // 导入vue库
import App from './App.vue'                 // 导入App.vue组件
import router from './router'               // 导入router文件夹下的index.js文件

Vue.config.productionTip = false             // 阻止显示生产模式的消息

new Vue({
  router,                                    // 注册路由,固定写法
  render: h => h(App)                        // 渲染App.vue组件 ， h是createElement函数,将App.vue组件对象转换为虚拟DOM对象挂载到html页面上 app元素上
}).$mount('#app') 

// 上面的代码等价于下面的代码

/* new Vue({
  el: '#app',
  router: router,        // 注册路由,根据导入的router文件夹下的index.js文件生成了一个router对象，键和值相同，可以简写为router
  render: h => h(App)    // 渲染App.vue组件 ， h是createElement函数,将App.vue组件对象转换为虚拟DOM对象挂载到html页面上 app元素上
}) */

.vue组件语法
- template : 里面写html
- style: 里面写 css样式
- script: 里面写之前Vue对象里面的数据模型、JS方法函数等等（具体案例演示）
- 各个vue组件之间是独立的，也就是说，不同Vue组件里面的元素id和class这些就算名字相同，不会冲突，各个组件只能管自己的事情。

之前数据模型和方法是这种写法：
在这里插入图片描述
现在在Vue模版里面变成下面这样了：

<template>
  <!-- 组件的模板部分 -->
  <div class="my-component">
    <!-- 组件的内容 -->
    <h1>{{ title }}</h1>
    <button @click="handleClick">Click Me</button>
  </div>
</template>

<script>
// 组件的逻辑部分
export default {
  name: 'MyComponent', // 组件名称（推荐使用大驼峰命名）
  props: {
    // 定义组件的 props（从父组件接收的数据）
    initialTitle: {
      type: String, // 类型校验
      default: 'Hello, Vue!' // 默认值
    }
  },
  data() {
    // 组件的内部状态
    return {
      title: this.initialTitle // 使用 props 初始化 data
    };
  },
  computed: {
    // 计算属性
    reversedTitle() {
      return this.title.split('').reverse().join('');
    }
  },
  watch: {
    // 监听器
    title(newTitle, oldTitle) {
      console.log(`Title changed from ${oldTitle} to ${newTitle}`);
    }
  },
  methods: {
    // 组件的方法
    handleClick() {
      this.title = 'Button Clicked!';
    }
  },
  // 生命周期钩子
  created() {
    console.log('Component created');
  },
  mounted() {
    console.log('Component mounted');
  }
};
</script>

<style scoped>
/* 组件的样式部分 */
/* 使用 scoped 属性将样式限制在当前组件内 */
.my-component {
  text-align: center;
  padding: 20px;
  font-family: Arial, sans-serif;
}

h1 {
  color: #42b983;
}

button {
  padding: 10px 20px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #369c6e;
}
</style>