vue 通过 vue cli 搭建的入门demo 实现简单的跨域访问API

vue

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

搭建Vue项目，如果没有接触过前端js等脚本语言的入门者，最好是通过手写vue项目，通过dns引入vue脚本，进行简单的项目搭建入门，这里我就记录一下通过vue cli 脚手架命令搭建vue项目入门demo了。

首先按官网描述，vue的各种资源包需要通过npm 包管理工具实现依赖注入管理，因此我们需要有node环境，在node官网下载需要的版本即可，如果是window10 64 位系统下载对应的 64位 .msi node工具安装即可

然后等待node装好后，我们打开dos窗口，输入cmd打开dos窗口，然后输入：node -v 出现对应的版本号，说明安装成功

接着，我们要通过node环境安装和配置我们的vue环境，由于npm 包管理命令行工具的仓库在国外，我们最好是替换成淘宝镜像来处理，于是我们就全局执行：完成后执行 cnpm -v出现如下画面则表示安装成功

npm install -g cnpm --registry= https://registry.npm.taobao.org

在接着，我们一般发布vue项目会通过webpack 工具发布，因此我们就安装下这个工具 npm install webpack -g，我们继续安装vue核心工具，vue cli 脚手架命令工具，后面安装vue项目都需要用：npm install -g vue-cli

最后，等这些我们需要使用的工具都安装完成后，我们要创建vue项目了，创建项目的步骤如下：

1.vue init webpack project-name 回车(project-name 项目的名称，自己取)

2.根据提示进行相应的选择直接到最后一步即可

3.上面是一些常规的项目配置，包括项目名称、项目描述、作者、构建模式、

4.是否引入vue-router(这是路由组件，一般都会用到，我们选‘yes’);

5.Eslint是严格模式，一般不选，否则代码经常因一些空格等原因编译失败；

最后两项是测试模块，可以先不安装。

最后是开始步骤，先cd到myvue-demo文件夹下面，输入 npm install 回车；

6.下一步输入 npm run dev回车运行，自动配置本地服务器并打开网页，默认8080端口。

那么整个入门的项目创建就已经完成，接下来说下我们本次的重点跨域，demo创建了，但是需要与我们的接口进行交互，项目是本地的，接口是在我们服务器上，那么就设计到跨域访问，这个时候我们就需要手动处理，这里我们不在描述项目的结构了

一：首先我们找到项目相应的地方，填写需要的相关信息

二：

三：在我们需要调用的地方这样写即可，比如：我在hell world.vue 组件下调用