5 前端系统开发：Vue2、Vue3框架（中）：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对象，键和值相同，可以简写为routerrender: 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>

下面解释一下这个模版，主要理解一下那个父组件传递数据给子组件的机制，采用的是v-bind指令