JavaWeb前端工程化以及环境配置和Vue项目开发流程

概念

第一阶段：前端最早期的只是HTML、CSS、JS(此时只是前端发展的一个雏形，【JS】还没有模块化的概念)，随着页面发展我们发现一个页面引入太多JS脚本，将大大增加维护成本；
第二阶段：已经出现了模块的概念，会按照模块的概念进行拆分，我们如何拆分模块，如何放置这些模块？此时已经有了一个工程化的概念；
第三个阶段：模块已经划分出来，但是我们部署的时候还是想合并在一起，就涉及到了早起的打包处理；
第四个阶段：前端进一步复杂之后，前端需要承载的功能更多了，逐步开始进行前后端分离，前端也可以独立的开发了。此时前端也出来了一些新的概念，比如说：SPA、Angular、Vue等。此时就要开始考虑路由如何规划？开发时如何调试？开发完如何构建？构建完如何发布？这一切的东西才构成了前端工程化的概念。

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

前端开发采用html，css，javascript语言，这些都会基于vue框架进行使用，所以我们要对此进行环境配置。

环境配置

配置环境依赖NodeJs

Vue-cli是Vue官方提供的脚手架，可以用来快速生成一个Vue的项目模版，提供了统一的目录结构，本地调试、热部署、单元测试、集成打包上线，我们要配置它的依赖环境。

进入官网下载：下载入口

点击绿色按钮，得到node-v20.15.1-x64.msi文件（可能会经过版本更新变的不同），之后双击msi文件开始配置。在之后的配置过程中，你仅仅需要更改安装的目录（因为默认安装路径是C盘，并不建议安装在c盘），其他的都不要动，只需要点next。在完成所有操作之后，开始验证：

win+R

打开命令行窗口，输入指令：

node -v

 

说明环境安装成功。

配置npm的全局安装路径

点击以管理员身份运行

npm config  set prefix "D:\Nodejs-environment"

后面那个是安装nodejs的目录路径，每个人的都不同，之后进行验证：

切换npm的淘宝镜像：（可忽略，但是下载后安装速度会变快）

npm config set registry https://registry.npmmirror.com

 注意：原域名“https://registry.npm.taobao.org/“已于2022年6月30日停止服务

切换完成之后安装vue-cli：

npm isntall  -g @vue/cli

接下来验证：

安装完成！如果不切换淘宝源的话，需要安装大约几分钟的时间。

Vue项目及开发流程

下载vue

打开命令行（win+R）：

npm  install vue -g

如果出现以下情况：

是因为当前用户没有这个权限，不要慌，

网上有些方法是删除C:\Users\用户名\下的.npmrc文件，万万不可这样，因为那个文件删除了，我们前面修改的全局模块目录和缓存目录配置就没了！！！到时候vue包就下载到C:\Users\你的用户名\AppData\Roaming\npm去了，也就是默认的地方去了，那我们前面修改就没意义了。

正确的打开方式是，用管理员身份运行呗！

安装webpack模板

npm install webpack -g

 

此外，在webpack 4x以上，webpack将命令相关的内容都放到了webpack-cli，所以还需要安装webpack-cli

npm install webpack-cli -g

 

安装脚手架vue-cli

记住，全部都是在管理员身份下的命令行操作！

npm install vue-cli -g

npm install vue-router -g

开始查验是否都安装成功了：

 进入这个文件，这个文件夹位于当初你安装nodejs时的文件夹下面，

 

要有如上的这些文件夹！

创建vue-cli应用程序

创建项目（最好在cd到D盘、E盘的某个位置，即项目的路径，否则项目会新建在C:\Users\用户名\，也可以直接在想要的项目路径下输入cmd）可能会出现权限问题，所以我们还是以管理员运行cmd窗口。

创建一个基于webpack模板的vue应用程序

 vue init webpack 项目名

根据自己的需求来操作。

• 项目名是？回车
• 项目描述？回车
• 作者？回车
• 是否安装编译器 回车
• 是否安装vue-router  回车
• 是否使用ESLint做代码检查  回车
• 是否安装单元测试工具  回车
• 单元测试相关  回车
• 创建完成后直接初始化 回车

因为没有自动初始化，我们按照代码提示手动初始化

cd myvue
npm run dev

创建完成，复制最后的网址进入电脑浏览器访问。

http://localhost:8080：

http:// 表示http协议
localhost: 表示服务器ip，通过服务器的地址,就可以定位访问网络中的哪一台服务器(通俗理解,通过localhost找到网络中对应的服务器)
8080 表示端口号，由端口号决定访问服务器的那个程序(Tomcat服务器)