VUE+Element-UI环境搭建

使用的是Mac+eclipse：

1. 在命令行终端进入eclipse的工作目录下面，查看npm的版本，npm的版本需要大于3.0，如果版本低需要升级npm：

check npm version

也可以使用npm的淘宝镜像及其命令cnpm，速度比较快：

$cnpm install npm -g  #升级npm

$npm install cnpm -g   #升级or安装cnpm

---

2. 安装Vue， vue-router：

$cnpm install vue

$cnpm install vue-router

---

3. 安装vue-cli，vue-cli是vue官方提供的一个命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需要一分钟即可启动带热重载，保存时静态检查，以及可以用于生产环境的构建配置。

$cnpm install --global vue-cli

install vue-cli

$vue -V #查看vue版本：

vue 版本

---

4. 在工作目录下面新建一个Vue项目，都使用的默认设置，一直Enter健。

$vue init webpack vue_project_name  

create vue project

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

---

5. Vue项目创建完成后，可以看到项目的目录结构：

vue project structure

build：项目构建webpack（打包器）相关代码

config：配置目录，包括端口号等

node_modules：npm加载的项目依赖模块

src：主要代码开发目录。  assets：放置一些图片

                                           components：放置组建文件

                                           App.vue：项目入口文件

                                           main.js：项目的js核心文件

                                           router：Vue路由文件目录， 在router/index.js中可以定义不同url访问不同的内容

static：静态资源目录，如图片，字体等

test：测试目录

index.html：首页入口文件，可以添加meta信息或统计代码

package.json：项目配置文件

README.md：项目的说明文档，markdown格式

---

6. 运行Vue项目：

$cnpm run dev

run dev

使用浏览器访问http://localhost:8080/可以打开Vue项目的默认页面

---

7. 安装element-ui：

$cnpm i element-ui -S

install element-ui

---

8. 在src/mian.js中引用element-ui：

import element-ui

---

9. 自定义一个使用element-ui的component，替换掉默认的HelloWorld组件。

在component文件下，复制HelloWorld.vue并重命名为EnterPage.vue。修改EnterPage.vue的内容：

EnterPage Component

---

10. 在router/index.js中添加访问EnterPage component的url：

url router 

---

11. 访问http://localhost:8080/#/enter查看element-ui是否显示：

enter page

---

12. 安装并引用axios，vue-axios：

$cnpm install --save axios vue-axios

install axios

在入口函数main.js中引用axios，vue-axios：

import Vue from 'vue'

import axios from 'axios'

import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

注：axios和vue-axios的区别请看https://www.jianshu.com/writer#/notebooks/37007324/notes/46868684

---

13. 重写component/EnterPag.vue，实现点击button“Show Channels”后显示Channel list：

首先确保已经有rest api可以获取channel list数据。

EnterPage.vue

---

14. 解决请求跨域问题

跨域是指浏览器不允许当前页面的所在的源去请求另一个源的数据。源是指协议，端口，域名，只要这3个中又一个不同就是跨域，例如：

#协议跨域： http://a.baidu.com  访问  https://a.baidu.com；

#端口跨域：http://a.baidu.com:8080  访问  http://a.baidu.com:80；

#域名跨域：http://a.baidu.com  访问  http://b.baidu.com；

vue-cli生成的标准vue项目，config/index.js文件中的proxtTable可以配置跨域请求参数：

config/index.js

---

15. 检查修改后的网页

enter page