Element组件案例 Vue路由 前端打包部署步骤

已于 2023-10-10 17:30:51 修改
阅读量506 收藏 4
点赞数
分类专栏： 前端 文章标签： 前端 vue.js javascript
于 2023-10-10 17:23:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43739821/article/details/133280922
版权

目录

Element组件案例

案例需求与分析

1. 制作类似格式的页面,即上面是标题，左侧栏是导航，右侧是数据展示区域
2. 右侧需要展示搜索表单
3. 右侧表格数据是动态展示的，数据来自于后台
4. 实际示例效果如下图所示

在这里插入图片描述

数据使用yapi测试接口。

由上图可以看出，整个页面可以分为3个部分，主要步骤如下：

1. 创建页面，完成页面的整体布局规划
2. 然后分别针对3个部分进行各自组件的具体实现
3. 针对于右侧核心内容展示区域，需要使用异步加载数据，以表格渲染数据

环境搭建

在views目录下创建 tlias/EmpView.vue这个vue组件，并且编写组件的基本模板代码，App.vue这个组件之前是引入了element-view这个组件，此时我们需要修改成引入emp-view这个组件。

在这里插入图片描述

整体布局

抄ElementUI组件：

在这里插入图片描述

<!-- style设置最外层容器高度为700px,在加上一个很细的边框 -->
<el-container style="height: 700px; border: 1px solid #eee">
  <el-header>Header</el-header>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-main>Main</el-main>
  </el-container>
</el-container>

顶部标题

修改顶部的文本内容，并且提供背景色的css样式

<el-header style="font-size:40px;background-color: rgb(238, 241,
246)">tlias 智能学习辅助系统</el-header>

在这里插入图片描述

左侧导航栏

继续抄刚刚上述布局组件中提供的案例：

在这里插入图片描述

搬运代码，然后做简单修改即可

在这里插入图片描述

此时整体代码如下：

<div>
<!-- 设置最外层容器高度为700px,在加上一个很细的边框 -->
<el-container style="height: 700px; border: 1px solid #eee">
    <el-header style="font-size:40px;background-color: rgb(238, 241, 246)">tlias 智能学习辅助系统</el-header>
    <el-container>
        <el-aside width="200px">
             <el-menu :default-openeds="['1']">
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-message"></i>系统信息管理</template>
                  
                    <el-menu-item index="1-1">部门管理</el-menu-item>
                    <el-menu-item index="1-2">员工管理</el-menu-item>
                  
                </el-submenu>
             </el-menu>
        </el-aside>
        <el-main>
          
        </el-main>
    </el-container>
</el-container>
</div>

在这里插入图片描述

核心-右侧导航栏

根据实际示例效果，右侧显示的是表单、表格还有分页栏。

在这里插入图片描述

表格编写

表格的制作，我们同样在官方直接找表格组件，也可以直接通过我们上述容器组件中提供的案例中找到表格相关的案例：

在这里插入图片描述

然后找到表格的代码，复制到我们布局容器的主题区域，修改表格，添加列，并且修改列名。

<el-table :data="tableData">
	<el-table-column prop="name" label="姓名" width="180"></el-table-column>
	<el-table-column prop="image" label="图像" width="180"></el-table-column>
	<el-table-column prop="gender" label="性别" width="140"></el-table-column>
	<el-table-column prop="job" label="职位" width="140"></el-table-column>
	<el-table-column prop="entrydate" label="入职日期" width="180"></el-table-column>
	<el-table-column prop="updatetime" label="最后操作时间" width="230"></el-table-column>
	<el-table-column label="操作" >
	    <el-button type="primary" size="mini">编辑</el-button>
	    <el-button type="danger" size="mini">删除</el-button>
	</el-table-column>
</el-table>

然后在data里return一个空的tableData:

<script>
export default {
    data() {
        return {
        tableData:[]
        }
    },
};
</script>

在这里插入图片描述

需要注意的是，我们列名的prop属性值的内容并不是乱写的，因为我们将来需要绑定后台的数据的，所以如下图所示：

