做企业网站建设挣钱吗,网站解析设置,网站导航下拉菜单代码,做网站的公司挣钱吗需求详情#xff1a;用户不要项目进行打包#xff0c;开发还是选用vue2,且需要便于上手
项目目录
api 存放api.js#xff0c;主要是前端用到的接口
css
fonts 存放页面需要的字体文件
1.css 存放所有css文件
data 存放echarts…需求详情用户不要项目进行打包开发还是选用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 langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0link relicon hrefimg/favicon.icotitle/title!-- 引入element主题css样式 --link relstylesheet hrefcss/element-3E6BBF.css /!-- 引入主css文件 --link relstylesheet hrefcss/main.css /!-- 引入jquery --script srcjs/jquery-1.11.3.js/script!-- 引入vue --script srcjs/vue.min.js/script!-- 引入vue-router --script srcjs/vue-router.js/script!-- 引入vuex --script srcjs/vuex.js/script!-- 引入element组件库 --script srcjs/element.js/script!-- 引入axios --script srcjs/axios.min.js/script!-- 引入httpVueLoader使得单文件也可以使用vue组件 --script srcjs/httpVueLoader.js/script!-- 图表配置 --script typetext/json srcdata/chartOption.json/script!-- 页面接口 --script srcapi/api.js/script/headbodydiv idmainrouter-view/router-view/divscript/script!--路由配置文件router.js以及store.js --必须放在主js文件旁边 --script srcrouter.js typetext/javascript charsetutf-8/scriptscript srcstore.js typetext/javascript charsetutf-8/script!-- 封装axios --script srcjs/request.js typetext/javascript charsetutf-8/script!-- 主入口js文件 --script srcindex.js/script/body/htmlindex.js
Vue.use(httpVueLoader);
var vue new Vue({router,store,data: function () {return {}},mounted() {},watch: {},methods: {},}).$mount(#main);
新建vue文件
template!-- 基础element使用 --el-table :datatableData stylewidth: 100%el-table-column propdate label日期 width180/el-table-columnel-table-column propname label姓名 width180/el-table-columnel-table-column propaddress label地址/el-table-column/el-table
/templatescript
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 弄}];}}
};
/scriptstyle scoped
/styleroute.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);
};
