使用的是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
网友评论