在这里插入图片描述



表单编写

在表格的上方，还需要如下图所示的表单：

在这里插入图片描述

去ElementUI官网，在表单组件中找到与之类似的示例，加以修改

在这里插入图片描述

在这里插入图片描述

直接拷贝代码到主体区域的table组件的上方即可

<!-- 表单 -->
<el-form :inline="true" :model="searchForm" class="demo-form-inline">
    <el-form-item label="姓名">
        <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
    </el-form-item>
    <el-form-item label="性别">
        <el-select v-model="searchForm.gender" placeholder="性别">
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="2"></el-option>
        </el-select>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
</el-form>

data() {
    return {
      tableData: [],
      searchForm: {
        name: "",
        gender: "",
      },
    };
},
methods: {
    onSubmit: function () {
      console.log(this.searchForm);
    },
},

表单的提交按钮，绑定了onSubmit函数，所以我们还需要在methods中定义onSubmit函数

效果：

请添加图片描述

可以发现我们还缺少一个时间，所以可以从elementUI官网找到日期组件，如下图所示

在这里插入图片描述

参考官方代码，然后在我们之前的表单中添加一个日期表单：

<el-form-item label="入职日期">
        <el-date-picker
                        v-model="searchForm.entrydate"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
        </el-date-picker>
 </el-form-item>

加了双向绑定，所以我们需要在data的searchForm中定义出来，需要注意的是这个日期包含开始日期和结束日期2个值，所以我们定义为数组，代码如下：

 searchForm:{
            name:'',
            gender:'',
            entrydate:[]
}

此时我们打开浏览器，填写表单，并且点击查询按钮，查看浏览器控制台，可以看到表单的内容，效果
如下图所示：

在这里插入图片描述

到此为止完整代码：

<template>
  <div>
    <!-- 设置最外层容器高度为700px,在加上一个很细的边框 -->
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
        >tlias 智能学习辅助系统</el-header
      >
      <el-container>
        <el-aside width="200px">
          <el-menu :default-openeds="['1']">
            <el-submenu index="1">
              <template slot="title"
                ><i class="el-icon-message"></i>系统信息管理</template
              >

              <el-menu-item index="1-1">部门管理</el-menu-item>
              <el-menu-item index="1-2">员工管理</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <!-- 表单 -->
          <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="姓名">
              <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-select v-model="searchForm.gender" placeholder="性别">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="入职日期">
              <el-date-picker
                v-model="searchForm.entrydate"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>
		  <!-- 表格 -->
          <el-table :data="tableData">
            <el-table-column
              prop="name"
              label="姓名"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="image"
              label="图像"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="gender"
              label="性别"
              width="140"
            ></el-table-column>
            <el-table-column
              prop="job"
              label="职位"
              width="140"
            ></el-table-column>
            <el-table-column
              prop="entrydate"
              label="入职日期"
              width="180"
            ></el-table-column>
            <el-table-column prop="updatetime" label="最后操作时间" width="230">
            </el-table-column>
            <el-table-column label="操作">
              <el-button type="primary" size="mini">编辑</el-button>
              <el-button type="danger" size="mini">删除</el-button>
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      searchForm: {
        name: "",
        gender: "",
        entrydate: [],
      },
    };
  },
  methods: {
    onSubmit: function () {
      console.log(this.searchForm);
    },
  },
};
</script>

<style>
</style>



分页工具栏编写

分页条我们之前做过，所以我们直接找到之前的案例，复制即可

<!-- Pagination分页 -->
<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  background
  layout="sizes,prev, pager, next,jumper,total"
  :total="1000"
>
</el-pagination>

同时methods中需要声明2个函数，代码如下：

handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },

此时效果：

在这里插入图片描述




异步数据加载

异步加载数据

对于案例，我们只差最后的数据了,数据使用该地址作为测试。

使用axios发送ajax请求。
在vue项目中，对于axios的使用，分为如下2步：

1. 安装axios: npm install axios
2. 需要使用axios时，导入axios: import axios 'axios'

