当前位置：首页 > news >正文

使用vue搭建不需要打包的前端项目

news 2025/7/18 15:24:41

需求详情：用户不要项目进行打包，开发还是选用vue2,且需要便于上手

>api     存放api.js，主要是前端用到的接口
>css
>>>fonts 存放页面需要的字体文件
>>>1.css 存放所有css文件
>data    存放echarts图表的options配置
>img     存放图片资源
>js      存放所有的工具方法和依赖
>views   存放view文件
>index.html  主html
>index.js    主入口js
>route.js    路由配置文件
>store.js    vuex配置文件

在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="icon" href="img/favicon.ico"><title></title><!-- 引入element主题css样式 --><link rel="stylesheet" href="css/element-3E6BBF.css" /><!-- 引入主css文件 --><link rel="stylesheet" href="css/main.css" /><!-- 引入jquery --><script src="js/jquery-1.11.3.js"></script><!-- 引入vue --><script src="js/vue.min.js"></script><!-- 引入vue-router --><script src="js/vue-router.js"></script><!-- 引入vuex --><script src="js/vuex.js"></script><!-- 引入element组件库 --><script src="js/element.js"></script><!-- 引入axios --><script src="js/axios.min.js"></script><!-- 引入httpVueLoader，使得单文件也可以使用vue组件 --><script src="js/httpVueLoader.js"></script><!-- 图表配置 --><script type="text/json" src="data/chartOption.json"></script><!-- 页面接口 --><script src="api/api.js"></script></head><body><div id="main"><router-view></router-view></div><script></script><!--路由配置文件router.js以及store.js  --必须放在主js文件旁边 --><script src="router.js" type="text/javascript" charset="utf-8"></script><script src="store.js" type="text/javascript" charset="utf-8"></script><!-- 封装axios --><script src="js/request.js" type="text/javascript" charset="utf-8"></script><!-- 主入口js文件 --><script src="index.js"></script></body</html>

index.js

Vue.use(httpVueLoader);
var vue = new Vue({router,store,data: function () {return {}},mounted() {},watch: {},methods: {},}).$mount('#main');

新建vue文件

<template><!-- 基础element使用 --><el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table>
</template><script>
module.exports = {data() {return {};},mounted() {this.getTableList();},methods: {getTableList() {this.tableData = [{date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄"},{date: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1517 弄"},{date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1519 弄"},{date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄"}];}}
};
</script><style scoped>
</style>

route.js

// 使用httpVueLoader编译vue组件
const test = httpVueLoader('./views/test.vue');
// 路由配置
const router = new VueRouter({// mode: 'history',routes: [{path: '*',name: "首页",component: test}]
})
// 防止连续点击多次路由报错
let routerPush = VueRouter.prototype.push;
let routerReplace = VueRouter.prototype.replace;
// push
VueRouter.prototype.push = function push(location) {return routerPush.call(this, location).catch((err) => err);
};
// replace
VueRouter.prototype.replace = function push(location) {return routerReplace.call(this, location).catch((err) => err);
};