Vue-搭建一个电商全栈项目

简单的电商全栈项目搭建

一、技术栈

1、前端

• 前台：Vue + Vue-Router + Vuex + axios + Vant
• 后台：Vue + Vue-Router + Vuex + axios + ElementUI

2、后端：

• Node + Express + mongoose + cors + jwt

二、项目搭建

1、创建后台管理系统

第一步：创建项目并安装依赖：

vue create admin 
cd admin
cnpm i axios --save
cnpm i element-ui --save
cnpm i vuex-persistedstate --save

vue-cli 创建项目，详细步骤转战vue-cli搭建项目
用 Elemen-ui 组件库，官网Element

第二步：精简项目

- public 静态资源目录
- src 
	- http 封装axios请求
	- components 封装公共组件
	- router 路由配置目录
	- store 状态管理目录
	- views 封装视图组件
	- App.vue 根组件
	- main.js 入口文件
- package.json

第三步：在 main.js 中引入组件库

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

第四步：在打包环境中使用 ECharts 可视化图表库

1）安装

cnpm i echarts --save

2）引入 ECharts

import * as echarts from 'echarts';

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var option = {...}
// 绘制图表
myChart.setOption(option)

注意：

1、准备好的 DOM，必须设置 width 和 height，图表才能渲染在页面上
2、Dom 最开始操作是在 mounted 钩子函数中
3、如果需要动态的修改 option 中的数据，可以根据开发的实际情况，将 setOption() 放到一个函数中执行，在需要的地方只要调用该函数即可

---

优化处理：

1、封装 Echarts
2、封装时出现一个页面引入同一个组件多次，后者将前者覆盖的情况，用 ref 操作 dom 即可，具体操作转战封装 echarts解决覆盖问题

第五步：可能使用到富文本编辑器

1）安装依赖

cnpm i wangeditor --save

2)基本使用

import Editor from "wangeditor"
const editor = new Editor("#div") // 准备好的dom
// 或者 const editor = new Editor( document.getElementById('div') )
editor.create()

使用的富文本编辑器，官网wangEditor

2、创建客户端APP

第一步：创建项目并安装依赖：

vue create app 
cd admin
cnpm i axios --save
cnpm i vant --save
cnpm i vuex-persistedstate --save

vue-cli 创建项目，详细步骤转战vue-cli搭建项目
用 Vant 组件库，官网Vant

第二步：精简项目

同后台管理系统

第三步：在 main.js 中引入组件库

import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

3、创建服务端

第一步：创建项目并安装依赖：

# 全局安装Express项目生成器（只需要安装一次，类似于脚手架工具）
cnpm i express express-generator -g

# 使用 express 命令创建项目，项目名为 server
express server
cd server
cnpm i
cnpm i mongoose --save
cnpm i cors --save

# 全局安装 nodemon 热启动
cnpm i nodemon -g

第二步：精简项目

- public
- db 用于管理数据连接的目录
- models 用于管理数据模块对象的目录
- crud 用于管理增删改查封装的目录
- routes 用于管理路由的目录
- views 视图模板引擎管理目录（可删除）
- app.js 入口文件
- package.json

第三步：配置跨域请求

在 app.js 入口文件中引入 cors 模块

var express = require('express')
var cors = require('cors') // 引入 cors
var app = express()
 
app.use(cors()) // 将 cors 模块注册到中间件中，必须在路由跳转之前配置

第四步：配置 nodemon 启动

在 pageage.json 文件中配置 scripts 命令：

"scripts": {
    "start": "nodemon ./bin/www"
}

第五步：文件上传

1）安装依赖

cnpm i multer --save

2）创建 routes/upload.js 路由文件

3）在 app.js 入口文件中引入路由

文件上传具体操作，转战Node+express+ajax 文件上传

————————————————————
“依然记得从你眼中滑落的泪，可能是甜的 ”