记初学vue完成的第一个demo

本文记录了作者初学Vue框架,完成第一个包含vue+vuex+vue-router+axios+Element-UI的demo项目的经历。项目涉及路由管理、状态管理、HTTP请求及组件交互等,详细介绍了环境配置和遇到的挑战,如组件通信、表格过滤、时间格式化等,强调了在学习过程中解决问题的重要性。
摘要由CSDN通过智能技术生成

7.5来到苏小研报道,7.10正式参加实习工作,布置的任务要求就是熟悉vue框架,然后按要求完成一个demo。从最初的慌,懵到此刻的静,定,这一个月的学习还是很有收获的,特记录一下。
项目地址:https://github.com/happy8silence/PMO.git
项目运行:npm install npm run serve
这个项目的技术栈是vue+vuex+vue-router+axios+Element-UI,其中vue-router用来管理路由,vuex状态管理,axios用来http请求。
环境配置:
1、安装nodejs
2、安装npm
3、安装最新版本的vue脚手架npm install –g @vue/cli
4、安装 element-ui npm i element-ui -S
5、安装 vuex npm install vuex -s
6、安装 axios npm install axios
7、安装 scss npm install node-sass –save-dev
npm install sass-loader –save-dev

这些安装完,就可以新建一个vueproject vue create test,根据需要选择对应安装项,然后cd test 运行npm run serve就可以启动vue工程。
demo中首先引入需要用的组件和样式,然后进行路由配置,我首先完成footer和header组件,在App.vue中引入header组件,这样当header以下的内容根据路由跳转时,header仍存在

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值