首页 > 【2】Vue项目引用Element UI（饿了么框架）菜单导航条初期配置

【2】Vue项目引用Element UI（饿了么框架）菜单导航条初期配置

首先要理解Vue项目加载顺序：

index.html → main.js → App.vue → nav.json→ routes.js → page1.vue

index.html建议加入样式

① main.js

//【基础配置】----------------------------------------------------------------
//引入Vue框架（设置为false以阻止vue在启动时生成生产提示）
import Vue from 'vue';
Vue.config.productionTip = false;
//导入路由【安装方法】cnpm i vue-router
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import routes from './routes';
const router = new VueRouter({// mode: 'history', // 这里存在一个弊端，如果要去掉路由的#号，后端需要配合配置，反正如果不是非得要做支付建议不用这个参数配置，参考文档：https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90// base: '/projects/rs/', // 这个位置写项目在服务器上面从根目录开始算的绝对路径，当设置mode: 'history'的时候才有效scrollBehavior: (to, from, savedPosition) => {if (to.hash) return { selector: to.hash }; //跳转到锚点return savedPosition || { x: 0, y: 0 }; //回归历史滚动位置},routes
});
router.beforeEach((to, from, next) => {document.title = to.meta.title || ''; //路由发生变化修改页面titlenext()
})//【第三方插件】----------------------------------------------------------------
//引入饿了么UI框架【安装方法】cnpm i element-ui -S
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);//引入es6-promise 安装cnpm i es6-promise --save-dev
import promise from 'es6-promise'; //使用axios对安卓或者ios低版本兼容性处理
promise.polyfill(); //注意需要在aixo之前注册//引入Axios【安装方法】cnpm i axios -S
import axios from 'axios';
Vue.prototype.$axios = axios;//引入Echarts【安装方法】cnpm i echarts -S
import echarts from 'echarts';
Vue.prototype.$echarts = echarts;//【公共方法】----------------------------------------------------------------
import sg from "./js/sg";
Vue.prototype.$g= sg;//【公共变量】----------------------------------------------------------------
import global from "./js/global";
Vue.prototype.$global = global;//【初始化加载】----------------------------------------------------------------
import App from './App';
new Vue({ el: '#app', render: h => h(App), router });

② app.vue

③ 在static/json/创建nav.json文件

{"status":"SUCCESS","message":"加载失败","data":[{"label":"首页","path":"/page1"},{"label":"栏目2","path":"/page2"},{"label":"栏目3","path":"/page3"},{"label":"栏目4","path":"/page4"}]
}

④ 在src/下创建routes.js

export default [{ path: "/", redirect: "/page1" },// 当设置了mode: 'history'的时候，这个地方最好是不要用redirect，注释掉该路由，在App.vue加入created(){this.$router.push('/home');}， 否则会导致build之后刷新找不到页面{path: "/page1",meta: { title: '首页浏览器标题' },component: () =>import ('./vue/page1'), //在有嵌套路由的页面的template根节点加入用于显示二级路由页面内容//嵌套路由（二级页面），注意！path不要在开头加"/",否则会认为是根路径导致报错children: [{path: "page2",meta: { title: 'page2浏览器标题' },component: () =>import ('./vue/page2')},{path: "page3",meta: { title: 'page3浏览器标题' },component: () =>import ('./vue/page3')},{path: "page4",meta: { title: 'page4浏览器标题' },meta: {title: 'page2浏览器标题'},component: () =>import ('./vue/page4')}]},{path: "/page2",meta: { title: 'page2浏览器标题' },component: () =>import ('./vue/page2')},{path: "/page3",meta: { title: 'page3浏览器标题' },component: () =>import ('./vue/page3')},{path: "/page4",meta: { title: 'page4浏览器标题' },component: () =>import ('./vue/page4')},{path: "*",meta: { title: '该页面无法显示！' },component: () =>import ('./vue/notFound')} //404页面，一定要写在最后
];

温馨提示：

采用import按需加载的方式，如果出现import这儿报错，就需要安装babel插件，vue-router官网有一段提示：

如果您使用的是Babel，您将需要添加syntax-dynamic-import插件才能使Babel可以正确地解析语法。

【安装方法】cnpm i babel-plugin-syntax-dynamic-import -D

然后在webpack的js的loader部分修改为：

{

test:/.js$/,

loader:'babel-loader',

options:{

plugins:['syntax-dynamic-import']

}

}

在src/vue/下创建page1.vue

----------------------------------------------------------------

如果使用axios提示跨域报错，【解决方法】找到config/index.js，在dev下的assetsPublicPath后面加入

proxyTable: {'/api': {target: 'http://127.0.0.1:8080', // 后台访问地址changeOrigin: true,pathRewrite: {'^/api': ''}}
},

【扩展阅读】

生成项目→npm run build Vue的项目，如何修改相对路径配置

【2】Vue项目引用Element UI（饿了么框架）菜单导航条初期配置

首先要理解Vue项目加载顺序：

index.html → main.js → App.vue → nav.json→ routes.js → page1.vue

① main.js

② app.vue

③ 在static/json/创建nav.json文件

④ 在src/下创建routes.js

更多相关：

Angular多个页面引入同一个组件报错The Component ‘MyComponentComponent‘ is declared by more than one NgModule怎么办？

【亲测可用→防止入坑Routes】设置angular10项目异步加载、惰性加载、懒加载路由

Vue在Element UI下使用富文本框插件quill-editor（我个人不推荐用这个复杂的富文本插件）

python 绘图脚本系列简单记录

Open3d学习计划—高级篇 7（颜色映射）

shell设置系统环境变量的问题

二叉树：路径之和 Path Sum

Linux上PHP加入环境变量

环境变量path误删解决办法

groovy怎样从sql语句中截取表名_SQL常用的基础查询语句

数据库低端sql查询语句片段

使用OpenRowSet操作Excel Excel导入数据库

excel导入SQL脚本

经典sql语句

【2】Vue项目引用Element UI（饿了么框架）菜单导航条初期配置

首先要理解Vue项目加载顺序： index.html → main.js → App.vue → nav.json→ routes.js → page1.vue

① main.js

② app.vue

③ 在static/json/创建nav.json文件

④ 在src/下创建routes.js

更多相关：

首先要理解Vue项目加载顺序：

index.html → main.js → App.vue → nav.json→ routes.js → page1.vue