前端(五):前端工程化

前端工程化是指在企业级的前端开发项目中,把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。

一、环境准备

(一)环境准备

1、Vue-cli:是Vue官方提供的一个脚手架,用于快速生成一个Vue的项目模板。

2、Vue-cli提供的功能:统一的目录结构、本地测试、热部署、单元测试、集成打包上线。依赖环境:node.js

(二)node.js下载

地址(中文):https://nodejs.cn/download/

点击下载的文件,安装,修改安装位置,一直点next,直到install。

(三)验证node.js的环境变量

配置node.js的环境变量(安装好后会自动配置),验证node.js环境变量。

(四)配置npm全局安装路径

配置node.js的打包资源管理器npm的全局安装路径,"npm config set prefix "D:\javaSoftware\helpTools""

切换npm的淘宝镜像(为了后期的加速下载),如不成功可在网上搜索最新的淘宝镜像地址

java 复制代码
npm config set registry https://registry.npmmirror.com

(五)安装Vue-cli

java 复制代码
//安装
npm install -g @vue/cli
//判断是否安装成功
vue --version

二、Vue项目简介

(一)创建

java 复制代码
//方法一:通过命令行创建
vue create vue-project01
//方法二:图形化界面
vue ui

以下为图形化界面创建:

①在桌面创建一个Vue文件夹,进入文件夹cmd

②输入vue ui,回车(不要关闭控制面板!!!!)

③创建





回到命令提示符面板,回车一下(下载),显示project created 表示下载成功

此刻,Vue文件里面生成了vue-project01文件

在vscode中打开:

(二)Vue目录结构

①node_modules:整个项目的依赖包

②public:存放项目静态文件

③src:存放项目源代码

④package.json:模块基本信息,项目开发所需要模块,版本信息

⑤vue.config.js:保存vue配置的文件,如。代理、端口的配置等。

(三)启动vue项目

①方式一:命令行

java 复制代码
npm run serve

②图像化界面

设置完后重启vscode,并点击package.json。

运行成功:

③修改前端配置中的端口号,避免和tomcat端口号冲突

首先,停止当前服务,ctrl+c,输入Y

修改配置:

配置完成后再次启动:

相关推荐
喵叔哟1 分钟前
重构代码中引入外部方法和引入本地扩展的区别
java·开发语言·重构
狸克先生5 分钟前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互
尘浮生7 分钟前
Java项目实战II基于微信小程序的电影院买票选座系统(开发文档+数据库+源码)
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
baiduopenmap20 分钟前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish27 分钟前
小程序webview我爱死你了 小程序webview和H5通讯
前端
不是二师兄的八戒31 分钟前
本地 PHP 和 Java 开发环境 Docker 化与配置开机自启
java·docker·php
请叫我欧皇i40 分钟前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_42 分钟前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
爱编程的小生43 分钟前
Easyexcel(2-文件读取)
java·excel
guokanglun1 小时前
空间数据存储格式GeoJSON
前端