“一条龙”创建部署前端项目（vue-cli+vue-router+axios+ElementUI+Nginx）

最新推荐文章于 2024-05-31 18:39:49 发布

佛系菜狗

最新推荐文章于 2024-05-31 18:39:49 发布

阅读量154

点赞数

分类专栏：跟着黑马学javaweb课程文章标签：前端 vue nginx elementui

本文链接：https://blog.csdn.net/m0_58355897/article/details/134719395

版权

跟着黑马学javaweb课程专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Javaweb（含SSM框架）

2023.11.30

第一天前端部分（html+css+js+vue+Element+Nginx）

一、工程化vue项目流程（vue-cli+vue-router+axios+ElementUI+Nginx）

用vue-cli脚手架初始化vue项目：创建空白文件夹，在对应文件夹下进入cmd，输入 vue ui命令进行相关配置创建

（选择导入vue-router插件）

vue项目结构如下：

index.html:默认首页

main.js:入口文件

src/router/index.js:定义路由表

.vue:组件文件（<template>、<script>、<style>）

不怎么操作index.html、main.js，主要操作的是.vue

通过vue.config.js修改端口号，避免与后端8080端口冲突
```
devServer: {

  port: 7070

 }
```
使用ElementUI的组件库
- 项目下安装 npm install element-ui@2.15.3(在node_modules里)
- 在main.js这个入口js文件中引入ElementUI的组件库，其代码如下：
```
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
```
- 直接在.vue文件里使用即可，再在App.vue根组件引入即可显示
  
  eg：
  
  ElementView.vue
  
  在App.vue的<template>里添加<element-view></element-view> （VSCode会自动补全<script>里的引用代码）
使用axios发送ajax异步请求，异步加载数据
- 安装axios: npm install axios
- 需要使用axios时，导入axios: import axios 'axios'

使用vue-router路由

安装vue-router插件npm install vue-router@3.5.1

在src/router/index.js文件中定义路由表

eg:

const routes = [
  {
    path: '/emp',  //地址hash
    name: 'emp',
    component:  () => import('../views/tlias/EmpView.vue')  //对应的vue组件
  },
  {
    path: '/dept',
    name: 'dept',
    component: () => import('../views/tlias/DeptView.vue')
  },
  {
    path: '/',
    redirect:'/emp' //表示重定向到/emp即可
  },
]

链接到路由（类似超链接效果，此时只对应url地址）

  <router-link to="/dept">部门管理</router-link>
  <router-link to="/emp">员工管理</router-link>

动态显示对应组件

在内容展示区域即App.vue中定义<router-view>，作为组件的切换

启动项目npm run serve
打包npm run build到dist文件夹
使用Nginx部署
- 将打包的前端工程dist目录下得内容拷贝到nginx的html目录下
- 双击nginx下得nginx.exe文件来启动nginx
- nginx服务器的端口号是80，所以启动成功之后，我们浏览器直接访问http://localhost:80 即可(80端口可以省略)
- 前端工程发布成功
  
  如果80端口被占用，在cmd里用netstat -ano | findStr 80查找哪个进程占用该端口（能关就关），不能动的话需要通过conf/nginx.conf配置文件来修改端口号
- 关闭Nginx
  
  nginx -s stop
  
  nginx -s quit （1）这两个关闭方法是比较常用的两种，使用这两个命令时必须要在安装包路径下，否则系统无法找到Nginx；（2）这两个命令的区别在于nginx -s stop是快速停止Nginx，而nginx -s quit是有序的停止Nginx，前者可能会导致数据没有完全保存；
  
  taskkill /F /IM nginx.exe > nul 这种方法可以直接在cmd命令面板上使用，不必跑到Nginx的安装包下运行
  
  (当前两种方法无法奏效时可以尝试使用此方法，前两种方法适用于大部分版本的Nginx，但是个别版本的可能不使用)
  
  一些思考：
  
  1.
  
  用vue-cli创建vue前端项目（热部署——可以即存即更新无需重启服务；自供vue-router可以转到路由），
  
  整合axios（封装简化ajax，实现异步通信、局部数据的刷新——即用户在等待部分数据刷新时，页面其他部分不受影响且仍可操作）、ElementUI（前端之光，各种组件封装好直接拿来用，从布局到好看的按钮、表单一应俱全），
  
  最后打包部署到Nginx服务器（启动Nginx服务后就在后台一直运行服务了，可随时在浏览器上访问项目，感觉跟不部署运行的区别就是不需要一直开着VSCode而已）。
  
  思考到了很多，前端虽然之前也学过不少，但也都只是片段的、不够系统和全面，如今算是登高望远知道了这些工具及承担的作用。
  
  2.
  
  部署到nginx服务器上只是在本地可查看网址项目，要是想别人在公网上也能访问到自己的项目两种方法。
  - 买个云服务器上传部署项目，买个域名啥的，不过挺麻烦的就是了（因为要备案什么的）
    
    之前一直不明白云服务器不也是服务器？就跟我自己的本地电脑一样？只不过能一直开着机运行项目罢了。现在才知道做好相关配置部署后可以实现关机仍运行服务这个本地个人电脑都能做到，关键是因为人家是公网服务器......我是这么理解的，不一定对哈。
  - 内网穿透，很多这方面的软件之类的可以用，能直接把本地项目内网ip透射到公网一个它提供的公网ip，挺方便的。