[の项目练习]Vue-Cli、API的头条新闻项目

一、API 接口注册

1. 注册申请

聚合数据【点击进入】

进行注册、实名制认证后

搜索"新闻头条"【点击进入】

申请后获得一个key值

---

2. API 接口说明

接口地址：http://v.juhe.cn/toutiao/index

返回格式：json

请求方式：get/post

请求示例：http://v.juhe.cn/toutiao/index?type=top&key=APPKEY

接口备注：返回头条，社会，国内，娱乐，体育，军事，科技，财经，时尚等新闻信息

---

3. 请求参数说明

名称	必填	类型	说明
key	是	string	应用APPKEY
type	否	string	类型,shehui(社会),guonei(国内),guoji(国际),yule(娱乐),tiyu(体育)junshi(军事),keji(科技),caijing(财经),shishang(时尚)

---

4. JSON 返回示例

{
    "reason": "成功的返回",
    "result": {
        "stat": "1",
        "data": [{
                "uniquekey": "6c4caa0c3ba6e05e2a272892af43c00e",
                "title": "杨幂的发际线再也回不去了么？网友吐槽像半秃",
                "date": "2017-01-05 11:03",
                "category": "yule",
                "author_name": "腾讯娱乐",
                "url": "http://mini.eastday.com/mobile/170105110355287.html?qid=juheshuju",
                /*新闻链接，暂支持手机端浏览器访问*/
                "thumbnail_pic_s": "http://03.imgmini.eastday.com/mobile/20170105/20170105110355_
                806 f4ed3fe71d04fa452783d6736a02b_1_mwpm_03200403.jpeg ",
                "thumbnail_pic_s02": "http://03.imgmini.eastday.com/mobile/20170105/20170105110355_
                806 f4ed3fe71d04fa452783d6736a02b_2_mwpm_03200403.jpeg ",
                "thumbnail_pic_s03": "http://03.imgmini.eastday.com/mobile/20170105/20170105110355_
                806 f4ed3fe71d04fa452783d6736a02b_3_mwpm_03200403.jpeg "
            },
            ...
        ]
    }
}

---

二、新建 Vue-Cli 项目

1. 搭建 Vue-Cli 脚手架

vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目

下面介绍 vue-cli 的整个搭建过程

注意：以下内容是基于Vue-cli4.0以上版本的。

（1）安装 npm

NPM（node package manager）是随同node.js一起安装的包管理工具，能解决前端代码部署上的很多问题，常见的使用场景有以下几种：

1. 允许用户从NPM服务器下载别人编写的第三方包到本地使用
2. 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用
3. 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用

实际上，npm就是前端的Maven

从node官网下载并安装node，安装步骤很简单，只要一路next就可以了。 安装完成后，打开命令行工具输入命令node -v，如下图，如果出现对应版本号，就说明安装成功了

C:\Users\Administrator>node -v
v10.16.0

我们所需要的npm也已经安装好了，输入如下命令，显示出npm的版本信息

C:\Users\Administrator>npm -v
6.9.0

到这里node的环境已经安装完了,npm包管理工具也有了，但是由于npm的有些资源被墙，为了更快更稳定,所以我们需要切换到淘宝的npm镜像——cnpm

---

（2）安装 cnpm

点击进入淘宝的cnpm网站,里面有详细的配置方法。 或者直接在命令行输入：

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

然后等待，安装完成。 输入cnpm -v，可以查看当前cnpm版本，这个和npm的版本还是不一样的

C:\Users\Administrator>cnpm -v
[email protected]

使用cnpm的方法就是，需要用到npm的地方直接使用cnpm替换就可以了

---

（3）全局安装 vue-cli

全局安装vuecli（就相当与在本机的npm仓库中有了vuecli）：

//安装最新@vue/cli版本
npm install -g @vue/cli
//安装指定的@vue/cli版本    
npm install -g @vue/[email protected]

安装完成后，使用 vue -V 显示版本号来测试vue是否安装成功

C:\Users\Administrator>vue -V
@vue/cli 4.1.1

---

2. 创建 Vue-Cli 工程

示例中文件夹在D盘根目录，项目名为 csdn_topnews（全部小写）

1. 在命令行下进入到工作空间文件夹中，输入命令,（注意：工程名必须全部小写）

vue create csdn_topnews

2. 选择预设模板，这里选择 Manually select features（手动选择特征）

