Vue+Axios+Vuex+webpack+Vue-Router 全家桶搭建前端框架

如何快速搭建vue前端框架:

a、我们是在node环境下开发,借助webpack打包工具,安装vue-cli;

  npm install -g vue-cli

b、安装完之后就可以用vue命令了:

vue init webpack projectName   //注意:projectName 为全小写英文

c、创建之后进入目录安装依赖:

cd projectName
npm install

网速慢的话可以使用yarn来安装,yarn一次性安装好,不用再次安装依赖,进入项目目录可直接运行,下面就是我用yarn安装之后的效果

使用npm init webpack 创建项目:
在这里插入图片描述

在这里插入图片描述

进入目录启动项目:
在这里插入图片描述

启动后的效果图:
在这里插入图片描述

再看一下配置文件中,webpack已经安装好,按需配置就好
在这里插入图片描述

然后安装axiso:

yarn add axios --save-dev 
或者 npm install axios --save-dev

在这里插入图片描述

在这里插入图片描述

安装好之后在index.js中引入axios,将axios放到原型链上面,方便后面调用:
this.$axios.get()
在这里插入图片描述

然后安装vuex

yarn add vuex --save-dev

在这里插入图片描述

安装好之后在 src 目录下创建store文件夹,在文件夹中创建store.js文件,在文件中引入vuex,现在变可以开发了。
在这里插入图片描述

在这里插入图片描述

技术是一个不断积累的过程,还有其他开发的技巧,我们慢慢来。

  • 0
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值