从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（一）

最新推荐文章于 2024-05-11 09:32:04 发布

一只图雀

最新推荐文章于 2024-05-11 09:32:04 发布

阅读量5.6k

点赞数 3

文章标签： vue vue.js javascript css

本文链接：https://blog.csdn.net/weixin_46042722/article/details/103642432

版权

在这里插入图片描述
Vue 是尤雨溪在 2014 年创建的一个前端框架，目前 Github Star 数高达 150K，是 Star 数最高的前端项目，并且 Vue 有着极为活跃的社区生态以及专职团队进行维护以确保项目可以健康长久地发展。

目前中国很多互联网公司前端程序员的招聘要求都要求程序员掌握 Vue，像滴滴、美团、饿了么等大厂也在重度使用 Vue 进行开发，并且有着像 Element 、mpvue、iView 这样优秀的基于 Vue 开源项目存在，所以学习 Vue 是一个不错的投资，当你学会 Vue，就可以快速开发项目，这样不仅可以接外包挣外快，而且当有了一定的项目经验，还可以在一线互联网大厂找到一份不错的工作。

看到这里你心动了嘛？心动不如行动！而最幸运的是，本教程将会一步一步带你以实战的方式实现一个迷你全栈电商网站。并在实战的过程中，了解 Vue 的全貌，现在就打开电脑，跟随我的脚步，彻底掌握 Vue 开发！本系列教程的规划如下：

第一部分（也就是这篇教程）：用 Vue 搭建前端项目的骨架，实现基于嵌套、动态路由的多页面跳转。
第二部分（✍️写作中）：用 Express 实现后端 REST API，并使用 MongoDB 进行数据存储。
第三部分（✍写作中）：通过 Vue 的双向数据绑定和模板语法实现数据添加，并用 Vuex 实现前端的状态管理。
第四部分（✍写作中）：用 Element UI 组件库让界面更加专业美观，并且用 Docker 和 Docker Compose 部署我们的全栈项目。

如果您觉得我们的教程写得还不错，请记得给我们点个赞哦！鼓励我们更快更好地写完剩下的教程！你也可以在评论区留言，告诉我们想要实现什么功能，我们一定会仔细考虑的哦！

快速入门

代码

你可以在 Github 查看本教程最终的源码：源码地址。

项目准备

安装依赖

安装 Node.js，你可以去 Node.js 官网下载安装包，通过安装包安装会同时安装 Node.js 包管理工具 Npm，用于便捷的管理项目依赖和下载第三方包。

打开终端，输入如下命令测试是否安装成功：

node -v # v10.16.0
npm -v # 6.9.0

如果在你的终端有如上输出，那么代表你安装成功。

提示

通过上面安装包安装，你会安装最新的 Node 稳定版本，这可能和我的机器上的 Node 版本不一致，但是不用担心，本教程使用到的代码语法适用于绝大多数新的或更老的 Node。

安装 vue-cli，在绝大多数场景下，我们使用 vue-cli 来初始化我们的 vue 项目，本教程也不例外，在终端运行如下命令来安装：

npm install -g vue-cli

打开终端，输入如下命令测试是否安装成功：

vue --version # 2.9.6

提示

虽然 Vue 3.x 已经正式推出，但是这篇教程用的是主流、稳定的 Vue 2.x 版本。由于 Vue 的整体思想基本没有改变，所以不影响我们的学习。在接下来的教程中，我们会迁移到 Vue 3.x，并通过讲解新老 Vue 版本的差异让你更好地理解 Vue 的演变。

上面两个安装步骤已经足够完成我们的教程的学习，但是我想额外推荐你一款编辑器，VSCode，你可以通过访问 VSCode 官网安装。

在 VSCode 里面找到 Vue 插件，可以获得代码语法高亮以及自动格式化非常便捷的功能，并且 VSCode 天然对 JavaScript 的支持，会大大提高我们的开发效率，本教程所涉及项目的开发都是使用 VSCode 完成的。

初始化项目

打开终端输入如下命令初始化我们的 Vue 项目：

vue init webpack vue-online-shop-frontend

命令行接着会显示一些列选项让你选择，具体我们的选择如下图：

提示

其中 Author 字段你可以填自己的昵称，然后我们在选择了安装 vue-router 之后，其他的都选择了 no，因为本篇教程是面向初学者的实战教程，如果引入了过多和 Vue 核心无关的概念，就会引起很多困惑，所以这里我们不配置它们

当项目初始化成功之后，接下来通过如下命令开启项目：

# code vue-online-shop-frontend # 如果你使用了 VSCode 编辑器，可以用这行命令打开项目
cd vue-online-shop-frontend && npm start

接着打开浏览器，访问 http://localhost:8080/ 查看我们初始好的项目效果。

注意

如果你使用 VSCode 编辑器打开项目进行开发，在运行 code project-name 之前需要安装 code 脚本，具体我找了一篇教程：戳我访问。

初探脚手架代码

通过 vue-cli 初始化的脚手架代码中，我们在整个教程中需要了解的就是以下五个文件：

src/main.js
index.html
src/App.vue
src/router/index.js
src/components/HelloWorld.vue

src/main.js

首先我们来看一下 src/main.js，这个是 Vue 应用的入口。我们通过导入 Vue 类、App 组件、router 路由，再加上 el ，将这些参数传给 Vue 类，生成一个 Vue 实例。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import App from './App';
import router from './router';

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
   
  el: '#app',
  router,
  components: {
    App },
  template: '<App/>',
});

index.html

接着我们来看一下 index.html 文件，它的代码是这样的：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue-online-shop</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

当我们开启项目之后，Vue 所使用的构建工具 Webpack 将会：

根据入口文件 src/main.js 里面声明的 el 属性（#app），找到 index.html 中 id 为app 的 DOM 节点
把编译好的视图模板代码挂载到这个 DOM 节点下面
将项目涉及的 JavaScript 和 CSS 代码以 script 和 link 的方式插入到 index.html 中
开启开发服务器，打开浏览器，进而浏览器将 index.html 渲染，我们就可以看到写好的 Vue 页面效果。

src/App.vue

src/App.vue 就是 Vue 为我们提供的组件文件，使得我们可以以组件的形式来组织代码，并通过组件的组合来构建任意规模的项目，代码如下：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
    
  name: 'App',
};
</script

最低0.47元/天解锁文章