. 에서 조립 Axios의이 데이터를 취득
1. 설치 및 구성 Axios의
기본적으로, 우리의 프로젝트와 어떤하여 Axios의의 지원 패키지, 그래서 우리는 다운로드하여 설치해야합니다.
프로젝트의 루트 디렉토리에 사용 NPM 패키지를 설치
NPM은 Axios의 설치
그런 다음에 main.js 파일 가져 오기 Axios의 와 Axios의의 객체는 마운트 VUE 우리가 어셈블리에 사용할 수 있도록, 자식 객체로 속성을 .
// 뷰는`import` 명령으로로드 버전을 빌드 // (런타임 전용 또는 독립형)은 별칭으로 webpack.base.conf에 설정되었습니다. '보기'에서 가져 오기보기 수입 앱에서 './App' 'Axios의'//에서 수입 Axios의이 가이드 패킷 (기록 라인)에서 디렉토리를 node_modules Vue.config.productionTip = 거짓; . Vue.prototype $ Axios의 = Axios의; // 객체는 뷰에 장착 / * 노 새를 eslint가-사용하지 않는다 * / 새로운 뷰 ({ '#app' 구성 요소 : {앱} 템플릿 : ' < 앱 /> ' });
2. 조립에 사용 Axios의이 데이터를 인수
새 하위 어셈블리 GetWeather.vue 파일
이 제공 GetWeather가 등록을 App.vue 다음을
< 템플릿 > < DIV 위에서 언급 한 id = "는 GetWeather" > < 의 INPUT 유형 = "텍스트" V-모델 = "도시" 자리 = "쿼리 할시 입력하십시오" > < 단추 @click = "get_weather을" > 얻을 날씨 </ 버튼 > < P > {} {} weather_info </ P > < HR > < DIV V-용 = "weather_info.data에서 K, V" > < P > {} {V} :{{K}} </ P > </DIV > </ DIV > </ 템플릿 > < 스크립트 > 수출 기본 { 이름 : " GetWeather " , 데이터 () { 반환 { 도시 : "" , weather_info : "" , } }, 방법 : { get_weather () { 이 . $의 axios.get ( " http://wthrcdn.etouch.cn/weather_mini " , { PARAMS : { " 도시 " : 이 .city } .}) 후 (대응 => { 이 .weather_info = response.data; }). 캐치 (오류 => { CONSOLE.LOG (error.response) }) } } } </ 스크립트 > < 스타일 범위 > </ 스타일 >
결과는 다음과 같습니다 :
본질적으로, 우리는 여전히 원래이다 Axios의 , 그래서 그것은 또한 같은 원본 정책에 의해 영향을 받는다 .
두 . 프로젝트는 VUE 라우터 및 요소 - UI를 구축
1. 크리에이트 VUE의 프로젝트를
VUE 초기화 웹팩 프로젝트 이름
프로젝트를 빌드 할 때 필요한, 우리는 해당 옵션을 선택합니다.
위의 팁에 따르면, 우리가했습니다 VUE 좋은 구축 프로젝트를, 우리는 할 수 pycharm 프로젝트를 열고 위의 노란색 프롬프트에 따라, 테스트 서버 편집기를 실행합니다.
2. 프로젝트를 초기화
지우기 기본 Helloworld.vue의 구성 요소와 App.vue의 기본 템플릿 코드와 기본 스타일.
효과를 한 후 수정 :
다음의 효과를보고 그 종이 조각을.
3. 설치 경로 VUE 라우터
(1) 라우팅 구성 요소를 다운로드
NPM I VUE 라우터 -S
결과의 구현 :
(2) 라우팅을 구성
에서 SRC 디렉토리 생성 라우터 에서, 라우팅 디렉토리를 라우터 디렉토리 생성 하는 index.js 파일을 라우팅을
라우터 /하는 index.js 라우팅 파일, 오브젝트를 라우팅 초기화하는 코드를 작성 :
// 引入路由类和Vue类 import Vue from 'vue' import Router from 'vue-router' import Home from "../components/Home" // 注册路由类 Vue.use(Router); // 初始化路由对象 export default new Router({ // 设置路由模式为‘history’，去掉默认的# mode: "history", routes: [ // 相当于django的urls.py 下的 urlpatterns // 路由列表 // { // 一个字典，代表一条url // name: "路由别名", // path: "路由地址", // component: 组件类名, // }, { name: "Home", path: "/", component: Home, }, { name: "Home", path: "/home", component: Home, } ] })
打开main.js文件，把router路由规则对象注册到vue中。
代码：
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router/index' // elementUI 导入 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; // 调用插件 Vue.use(ElementUI); Vue.config.productionTip = false; /* eslint-disable no-new */ new Vue({ el: '#app', router: router, components: {App}, template: '<App/>' });
(3)在视图中显示路由对应的内容
在App.vue组件中，添加显示路由对应的内容。
代码：
<template> <div id="app"> <router-view /> </div> </template> <script> export default { name: 'App', components: { } } </script> <style> </style>
注意：如果在vue创建项目的时候，设置安装vue-router，则项目会自动帮我们生成上面的router目录和index.js里面的代码，以及自动到main.js里面注册路由对象。
4.引入ElementUI
对于前端页面布局，我们可以使用一些开源的UI框架来配合开发，Vue开发前端项目中，比较常用的就是ElementUI了。
ElementUI是饿了么团队开发的一个UI组件框架，这个框架提前帮我们提供了很多已经写好的通用模块，我们可以在Vue项目中引入来使用，这个框架的使用类似于我们前面学习的bootstrap框架，也就是说，我们完全可以把官方文档中的组件代码拿来就用，有定制性的内容，可以直接通过样式进行覆盖修改就可以了。
中文官网：http://element-cn.eleme.io/#/zh-CN
文档快速入门：http://element-cn.eleme.io/#/zh-CN/component/quickstart
(1)快速安装ElementUI
在项目的根目录下执行下面的命令。
npm i element-ui -S
上面的代码等同于：npm install element-ui --save
执行命令效果：
(2) 配置ElementUI到项目中
在main.js中导入ElementUI，并调用。代码：
// elementUI 导入 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; // 调用插件 Vue.use(ElementUI);
效果：
这样就成功引入了ElementUI。