接下来我们先来到项目的执行终端，然后输入命令，安装axios

在这里插入图片描述

然后重启项目，来到我们的EmpView.vue组件页面，通过import命令导入axios

那么我们什么时候发送axios请求呢？页面加载完成，自动加载，所以可以使用之前的mounted钩子函数，并且我们需要将得到的员工数据要展示到表格，所以数据需要赋值给数据模型tableData，所以我们编写如下代码：

mounted() {
    axios
      .get("https://mock.apifox.cn/m1/3128855-0-default/emp/list")
      .then((resp) => {
        this.tableData = resp.data.data; //响应数据赋值给数据模型
      });
  },

此时浏览器打开，呈现如下效果：

在这里插入图片描述

但是很明显，性别和图片的内容显示不正确，所以我们需要修复。

性别展示修复

来到ElementUI提供的表格组件，找到如下示例：

在这里插入图片描述

我们仔细对比效果和功能实现代码，发现其中涉及2个非常重要的点：

<template> : 用于自定义列的内容
slot-scope: 通过属性的row获取当前行的数据

所以接下来，我们可以通过上述的标签自定义列的内容即可，修改性别列的内容代码如下：

<el-table-column prop="gender" label="性别" width="140">
  <template slot-scope="scope">
  {{scope.row.gender==1?"男":"女"}}
  </template>
</el-table-column>

此时打开浏览器发现性别一列的值修复成功。

图片展示修复

图片内容的修复和上述一致，需要借助<template>标签自定义列的内容，需要需要展示图片，直接借助<img>标签即可，并且需要设置图片的宽度和高度，所以直接修改图片列的代码如下：

<el-table-column prop="image" label="图像" width="180">
  <template slot-scope="scope">
    <img :src="scope.row.image" width="100px" height="70px" />
  </template>
</el-table-column>

最终效果：

在这里插入图片描述

最终代码如下：

