手把手教你如何把系统的前端页面改成vue 脚手架项目，实现前后端分离

第一步：检查node.js是否安装

第二步：配置npm源

第三步：安装vue-cli

第四步：创建vue项目

第五步：启动项目

第六步：整合静态资源

这篇文章从零开始，介绍怎么把现有的一个商城的页面移动到vue脚手架项目上，实现前后端代码的完全分离。

首先，我们需要新建一个vue的脚手架的项目，在此之前，需要安装node.js

打开IntelliJ IDEA或者win+R，输入cmd，打开dos命令窗口，使用cd命令切换到存放vue项目的根目录，比如：把vue项目放到D:/program/vue-workspace。当然了，首先我们要创建这个文件夹。

接下来演示在idea里面创建一个名为vue-project的vue-cli项目

第一步：检查node.js是否安装

npm -v

第二步：配置npm源

配置npm源的命令

npm config set registry https://registry.npm.taobao.org

由于淘宝的的镜像网站的https证书已经过期，已经无法访问，所以设置成下面的网址

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

配置成功后，可通过get命令可查看npm源

npm config get registry

第三步：安装vue-cli

安装vue-cli的命令

npm install -g @vue/cli

安装完成后，检验vue-cli是否安装成功，注意：这里的命令参数是大写字母的V

vue -V

第四步：创建vue项目

使用vue create命令创建，然后按回车（注意：只需要按一次回车键）

vue create vue-project

接下来，开始配置项目

step1：选择最后一个选项

step2：推荐在列表中选择Babel、Router、Vuex这3项，使用键盘的上下箭头移动，使用空格选中或取消选中，选择完成后按下键盘的Enter键到下一步

step3：选择vue版本，建议选择2.x版本

step4：接下来的选项是Use history mode for router，选择“是”，输入Y后按下键盘的Enter键到下一步

step5：接下来的选项是Where do you prefer placing config for Babel,ESLint,etc.?，表示“你习惯把一些配置信息存放在哪里?”，推荐选择In package.json，即存放在package.json文件中

step6：最后的选项是Save this as a preset for future projects?，表示“是否保存以上配置信息，作为后续将创建的新工程的预设?”，推荐选择“否”，输入N后按下键盘的Enter键 (提示信息中，N是大写的，表示它是默认选项，不输入N而直接按下Enter键是等效的)

step7：创建vue-cli项目了，只需要等待一段时间

第五步：启动项目

如上图，这时候已经创建完成了，在idea中打开刚刚新建的项目

项目默认通过8080端口启动，如果该端口被占用，则选择8081，以此类推，可以在package.json中指定项目启动的端口号，只需要修改package.json文件里的serve的值为

vue-cli-service serve --port 端口号

下图就是设置启动端口为8088

点击底部工具栏中的Teminal，输入以下命令：

npm run serve

看到下面的内容就是已经启动完成了

点击蓝色的链接就可以访问创建的项目了

当看到以上页面时，恭喜你，你已经成功创建了第一个vue脚手架项目了。

第六步：整合静态资源

首先介绍一下vue脚手架的项目结构

public目录相当于SpringBoot的静态资源目录，里面的文件可以直接访问。
asseets一般用来放项目的图片、样式文件、js文件等
components用来放提取出来的组件，其实就是vue文件
router里面放的是整个项目的路由配置的js文件
views存放我们写的页面，比如首页可以为IndexView.vue、HomeView.vue
App.vue就是我们的入口页面，打开看到的页面就是它

因为vue是单页面的应用，所有操作都是在一个页面上完成，而单页面是通过vue的路由完成的

我们打开App.vue，删除多余的内容，只留下一个路由。

删除多余的页面

删除之后编译会报错

因为路由里配置的页面找不到了，暂时不用管，打开我们原来的项目的页面。

如上图所示，项目一共有8个HTML文件，也就是8个页面，首先我们看一下这些页面都是什么样的

1、登录页面

2、超市首页

续-超市首页

3、购物车页面

4、用户中心页面

看完以上几张图片，估计很多人都会发现，除了登录页面，其他页面都有两个相似的部分，也就是页面上最上方和最下方的部分，并且每个页面都有相同的页脚。

