vue学习笔记

学习目标

能够基于vue初始化项目
能够基于vue技术栈进行项目开发
能够使用vue的第三方软件进行项目开发
能够说出前后端分离的开发模式

学习目录

项目概述
项目初始化
登录退出
主页布局
用户管理模块
权限管理模块
分类管理模块
参数管理模块
商品列表模块
订单管理模块
数据统计模块

项目概述

1.1 电商项目基本业务概述

根据不同应用场景，电商系统一般都提供了PC端、移动app、移动web、微信小程序等多种终端访问方式。

1.2 电商后台管理系统功能

电商后台管理系统用于管理用户账号、商品分类、商品信息、订单、数据统计等业务功能。

1.3 电商后台管理系统的开发模式（前后端分离）

电商后台管理系统整体采用前后端分离的开发模式，其中前端项目是基于vue技术栈的SPA项目。

1.4 电商后台管理系统的技术选型

1.前端项目技术栈
	vue
	vue-router
	element-ui
	axios（前后端分离技术，调用接口）
	echarts（报表）
2.后端项目技术栈
	node.js
	express
	jwt(状态保持)
	mysql
	sequelize

项目初始化

2.1前端项目初始化步骤

1.安装vue脚手架
2.通过vue脚手架创建项目
3.配置vue路由
4.配置element-ui组件库
5.配置axios库
6.初始化git远程仓库
7.将本地项目托管到github或码云中

主页整体布局

路由配置直接跳转到登录页面

import Login from '../components/Login'
Vue.use(VueRouter)

const routes = [
  { path: '/', redirect: '/login' },
  { path: '/login', component: Login }
]

const router = new VueRouter({
  routes
})

找不到axios，
npm install
npm run dev
npm run serve
npm install --save axios
npm run serve

开不了node app.js，需要
关闭之前开的powershell
然后npm install
node ./app.js
npm install
cls

遇到的问题

配置vue的环境，安装脚手架的时候，运行vue ui一直打开不了浏览器。
刚开始以为是npm和node.js出问题了，安装卸载修改环境变量三四次后，发现问题不在node.js上，最后发现可能是vue-cli 2.x版本与现安装的不兼容。
尝试卸载vue 2.9.6，运行npm uninstall vue-cli -g ，然后npm install -g @vue/cli，查看vue -V发现还是2.9.6版本，重复操作多次，重启计算机多次依旧删除不了。
原因：C:\Users\Administrator\AppData\Roaming\npm\node_modules目录下多了一个vue文件，全局文件都装在这里，我删除的vue-cli -g也是删除这里边的文件，

但是我设置的变量路径却不在这儿，所以导致一直出错。
解决：
找到我的node安装路径，global路径为D:\Program Files\nodejs\node_global，环境变量也在那，所以需要修改默认的node_ global位置。
接下来还有一点！系统变量中的NODE_PATH的路径必须和你是 npm 全局安装路径下的 node_modules,所以我这里填写的是D:\Develo\nodejs\node_global\node_modules
接下来设置默认安装路径：
npm config set prefix “D:\Program Files\nodejs\node_global”
npm config set cache “D:\Program Files\node.js\node_cache”
然后：
运行npm uninstall vue-cli -g ，
然后npm install -g

这个解决方法参考自https://www.jianshu.com/p/ba7c078837f3。