<template>
  <div>
    <!-- 设置最外层容器高度为700px,在加上一个很细的边框 -->
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
        >tlias 智能学习辅助系统</el-header
      >
      <el-container>
        <el-aside width="200px">
          <el-menu :default-openeds="['1']">
            <el-submenu index="1">
              <template slot="title"
                ><i class="el-icon-message"></i>系统信息管理</template
              >

              <el-menu-item index="1-1">部门管理</el-menu-item>
              <el-menu-item index="1-2">员工管理</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <!-- 表单 -->
          <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="姓名">
              <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-select v-model="searchForm.gender" placeholder="性别">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="入职日期">
              <el-date-picker
                v-model="searchForm.entrydate"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>
          <!-- 表格 -->
          <el-table :data="tableData">
            <el-table-column
              prop="name"
              label="姓名"
              width="180"
            ></el-table-column>
            <el-table-column prop="image" label="图像" width="180">
              <template slot-scope="scope">
                <img :src="scope.row.image" width="100px" height="70px" />
              </template>
            </el-table-column>

            <el-table-column prop="gender" label="性别" width="140">
              <template slot-scope="scope">
                {{ scope.row.gender == 1 ? "男" : "女" }}
              </template>
            </el-table-column>

            <el-table-column
              prop="job"
              label="职位"
              width="140"
            ></el-table-column>
            <el-table-column
              prop="entrydate"
              label="入职日期"
              width="180"
            ></el-table-column>
            <el-table-column prop="updatetime" label="最后操作时间" width="230">
            </el-table-column>
            <el-table-column label="操作">
              <el-button type="primary" size="mini">编辑</el-button>
              <el-button type="danger" size="mini">删除</el-button>
            </el-table-column>
          </el-table>
          <!-- Pagination分页 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
            layout="sizes,prev, pager, next,jumper,total"
            :total="1000"
          >
          </el-pagination>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      tableData: [],
      searchForm: {
        name: "",
        gender: "",
        entrydate: [],
      },
    };
  },
  methods: {
    onSubmit: function () {
      console.log(this.searchForm);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
  mounted() {
    axios
      .get("https://mock.apifox.cn/m1/3128855-0-default/emp/list")
      .then((resp) => {
        this.tableData = resp.data.data; //响应数据赋值给数据模型
      });
  },
};
</script>

<style>
</style>




Vue路由

我们希望基于4.4案例中的功能，实现点击侧边栏的部门管理，显示部门管理的信息，点击员工管理，显示员工管理的信息，效果如下图所示：

在这里插入图片描述

在这里插入图片描述

这就需要借助我们的vue的路由功能了。




Vue路由简介

前端路由：URL中的hash(#号之后的内容）与组件之间的对应关系，如下图所示：

在这里插入图片描述

当我们点击左侧导航栏时，浏览器的地址栏会发生变化，路由自动更新显示与url所对应的vue组件。

vue官方提供了路由插件Vue Router,其主要组成如下：

VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件
<router-link>：请求链接组件，浏览器会解析成<a>
<router-view>：动态视图组件，用来渲染展示与路由路径对应的组件

工作原理如下图所示：

在这里插入图片描述

VueRouter根据我们配置的url的hash片段和路由的组件关系去维护一张路由表;
然后我们页面提供一个组件,用户点击，发出路由请求;
接着我们的VueRouter根据路由请求，在路由表中找到对应的vue组件；
最后VueRouter会切换中的组件，从而进行视图的更新。



Vue路由入门

安装vue-router插件:

npm install vue-router@3.5.1

我们不需要，在创建vue项目时我们已经勾选了路由功能。
然后我们需要在src/router/index.js文件中定义路由表，根据其提供的模板代码进行修改，注意需要去掉没有引用的import模块，最终代码如下：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/emp',  //地址hash
    name: 'emp',
    component:  () => import('../views/tlias/EmpView.vue')  //对应的vue组件
  },
  {
    path: '/dept',
    name: 'dept',
    component: () => import('../views/tlias/DeptView.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

在main.js中，引入router功能：

在这里插入图片描述

将代码DeptView.vue拷贝到我们当前EmpView.vue同级：

<template>
    <div>
        <el-container  style="height: 700px; border: 1px solid #eee">
            <el-header style="font-size:40px; background-color: rgb(238, 241, 246)">tlias 智能学习辅助系统</el-header>
            <el-container>
                <el-aside width="230px" style="border: 1px solid #eee">
                    <el-menu :default-openeds="['1', '3']">
                        <el-submenu index="1">
                            <template slot="title"><i class="el-icon-message"></i>系统信息管理</template>
                            <el-menu-item index="1-1">
                                <router-link to="/dept">部门管理</router-link>
                            </el-menu-item>
                            <el-menu-item index="1-2">
                                <router-link to="/emp">员工管理</router-link>
                            </el-menu-item>
                        </el-submenu>
                        </el-menu>
                </el-aside>


                <el-main>
                    <!-- 表格 -->
                    <el-table :data="tableData" border>
                        <el-table-column prop="name" label="名称" width="250"></el-table-column>
                        <el-table-column prop="updatetime" label="最后操作时间" width="250"></el-table-column>
                        <el-table-column label="操作">
                            <el-button type="primary" size="mini">编辑</el-button>
                            <el-button type="danger" size="mini">删除</el-button>
                        </el-table-column>
                    </el-table>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [{
                id:1,
                name:"学工部",
                updatetime:"2010-01-01 12:00:00"
            },{
                id:2,
                name:"教研部",
                updatetime:"2010-01-01 12:00:00"
            },{
                id:3,
                name:"就业部",
                updatetime:"2010-01-01 12:00:00"
            },{
                id:4,
                name:"人事部",
                updatetime:"2010-01-01 12:00:00"
            },{
                id:5,
                name:"行政部",
                updatetime:"2010-01-01 12:00:00"
            }]
        }
    },
    methods: {
        
    }
}
</script>

<style>

</style>