通过 ↑↓ 箭头选择依赖，按 “空格” 选中，按 “a” 全选，按 “i” 反选

3. 选择项目功能，本次示例只选择 Babel、Router、Vuex 即可

• Babel：转码器，可以将ES6代码转为ES5代码，可兼容不支持ES6的浏览器

• TypeScript：是JavaScript的超集（.ts文件），包含并扩展了 JavaScript 的语法。需要被编译输出为 JavaScript在浏览器运行

• Progressive Web App (PWA) Support：渐进式Web应用程序

• Router ：vue-router（vue路由）

• Vuex ：vuex（vue的状态管理模式）

• CSS Pre-processors ：CSS 预处理器（如：less、sass）

• Linter / Formatter：代码风格检查和格式化（如：ESlint）

• Unit Testing ：单元测试（unit tests）

• E2E Testing ：e2e（end to end） 测试

4. 选择是否使用 history 形式的路由，也就是询问路径是否带 # 号，这里选择 n

5. 询问将依赖文件放在独立文件中，还是 package.json 中，为了保持工程配置文件的整洁性，这里选择 In package.json

6. 询问是否将当前选择保存以备下次使用，这里选择 n
   

7. 等待安装，最后出现如下图即可

---

3. 安装 axios 框架

（1）axios 介绍

在实际开发中，使用一些封装好的ajax框架，这里选用axios框架

原因是：Vue官方推荐使用 axios 框架

axios框架中文官网：http://www.axios-js.com/

---

###（2）项目中安装 axios

1. 进入项目目录

cd csdn_topnews

2. 添加 axios 模块

cnpm install axios --save

3. 添加 qs 模块，用于处理 post 请求的参数解析

cnpm install qs --save

---

4. 添加配置文件

由于申请的 API 不允许跨域访问，只允许代码内访问，需要加一个代理配置文件

文件名为 vue.config.js

module.exports = {
    devServer: {
        port: 8080,
        proxy: {
            '/juheNews': {
                target: 'http://v.juhe.cn/', //需要跨域的url
                ws: true, //代理webSocket
                changeOrigin: true, //允许跨域
                pathRewrite: {
                    '^/juheNews': '' //重写路径
                }
            }
        }
    }
}

将文件复制到项目根目录下即可

【截图1 vue.config.js】代理配置

---

三、运行、导入、清空项目

1. 运行项目

在 cmd 项目目录中输入运行命令

npm run serve

等待加载，如图所示

复制给出的地址，在浏览器中打开，这里为 http://localhost:8080/

---

2. 导入到 HBuilder X 中

直接拖拽文件夹或手动导入即可

【截图2 目录】项目初始目录

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7ermo728-1615626529265)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1612856664274.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_5aW25aaI44Gu5rC05Y2w,size_12,color_FFCD42,t_100)]

---

3. 导入 axios、qs 模块

修改 csdn_topnews\src\main.js 文件

添加语句

import axios from 'axios'
import qs from 'qs' // 只在发送post请求时用到
Vue.prototype.$axios = axios;
Vue.prototype.$qs = qs; // 只在发送post请求时用到

【截图3 main.js】添加位置

---

4. 清空模板

（1）删除模板

清空新建项目时自带的参考模板代码

删除主页面：csdn_topnews\src\components\HelloWorld.vue

删除子组件：csdn_topnews\src\views\About.vue 和 Home.vue

【截图4 删除模板】

---

（2）修改 App.vue

修改主页面 csdn_topnews\src\App.vue

保留路由出口 ，使用路由切换新闻页面

删除初始模板的代码和样式

！！！删除下列代码

    Home |
    About


！！！删除下列样式
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
}

#nav {
    padding: 30px;
}

#nav a {
    font-weight: bold;
    color: #2c3e50;
}

#nav a.router-link-exact-active {
    color: #42b983;
}

【截图5 App.vue】

---

（3）修改路由文件

修改路由文件 csdn_topnews\src\router\index.js

删除引包中的 Home.vue

！！！删除下列引入
import Home from '../views/Home.vue'

重置 routes 变量，将一组路径注释掉作为模板之后使用

const routes = [
   /*
   {
    path: '/',
    name: 'Home',
    component: Home
   },
   */
]

【截图6 router\index.js】

---

四、制作导航标签

App.vue

编写头部导航标签页面 csdn_topnews\src\App.vue