所以我们把页脚抽出来，作为组件PageFooter.vue，注意：<template>标签内只能有一个<div>

页头也抽出来，作为组件PageHeader.vue

不要以为那么简单就完了，页头要加载用户的数据，根据返回的数据显示不同内容，所以，要把那块js的代码也复制过来，整个页面的代码如下

<template>
  <div class="header_con">
    <div class="header">
      <div class="welcome fl">欢迎来到天天生鲜!</div>

      <div class="fr">
        <div class="login_info fl" v-if="isLogin">
          欢迎您：<em>{{user.nickname}}</em>
          <span>&emsp;|&emsp;</span>
        </div>

        <div class="login_btn fl" v-if="!isLogin">
          <a href="/login">登录</a>

          <span>|</span>

          <a href="/register">注册</a>
        </div>

        <div class="user_link fl" v-else>
          <a href="/shop_cart">我的购物车</a>

          <span>|</span>

          <a href="/user_center">用户中心</a>

          <span>|</span>

          <a href="javascript:void(0)" @click="logout">退出登录</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {error, getData} from "@/assets/js/axiosUtis";

  export default {
    data() {
      return {
        isLogin: false, // 当前是否有用户登录
        user: {}, // // 当前登录的用户信息
      }
    },
    created: function () {
      let _this = this;

      // 获取登录的用户信息
      getData("/user/getlogin", {}
        , function (response) {
          _this.user = response.data;
          _this.isLogin = !!response.data;
        }, function (err) {
          error(err);
        }
      );
    },
    methods: {
      logout() {
        getData("/user/logout", {}
          , function (response) {
            if (response.data.code === 200) {
              location.href = "/login";
            } else {
              error(response.data.message);
            }
          }, function (err) {
            error(err);
          }
        );
      }
    },
    name: "PageHeader"
  }
</script>

<style>
  @import "../assets/css/reset.css";
  @import "../assets/css/main.css";
</style>

接下来，创建8个页面对应的视图，因为都是重复的操作，为了方便，选择购物车页面，把页面的<div id="app"></div>整个块复制到新建的视图ShopCartView.vue中，并删除id="app"。

复制之后把页头和页脚替换成刚刚创建的组件PageFooter和PageHeader，组件的使用很简单，直接当标签用就行了<组件名 />，组件名就是export块里name属性的值

<template>
  <div>
    <PageHeader />

    <div class="search_bar clearfix">
      <a href="/" class="logo fl">
        <img src="/images/logo.png" alt="" />
      </a>

      <div class="sub_page_name fl">|购物车</div>

      <div class="search_con fr">
        <input class="input_text fl" v-model="search" placeholder="搜索商品" />
        <input type="button" class="input_btn fr" value="搜索" @click="query" />
      </div>
    </div>

    <div class="total_count">全部商品<em>{{count}}</em>件</div>

    <ul class="cart_list_th clearfix">
      <li class="col01">商品名称</li>
      <li class="col02">商品单位</li>
      <li class="col03">商品价格</li>
      <li class="col04">数量</li>
      <li class="col05">小计</li>
      <li class="col06">操作</li>
    </ul>

    <ul class="cart_list_td clearfix" v-for="cart in carts">
      <li class="col01"><input type="checkbox" checked /></li>
      <li class="col02"><img :src="cart.product.image" alt="" /></li>
      <li class="col03">
        {{cart.product.name}}<br>
        <em>{{cart.product.price}}元/{{cart.product.unit}}</em>
      </li>
      <li class="col04">{{cart.product.unit}}</li>
      <li class="col05">{{cart.product.price}}元</li>
      <li class="col06">
        <div class="num_add">
          <a href="javascript:void(0)" class="add fl">+</a>
          <input class="num_show fl" v-model="cart.quantity" />
          <a href="javascript:void(0)" class="minus fl">-</a>
        </div>
      </li>
      <li class="col07">{{cart.money}}元</li>
      <li class="col08"><a href="javascript:void(0)" @click="del(cart.id)">删除</a></li>
    </ul>

    <ul class="settlements">
      <li class="col01">
        <input type="checkbox" checked />
      </li>
      <li class="col02">全选</li>
      <li class="col03">合计(不含运费)：
        <span>¥</span><em>{{total}}</em><br>
        共计<b>{{count}}</b>件商品
      </li>

      <!--购物车数量不为0时显示-->
      <li class="col04" v-if="count !== 0">
        <a href="/html/place_order.html">去结算</a>
      </li>
    </ul>

    <PageFooter />
  </div> 