路由基本信息配置好了，路由表已经被加载，此时我们还缺少2个东西，就是<router-lin>和<router-view>,所以我们需要修改2个页面（EmpView.vue和DeptView.vue）我们左侧栏的2个按钮为router-link,其代码如下：

<el-menu-item index="1-1">
  <router-link to="/dept">部门管理</router-link>
</el-menu-item>
<el-menu-item index="1-2">
  <router-link to="/emp">员工管理</router-link>
</el-menu-item>

然后我们还需要在内容展示区域即App.vue中定义route-view，作为组件的切换，其App.vue的完整代码如下：

<template>
  <div id="app">
    <!-- {{message}} -->
    <!-- <element-view></element-view> -->
    <!-- <emp-view></emp-view> -->
    <router-view></router-view>
  </div>
</template>

<script>
// import EmpView  './views/tlias/EmpView.vue'
// import ElementView  './views/Element/ElementView.vue'
export default {
  components: { },
  data(){
    return {
      "message":"hello world"
    }
  }
}
</script>
<style>

</style>

但是我们浏览器打开地址： http://localhost:7000/ ，发现一片空白，因为我们默认的路由路径是/,但是路由配置中没有对应的关系，所以我们需要在路由配置中/对应的路由组件，代码如下：

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

此时我们打开浏览器，访问http://localhost:7000 发现直接访问的是emp的页面，并且能够进行切换了:

请添加图片描述





打包部署

我们的前端工程开发好了，当我们需要发布，主要分为2步：

  1. 前端工程打包
  2. 通过nginx服务器发布前端工程

前端工程打包

我们直接通过VS Code的NPM脚本中提供的build按钮来完整，如下图所示，直接点击即可：

在这里插入图片描述

然后会在工程目录下生成一个dist目录，用于存放需要发布的前端资源，如下图所示：

在这里插入图片描述

部署前端工程

nginx介绍

nginx: Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。
niginx在windows中的安装是比较方便的，直接解压即可。所以我们在官网下载，将nginx-1.22.0.zip压缩文件拷贝到无中文的目录下，直接解压即可，如下图所示就是nginx的解压目录以及目录结构说明：

在这里插入图片描述

很明显，我们如果要发布，直接将资源放入到html目录中。

部署

将我们之前打包的前端工程dist目录下得内容拷贝到nginx的html目录下，如下图所示：

在这里插入图片描述

然后我们通过双击nginx下的nginx.exe文件来启动nginx

nginx服务器的端口号是80，所以启动成功之后，我们浏览器直接访问http://localhost:80 即可，其中80端口可以省略，其浏览器展示效果如图所示：

在这里插入图片描述

到此，我们的前端工程发布成功。

PS: 如果80端口被占用，我们需要通过conf/nginx.conf配置文件来修改端口号。如下图所示：

在这里插入图片描述

如果想查询哪个进场占用了80端口，可以在windows命令行输入以下命令:

netstat -ano / findstr 80

请添加图片描述

如图所示进程id4占用了80端口，打开任务管理器可以看到pid为4的是系统进程，那就需要更改端口号了。

请添加图片描述

最后,在nginx根目录下调用cmd，输入nginx -s quit关闭。

