您现在的位置:首页 >> 前端 >> 内容

Vue工程安装及使用教程

时间:2017/11/20 15:09:28 点击:

  核心提示:Vue工程安装vue-cli 是vue.js的脚手架,用于自动生成vue.js工程模版.(1) 需要先安装node.js 官网https://nodejs.org/zh-cn/(2)安装vue-cli...

Vue工程安装

vue-cli 是vue.js的脚手架,用于自动生成vue.js工程模版.

(1) 需要先安装node.js 官网https://nodejs.org/zh-cn/

(2)安装vue-cli 脚手架,进入cmd命令行,切到你想要安装的目录下,执行.

npm install vue-cli

(3)创建基于webpack模版的项目

vue init webpack  (项目名)

(4) cd到你的项目,然后安装依赖包.(时间略久,不要怀疑是卡了…)

npm install 

(5)启动项目. (也很慢…残念)

npm run dev 

启动成功之后会提示你网页,访问看到页面既成功.

在工程中使用axios

vue是通过axios来实现ajax请求的.

(1) 安装axios,在命令行执行.

npm install axios

在node_models文件夹里看到axios即为安装完成.

Vue工程安装及使用教程

(2)调用axios

可以在单一组件调用axios

Vue工程安装及使用教程

也可只在main.js文件里配置, 可以实现所有组件都可以调用.

Vue工程安装及使用教程

使用this.axios调用

Vue工程安装及使用教程

在Vue中使用bootstrap

方法类似axios

(1) 在项目目录下,命令行安装bootstarp

npm install bootstrap --save-dev

(2)安装成功后,在package.json文件夹中看到bootstrap文件夹,在main,js中配置

Vue工程安装及使用教程

Vue工程安装及使用教程

(3)添加之后,重启工程,在组件中直接使用bootstrap 方法即可.

在Vue中通过axios实现跨越请求

前后端分离会产生跨域请求的问题,使用nginx反向代理比较方便,但是….

网上查了下,vue工程自带了一个比较方便的快捷配置实现跨域请求.

在index.js 如下配置

Vue工程安装及使用教程

当使用axios 时

Vue工程安装及使用教程

这样就能获取数据了

Tags:VU UE E工 工程 
作者:网络 来源:So begins