企业官网建设流程全解析

准备工作

使用Vue CLI脚手架搭建项目

# 使用CLI搭建项目，需要先安装node.js和npm# 查看电脑中的node.js版本和NPM版本node-vnpm-v

# 安装 Vue ClInpminstall-g@vue/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 from'element-ui';import'element-ui/lib/theme-chalk/index.css';并添加：Vue.use(ElementUI);

axios

# 在项目中安装npminstall--saveaxios vue-axios#在main.js中导入importaxios from'axios'# 挂载到 Vue 原型上，所有组件都可以通过 this.$axios 访问Vue.prototype.$axios=axios

页面实现

代码为未添加样式版本，样式可通过个人想法，AI协助生成

index.js

# 配置访问路径{path:'/travel', name:'travel', component:()=>import(/* webpackChunkName:"about"*/'../views/TravelView.vue')},

App.vue

# 添加访问连接<router-linkto="/travel">travel</router-link>|

实现页面TravelView.vue

<template><div><el-row><el-col :span="4">当前查询内容：{{word}}</el-col><el-col :span="4"><el-input v-model="word"placeholder="请输入搜索词"></el-input></el-col><el-col :span="2"><button @click="travelSel"type="primary">查询</button></el-col></el-row><el-table :data="travelList"stripestyle="width: 100%"><el-table-columnprop="id"label="序号"width="180"></el-table-column><el-table-columnprop="picUrl"label="封面图片"width="180"></el-table-column><el-table-columnprop="ctime"label="发布时间"></el-table-column><el-table-columnprop="title"label="文章标题"></el-table-column><el-table-columnprop="source"label="文章来源"></el-table-column><el-table-columnprop="description"label="文章描述"></el-table-column></el-table><divclass="block"><el-paginationlayout="prev, pager, next"v-model:current-page="page":total="100"@current-change="changePage"></el-pagination></div></div></template><script>//ES6模块化默认导出exportdefault{name:"travel",data(){return{travelList:[], page:1, word:"辽宁"}}, //访问页面就加载created(){this.travelSel()}, methods:{//搜索travelSel(){this.page=1, this.fetch()}, //分页 changePage(curpage){this.page=curpage, 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.travelList=resp.data.result.list})}}}</script>