slh别学了
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【JaveWeb教程】（10）Web前端基础：Vue快速入门 一篇文章教你轻松搞定Vue路由与打包部署 附详细示例代码案例
01-07
【JaveWeb教程】（10）Web前端基础：Vue快速入门 一篇文章教你轻松搞定Vue路由与打包部署 附详细示例代码案例，这篇博文的案例，没有看这篇博文，下载下来也是没什么用。
vue-router 打包文件，路由懒加载、路由嵌套
weixin_44756893的博客
07-06 765
1.vue-router 打包文件 运行 npm run build打包文件，可生成dist文件夹 其中 app文件 是当前应用程序开发的所有代码，都在这个文件里面，（业务代码，自己手动写的代码） vendor（提供商，第三方）在项目中引用第三方的内容，如vue manifest：是为我们打包的代码（相互依赖）做低层支撑 2.vue-router 路由懒加载 当打包构建应用时，js包会变得非常大，影响页面加载。 可以将不同路由对应的组件分割成不同的代码块，当路由被访问的时候才加载对应的组件。就是将不同的路
vue设置路由模式为history，打包部署，并解决404问题
江湖人称小程的博客
09-20 795
vue设置路由模式为history，打包部署，并解决相关问题
初学Vue——打包部署Vue前端静态资源
m0_62780794的博客
03-11 624
nginx: Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。niginx在windows中的安装是比较方便的，直接解压即可。所以我们直接将资料中的nginx-1.22.0.zip压缩文件拷贝到无中文的目录下，直接解压即可，如下图所示就是nginx的解压目录以及目录结构说明：很明显，我们如果要发布，直接将资源放入到html目录中。
vue项目部署到服务器加路由使用history模式
Ang-l
06-01 5577
第一步：打包vue项目 npm run build vue项目下回出现一个dist文件夹 将打包好的dist文件夹移动到你的服务器中 安装nginx并启动 下载安装包 cd /usr/local (切换路径) wget http://nginx.org/download/nginx-1.6.2.tar.gz (选择一个比较稳定的版本下载即可，或者手动下载后，用xshell传到该目录下也行) 解压安装 tar -zxvf nginx-1.6.2.tar.giz -C /usr/local (local这
vue-cli ,vue2项目的完整搭建，新建，配置，路由配置，API封装，到打包上线
lin_s_c的博客
08-05 4666
发现当我重新开发一个项目的时候，偶尔会忘记某些步骤，所以做个整理便于以后查看！项目开始的时候当然是做技术选型，还有用什么框架啊，插件啊，都先设计好，这样在开发过程中也不会太曲折！ 项目搭建的过程，在本文中划分为6个部分 安装node，安装全局vue，安装vue-cli检查安装是否成功 因为个人习惯这里用vue2来举例，新建一个文件夹，进入到文件夹，命令行输入如下图所示：安装 进入项目：启动项目：浏览器打开： 这时候项目就新建完成啦～可以开始进行创作 附加：vue项目目录讲解 最常用的是esline配置
vue项目第七阶段
码化疼
10-26 631
###今日目标 1.完成项目优化 2.完成项目上线 ###1.项目优化 实现步骤： A.生成打包报告，根据报告优化项目 B.第三方库启用CDN C.Element-UI组件按需加载 D.路由懒加载 E.首页内容定制 ###2.添加进度条 给项目添加进度条效果，先打开项目控制台，打开依赖，安装nprogress 打开main.js，编写如下代码 //导入进度条插件 import NProgress ...
【打包vue前端项目】
m0_45991266的博客
06-29 1万+
实例项目是使用vue3+vite。对于vue项目进行打包,npm run build
Vue.js 如何进行打包部署
Java徐师兄的博客
06-06 1988
Vue.js 提供了一个简单、灵活的方式来构建用户界面。在开发完成后，需要对 Vue.js 应用程序进行打包部署，以便在生产环境中使用。在本文中，我们介绍了 Vue.js 中的打包部署以及如何进行打包部署。如果你是一个 Vue.js 开发者，并且还没有进行过打包部署，那么现在就是一个好时机来尝试一下吧！
Vue中如何进行打包与部署？
热门推荐
stormjun的博客
06-10 1万+
本文介绍了Vue中如何进行打包与部署，包括使用Webpack进行打包、使用Nginx进行部署和使用Docker进行容器化部署。这些方法都是常用的Vue应用程序的打包和部署方法，可以根据实际需要选择合适的方法进行部署。
vue-element-admin---打包
qq_40745468的博客
02-22 1062
如图所以，方块越大，说明该文件占用的文件越大，文件越大，对于网络带宽和访问速度的要求就越高，这也就是我们优化的方向。我们可以使用vue-cli本身提供的性能分析工具，对我们开发的所有功能进行打包分析。，hr是特定的前缀地址，此时我们可以配置一个base属性，配置为hr。： #后面是路由路径，特点是前端访问，#后面的变化不会经过服务器。：正常的/访问模式，特点是后端访问，任意地址的变化都会访问服务器。进行依赖分析，分析出最大的包，方便我们进行观察和优化。将打包好的代码打包上线，并在nodejs中代理跨域。
Vue项目如何打包并部署(nginx)
m0_67402774的博客
06-18 8583
我们常使用前后端分离项目时,会需要将前端vue打包然后部署。vue项目其实可以直接通过一下语句进行打包： 默认打包情况如下:当我们需要将打包名称以及静态资源位置进行修改时便需要进行相应的配置:1.首先在项目根目录下创建vue.config.js文件配置内容如下所示(附带跨域问题解决): 2.查看路由中(router/index.js)是否使用history,是的话修改为hash。或者将mode直接注掉，因为默认使用hash。 然后再次使用npm run build进行打包就会出现test文件夹,已经其中静态
Vue项目打包部署到iis服务器的配置方法
10-16
主要介绍了Vue项目打包部署到iis服务器的配置方法，文中通过代码示例给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue相同路由跳转强制刷新该路由组件操作
10-14
主要介绍了vue相同路由跳转强制刷新该路由组件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue前端项目部署IIS的实现
10-15
主要介绍了Vue前端项目部署IIS的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
浅谈Vue 自动化部署打包上线
10-15
主要介绍了浅谈Vue 自动化部署打包上线，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
【前端】数组的常用处理函数
lcukyNwa的博客
04-22 467
item------->每个元素值 (必)index----->索引（可选）arr-------- >当前数组（可选）推荐vscode的一款插件来写以下的demo，该插件可以直接在js文件中显示结果，搜 Quokka.js用这个插件去新建一个js文件，直接就运行在node上了forEach不会返回一个新的数组，里面改值会影响原数组，其他方法不影响原数组map可以返回新数组 用于映射，如每个元素都加倍或执行其他转换操作every返回一布尔值，需数组中全部满足。
SpringBoot项目打包分离高阶操作
最新发布
Record Little
04-23 668
虽然传输jar包 比较大，但是安全性、稳定性比较高，不需要关注pom.xml 添加了新的依赖、更新了版本号等等影响版本功能的操作。关注maven的特性， profiles即可满足， 根据不同的activation 状态，激活不同的build操作。每次修改一小部分代码或仅仅更新某个依赖jar包时，都需要重新进行整个项目的构建、打包、上传和部署。但是当你的项目趋于稳定，只有业务上的逻辑变更时，如果使用分离版本，可以加快迭代、更新的速度。弊端： 需要配置IDE命令，修改依赖时需要同时修改2处。
webman 事务回滚失效问题记录
juan9872的博客
04-21 834
webman是一款基于workerman开发的高性能HTTP服务框架。webman用于替代传统的php-fpm架构，提供超高性能可扩展的HTTP服务。你可以用webman开发网站，也可以开发HTTP接口或者微服务。除此之外，webman还支持自定义进程，可以做workerman能做的任何事情，例如websocket服务、物联网、游戏、TCP服务、UDP服务、unix socket服务等等。
如何在spring boot上部署vue，前端路由
03-24
非常感谢您的提问。要在Spring Boot上部署Vue，请按照以下步骤操作： 1. 首先，需要创建一个Vue项目，可以通过Vue-CLI或手动创建来完成。 2. 接下来，在Vue项目中使用Vue Router来设置前端路由。Vue Router提供了一种在单页面应用程序中管理导航的方式。 3. 在Vue项目中构建出前端页面和组件。这些页面和组件可以通过Vue Router进行管理和导航。 4. 将Vue项目打包，生成静态资源文件。可以使用Vue-CLI命令行工具打包，也可以手动通过Webpack等构建工具生成。 5. 将静态资源文件集成到Spring Boot应用程序中，可以将静态资源文件放置在Spring Boot的src/main/resources/static目录下，也可以通过配置Spring Boot资源处理器将静态资源文件引入。 希望以上回答能够帮助到您，如果您有更多的问题，请随时提出。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值