</template>

<script>
  export default {
    name: "ShopCartView"
  }
</script>

<style scoped>

</style>

修改之后的页面是上面这样的，但是因为idea并不知道这两个标签<PageHeader />和<PageFooter />是什么意思，所以我们要通过引入这两个组件

<script>
  import PageHeader from "@/components/PageHeader";
  import PageFooter from "@/components/PageFooter";

  export default {
    name: "ShopCartView"
  }
</script>

这个时候发现这两条引入的语句是灰色的，提示删除未使用的引入

那是因为少了配置，在export default块里的components属性中声明页面使用了哪些组件

<script>
  import PageHeader from "@/components/PageHeader";
  import PageFooter from "@/components/PageFooter";

  export default {
    name: "ShopCartView",
    components: {
      PageHeader,
      PageFooter
    }
  }
</script>

这样，我们才算使用了自己定义的组件，这时候export块提示没有使用到的默认导出，那是因为没有配置路由。打开router目录下的index.js，在里面配置着项目的路由。

我们需要修改的是routes 部分，我们照着葫芦画瓢就好了。配置完以下路由，当我们访问http://localhost:8088/shop_cart时，就能访问到购物车的页面ShopCartView.vue了

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

Vue.use(VueRouter);

const routes = [
  {
    path: '/shop_cart',
    name: 'shop_cart',
    component: () => import('../views/ShopCartView.vue')
  }
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

export default router;

这样就配置了第一个路由，最后，把我们的js文件也复制过来。

<template>
  <div>
    <PageHeader />

    <div class="search_bar clearfix">
      <a href="/" class="logo fl">
        <img src="../assets/images/logo.png" alt="" />
      </a>

      <div class="sub_page_name fl">|购物车</div>

      <div class="search_con fr">
        <input class="input_text fl" v-model="search" placeholder="搜索商品" />
        <input type="button" class="input_btn fr" value="搜索" @click="query" />
      </div>
    </div>

    <div class="total_count">全部商品<em>{{count}}</em>件</div>

    <ul class="cart_list_th clearfix">
      <li class="col01">商品名称</li>
      <li class="col02">商品单位</li>
      <li class="col03">商品价格</li>
      <li class="col04">数量</li>
      <li class="col05">小计</li>
      <li class="col06">操作</li>
    </ul>

    <ul class="cart_list_td clearfix" v-for="cart in carts">
      <li class="col01"><input type="checkbox" checked /></li>
      <li class="col02"><img :src="cart.product.image" alt="" /></li>
      <li class="col03">
        {{cart.product.name}}<br>
        <em>{{cart.product.price}}元/{{cart.product.unit}}</em>
      </li>
      <li class="col04">{{cart.product.unit}}</li>
      <li class="col05">{{cart.product.price}}元</li>
      <li class="col06">
        <div class="num_add">
          <a href="javascript:void(0)" class="add fl">+</a>
          <input class="num_show fl" v-model="cart.quantity" />
          <a href="javascript:void(0)" class="minus fl">-</a>
        </div>
      </li>
      <li class="col07">{{cart.money}}元</li>
      <li class="col08"><a href="javascript:void(0)" @click="del(cart.id)">删除</a></li>
    </ul>

    <ul class="settlements">
      <li class="col01">
        <input type="checkbox" checked />
      </li>
      <li class="col02">全选</li>
      <li class="col03">合计(不含运费)：
        <span>¥</span><em>{{total}}</em><br>
        共计<b>{{count}}</b>件商品
      </li>

      <!--购物车数量不为0时显示-->
      <li class="col04" v-if="parseInt(count) !== 0">
        <a href="/place_order">去结算</a>
      </li>
    </ul>

    <PageFooter />
  </div>
</template>

<script>
  import Vue from "vue";
  import ElementUI from "element-ui";
  import "element-ui/lib/theme-chalk/index.css";
  import {error, getData} from "@/assets/js/axiosUtis";
  import PageHeader from "@/components/PageHeader.vue";
  import PageFooter from "@/components/PageFooter.vue";

  Vue.use(ElementUI);

  export default {
    data() {
      return {
        total: 0,
        count: 0,
        search: "",
        carts: [] // 购物车
      }
    },
    created: function () {
      let _this = this;

      // 查询查询用户的购物车
      getData("/shop_cart/select", {}
        , function (response) {
          _this.count = 0;
          _this.total = 0;
          _this.carts = response.data;

          for (let i = 0; i < _this.carts.length; i++) {
            let cart = _this.carts[i];

            _this.count += cart.quantity;
            _this.total += cart.money;
          }
        },function (err) {
          error(err);
        }
      );
    },
    methods: {
      query() { // 查询商品
        location.href = "/list?name=" + this.search;
      },
      del(id) { // 删除购物车
        let bool = confirm("是否确认删除？");

        if (bool) {
          let _this = this;

          getData("/shop_cart/deleteById/" + id, {}, function () {
            // 查询查询用户的购物车
            getData("/shop_cart/select", {}, function (response) {
              _this.count = 0;
              _this.total = 0;
              _this.carts = response.data;

              for (let i = 0; i < _this.carts.length; i++) {
                let cart = _this.carts[i];

                _this.count += cart.quantity;
                _this.total += ((cart.money * 100) * cart.quantity) / 100;
              }
            },function (err) {
              error(err);
            });
          },function (err) {
            error(err);
          });
        }
      }
    },
    name: "ShopcartView",
    components: {
      PageFooter,
      PageHeader
    }
  }
</script>

<style>
  @import "../assets/css/reset.css";
  @import "../assets/css/main.css";
</style>

因为项目要用到axios和element-ui，安装一下

安装element-ui

npm i element-ui -S

安装axios

npm i axios -S

最下面的导入css可以写到<script>块里，如图

好了，文章就分享到这里了，更多细节可以参考项目的源代码，如果文章对你有所帮助，不要忘了点赞+收藏哦~

天天生鲜商城vue前端项目https://gitee.com/he-yunlin/ttsx.git

手把手教你如何把系统的前端页面改成vue 脚手架项目，实现前后端分离

第一步：检查node.js是否安装

第二步：配置npm源

第三步：安装vue-cli

第四步：创建vue项目

第五步：启动项目

第六步：整合静态资源

npm WARN deprecated har-validator@5.1.5: this library is no longer supported 或vue : 无法加载文件 C:\Users\

将本地前端工程中的npm依赖上传到Nexus

npm install -g @mermaid-js/mermaid-cli时puppeteer安装报错： Failed to set up Chromium r1108766!

解决 npm install 报错的问题

Node包管理工具 - nvm、npm、yarn、cnpm、pnpm

npm install 提示错误FetchError: request to https://registry.npmjs.org/* failed,reason: connect ETIMEDOUT

在node-red 的function中使用第三方的npm 库来处理业务逻辑

uniapp项目引入vant4 npm下载

npm 证书过期的问题

基于Spring Boot Vue的旅游网站平台

前端哥

鲁迅为什么殴打周树人

梦泪都当面试官啦

vue 双向绑定

JsonUtility.ToJson 和UnityWebRequest 踩过的坑记录

List使用stream流转成map的几种方式

如何在Hibernate 5框架的项目中使用Postgres JSON函数

【Python】系列模块之标准库json详解

Mysql 字段类型JSON 解析

JSON的三种格式，5分钟搞定

在线JSON差异比较工具：BlitLabs在线JSON Diff

1
基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000

2
VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000

3
轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000

4
HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000

5
UE4.27支持HTML5

2024-05-07 13:05:261000

6
前端vue项目使用Decimal.js做加减乘除求余运算

2024-04-23 21:04:401000

7
js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000

8
jQuery事件处理

2024-03-12 01:03:321000

9
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000

10
ECharts 饼状图颜色设置

2024-02-16 14:02:001000