准备工作使用Vue CLI脚手架搭建项目# 使用CLI搭建项目需要先安装node.js和npm# 查看电脑中的node.js版本和NPM版本node-vnpm-v# 安装 Vue ClInpminstall-gvue/cli# 创建项目 my-projectvue create my-project# 创建过程需要进行一些子自定义配置# 到上面项目 my-project 根目录cdmy-project# 运行以下命令可以运行起来并可以通过默认地址访问npmrun serve#切换阿里镜像npmconfigsetregistry https://registry.npmmirror.com安装vue-router可以在搭建脚手架时选择添加或可以参照官网添加https://router.vuejs.org/zh/installation.html在项目中导入Element UI可以使用其中的组件帮助我们搭建前端页面官网地址https://element.eleme.cn/#/zh-CN在项目中安装npm i element-ui-S在项目main.js中引入importElementUI fromelement-ui;importelement-ui/lib/theme-chalk/index.css;并添加Vue.use(ElementUI);axios# 在项目中安装npminstall--saveaxios vue-axios#在main.js中导入importaxios fromaxios# 挂载到 Vue 原型上所有组件都可以通过 this.$axios 访问Vue.prototype.$axiosaxios页面实现代码为未添加样式版本样式可通过个人想法AI协助生成index.js# 配置访问路径{path:/travel, name:travel, component:()import(/* webpackChunkName:about*/../views/TravelView.vue)},App.vue# 添加访问连接router-linkto/traveltravel/router-link|实现页面TravelView.vuetemplatedivel-rowel-col :span4当前查询内容{{word}}/el-colel-col :span4el-input v-modelwordplaceholder请输入搜索词/el-input/el-colel-col :span2button clicktravelSeltypeprimary查询/button/el-col/el-rowel-table :datatravelListstripestylewidth: 100%el-table-columnpropidlabel序号width180/el-table-columnel-table-columnproppicUrllabel封面图片width180/el-table-columnel-table-columnpropctimelabel发布时间/el-table-columnel-table-columnproptitlelabel文章标题/el-table-columnel-table-columnpropsourcelabel文章来源/el-table-columnel-table-columnpropdescriptionlabel文章描述/el-table-column/el-tabledivclassblockel-paginationlayoutprev, pager, nextv-model:current-pagepage:total100current-changechangePage/el-pagination/div/div/templatescript//ES6模块化默认导出exportdefault{name:travel,data(){return{travelList:[], page:1, word:辽宁}}, //访问页面就加载created(){this.travelSel()}, methods:{//搜索travelSel(){this.page1, this.fetch()}, //分页 changePage(curpage){this.pagecurpage, this.fetch()}, //提取方法相同的部分fetch(){this.$axios({method:get, url:三方接口访问地址, // 传参 params:{key:访问密钥, num:10, form:1, page:this.page, word:this.word}//成功执行}).then(resp{console.log(resp.data.result.list)this.travelListresp.data.result.list})}}}/script