本文详细介绍了如何从头开始使用Node.js搭建环境，安装VueCLI创建Vue2项目，集成Element-UI、vue-router，并实现后台接口调用和定时数据更新。适合初学者了解Vue开发流程和实践技巧。
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
新手记录创建VUE2项目过程
提示：以下是本篇文章正文内容，下面案例可供参考
一、搭建node
1.确保电脑已安装了node
2.检查是否安装成功：打开cmd，输如 node -v,如果输出了版本号，即代表我们安装成功了。
二、安装Vue CLI
1.在cmd中输入 npm install -g @vue/cli
注意：如果安装过旧版的VUE CLI需要先卸载掉
npm uninstall vue-cli -g
2.执行vue -V 查看版本：如果输出版本号，说明我们安装vue成功
三、搭建新项目
1.通过cmd跳转到你要存放项目的磁盘/文件夹，执行如下命令
vue create <Project Name> //文件名 不支持驼峰(含大写字母)
2.选择要创建的是Vue3 还是Vue2,我这里是选择的2，然后等待完成即可；
3.出现如下界面就代表完成了。
4.启动项目，首先需要先进入到项目根目录 cd myvue2project，然后执行 npm run serve即可，
然后访问如下地址即可
cd myvue2project
npm run serve
四、Elemet安装（参照官网步骤Element官网）
1.用vscode打开创建好的项目，新建终端，终端中输入如下命令，等待完成。
npm i element-ui -S
2.继续在终端中输入如下命令，等待完成。
npm install babel-plugin-component -D
3.修改main.js中代码如下
import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'
Vue.config.productionTip = false
Vue.use(ElementUI);
new Vue({
render: h => h(App),
}).$mount('#app')
4.接下来就可以在页面上使用element的组件了。
五、安装vue-router
页面跳转需要配置路由，首先需要安装vue-router,注意使用的vue的版本，我的vue版本是2.6.14，直接使用 npm install vue-router 会报版本不兼容，因此我安装了3.5.2。
npm install --save vue-router@3.5.2
六、项目引入路由并配置
1.新建router.js,主要要加载的页面的路径要配置正确。
import Vue from 'vue'
import VueRouter from 'vue-router'
//你自己需要加载的页面
import home from "./components/pages/Home.vue";
import one from "./components/pages/oneAbout.vue";
import two from "./components/pages/twoDetail.vue";
import three from "./components/pages/threeNote.vue";
Vue.use(VueRouter)
export default new VueRouter(
{
routes : [
{
path: '/home',
name: 'home',
component: home
},
{
path: '/one',
name: 'one',
component: one
},
{
path: '/two',
name: 'two',
component: two
},
{
path: '/three',
name: 'three',
component: three
}
]
}
)
2.修改 main.js，新增两行代码
3.修改菜单代码，el-menu标签中加入 :router=“true”
<el-menu ref="menu" default-active="1" :unique-opened="true" mode="vertical" :router="true" background-color="#093263"
4.在子菜单增加click事件
<el-menu-item index="one" @click="handleMenuClick('one')">变压器监测1</el-menu-item>
5.在methods中添加click事件方法
handleMenuClick(itemIndex) {
this.selectedMenuItem = itemIndex; // 更新选中项索引
},
*******************************完整页面代码
<template>
<el-container class="leftMain">
<el-header class="leftheader">
<p class="p3">可视化大数据展示中心</p>
</el-header>
<el-main>
<el-row class="tac">
<el-menu ref="menu" default-active="1" :unique-opened="true" mode="vertical" :router="true" background-color="#093263"
text-color="#bddde6">
<el-menu-item index="home">
<i class="el-icon-menu"></i>
<span>首页</span>
</el-menu-item>
<el-submenu index="2">
<span slot="title"><i class="el-icon-location"></i>一级菜单</span>
<el-menu-item index="one" @click="handleMenuClick('one')">变压器监测1</el-menu-item>
<el-menu-item index="two" @click="handleMenuClick('two')">变压器监测2</el-menu-item>
</el-submenu>
<el-submenu index="3">
<span slot="title"><i class="el-icon-setting"></i>二级菜单</span>
<el-menu-item index="three" @click="handleMenuClick('three')">变压器监测3</el-menu-item>
</el-submenu>
</el-menu>
</el-row>
</el-main>
</el-container>
</template>
<script>
export default {
data() {
return {
selectedMenuItem: null, // 初始值为空，表示无选中项
};
},
methods: {
handleMenuClick(itemIndex) {
this.selectedMenuItem = itemIndex; // 更新选中项索引
},
}
}
</script>
6.修改要展示页面的容器，router会将页面显示到标签中
<div>
<router-view></router-view>
</div>
7、后台接口调用
1.接口调用使用的是axios，我使用的是vue2,所以需要安装适配的版本 “^1.6.8”,
npm install axios@1.6.8
2.封装requset.js
import axios from 'axios'
import { MessageBox } from 'element-ui';
//配置全局数据请求类型
axios.defaults.headers['Content-Type'] = "application/json;charset=utf-8";
//自定义实例
const service = axios.create({
baseURL: "http://192.168.250.110:8002/api/NewScreenAPI", //数据请求地址
timeout: 30 * 1000
})
// //配置加载参数(暂时注释)
// let loadingOption = {
// text: "正在努力加载中...",
// background: "rgba(0, 0, 0, .5)"
// }, loading;
//请求拦截器
service.interceptors.request.use(config => {
// //开始加载
// loading = Loading.service(loadingOption);
//数据转换
config.data = 'object'===typeof config.data ? JSON.stringify(config.data) : config.data;
//追加访问令牌
//config.headers['authtoken'] = store.getters.authtoken;
return config;
}, error => {
//loading.close();
// 弹出错误提示
const errorMessage = error.message || '网络请求发生未知错误';
MessageBox.error(errorMessage);
return Promise.reject(error);
});
//响应拦截器
service.interceptors.response.use(response => {
//loading.close();
if (response.status == 200) {
return response['data'];
}
return Promise.reject(response);
}, error => {
//loading.close();
// 弹出错误提示
const errorMessage = error.message || '网络请求发生未知错误';
MessageBox.error(errorMessage);
return Promise.reject(error);
});
export default service;
3.引入request.js(在main.js中)
import request from './request.js'
Vue.prototype.$http = request;
4.调用
this.$http.get(“接口地址”)
.then(response => {
const newProjectInfos = response.data;
// 比较新获取的数据与当前数据是否相同
if (!this.$isEqual(currentProjectInfos, newProjectInfos)) {
this.projectInfos = newProjectInfos;
}
})
.catch(error => {
console.log('API 1 error:', error);
});
8、定时调用接口实现数据更新
使用timer实现定时访问
export default {
name: 'HelloWorld',
data() {
return {
intervalIds: {
api1: null,
api2: null,
api3: null,
},
}
},
mounted() {
//确保页面刚加载进来首先调用一遍接口
this.getProjectInfo();
this.getProjectDataInfo();
this.getChartsLinesData();
//按频率调用接口
this.startTimers();
},
methods: {
startTimers() {
this.intervalIds.api1 = setInterval(() => this.getProjectInfo(), TIMER_INTERVAL_MS);
this.intervalIds.api2 = setInterval(() => this.getProjectDataInfo(), TIMER_INTERVAL_MS);
this.intervalIds.api3 = setInterval(() => this.getChartsLinesData(), TIMER_INTERVAL_MS);
},
getProjectInfo() {
//具体调用看前面
...
},
getProjectDataInfo() {
//具体调用看前面
...
},
getChartsLinesData() {
//具体调用看前面
...
},
}
}
一定不要忘了销毁定时器，
beforeDestroy一定不能写在methods里面！！！
beforeDestroy一定不能写在methods里面！！！
beforeDestroy一定不能写在methods里面！！！
beforeDestroy() {
// 销毁定时器
Object.keys(this.intervalIds).forEach(intervalId => clearInterval(this.intervalIds[intervalId]));
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
