vue vue-router vuex element-ui axios 写一个代理平台的学习笔记(一)初始化项目

创建项目 learn

直接在工作空间下用vue-cli来创建
vue init webpack learn
vue vue-router vuex element-ui axios 写一个代理平台的学习笔记(一)初始化项目_第1张图片

安装依赖

vue vue-router vuex element-ui axios 写一个代理平台的学习笔记(一)初始化项目_第2张图片
执行
cnpm i
cnpm run dev

成功的话讲出现这个画面
vue vue-router vuex element-ui axios 写一个代理平台的学习笔记(一)初始化项目_第3张图片

正式开始写项目

1、首先修改项目结构
目前的结构vue vue-router vuex element-ui axios 写一个代理平台的学习笔记(一)初始化项目_第4张图片

  • 新建一个vuex文件夹,用来管理部分状态,比如 登录

里面新建一个store.js

  • 新建一个api文件夹,用来写axios的请求借口,里面放一个api.js

  • 新建一个data文件夹,用来存放或模拟数据,放一个data.js

  • 里面放空内容就行

现在的结构vue vue-router vuex element-ui axios 写一个代理平台的学习笔记(一)初始化项目_第5张图片

2、在main.js里面引入vuex element等
vue vue-router vuex element-ui axios 写一个代理平台的学习笔记(一)初始化项目_第6张图片

3、修改App.vue文件代码,确认element是否引入成功
代码vue vue-router vuex element-ui axios 写一个代理平台的学习笔记(一)初始化项目_第7张图片
输出:vue vue-router vuex element-ui axios 写一个代理平台的学习笔记(一)初始化项目_第8张图片
说明是没有问题的


组件规划和写路由结构

预想中要实现的功能:

  • 主页 home

  • 商品展示 products

  • 使用帮助 FAQ

  • 用户操作 manger

    • 用户信息 manger/my

    • 发货管理 manger/send

    • 历史发货 manger/history

  • 登录 login

  • 注册 regin

你可能感兴趣的