webpack入门+路由配置

webpack安装

vue init webpack 项目名

安装路由

npm install vue-router --save-dev

安装elementui

npm i element-ui -S

安装axios

npm install vue-router

main.js入口文件引入这些模块

import Vue from 'vue'
import App from './App'
import axios from 'axios'
import VueAxios from 'vue-axios'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import VueRouter from 'vue-router'Vue.use(VueRouter)Vue.use(VueAxios, axios)Vue.use(ElementUI);

在src目录下创建router文件夹在文件夹下创建index.js路由表

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login'// 安装路由
Vue.use(VueRouter)// 配置路由
export default new Router({routes:[{// 路由路径path: '/Login',// 路由名称name: 'Login',// 跳转的组件component:Login}]
})

创建好路由表后再在mian.js中引入路由import router from './router'

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import axios from 'axios'
import VueAxios from 'vue-axios'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import VueRouter from 'vue-router'
import router from './router'Vue.use(VueRouter)Vue.use(VueAxios, axios)Vue.use(ElementUI);Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#app',router,   //引入路由components: { App },template: '<App/>'
})

最后在挂载的App主键中用路由视图<router-view></router-view>显示。

<template><div id="app">fasdfasd<router-view></router-view></div>
</template><script>
// import HelloWorld from './components/HelloWorld'export default {name: 'App',}
</script><style></style>

webpack入门+路由配置相关推荐

webpack 配置react脚手架（四）：路由配置
1. 由于 react-router 是集成了 react-router-dom 和 react-router-native的一起的,所以这里要使用的是 react-router-dom, 2. 安装 ...
静态路由配置全面详解，静态路由快速入门指南
操作步骤配置各路由器接口的IP地址以配置Router_1的GE0/0/0接口为例,其他接口配置与之类似,不再重复介绍. a.如图2所示,依次选择"广域网互联 > 以太接口" ...
webpack入门之简单例子跑起来
webpack入门之简单例子跑起来 webpack介绍 Webpack是当下最热门的前端资源模块化管理和打包工具,它可以将很多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源,还可以将按需加载 ...
webpack入门学习手记（一）
本人微信公众号:前端修炼之路,欢迎关注. 之前用过gulp.grunt,但是一直没有学习过webpack.这两天刚好有时间,学习了下webpack.webpack要想深入研究,配置的东西比较多,网上的 ...
WEBPACK 入门
webpack 入门 1. 什么是webpack 官网介绍:webpack是一个模块打包器.webpack 处理带有依赖关系的模块,生成一系列表示这些模块的静态资源.(webpack is a mod ...
webpack入门--前端必备
什么是 webpack? webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理.我们可以直接使用 r ...
webpack入门（四）——webpack loader 和plugin
什么是loader loaders是你用在app源码上的转换元件.他们是用node.js运行的,把源文件作为参数,返回新的资源的函数. 例如,你可以用loaders告诉webpack加载 coffe ...
六十九、完成Vue项目城市选择页，路由配置，搜索框布局、列表布局、BetterScroll 的使用和字母表布局
2020/10/28. 周三.今天又是奋斗的一天. @Author:Runsen 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的 ...
时下最流行前端构建工具Webpack 入门总结
作者:wenjuanrao,腾讯 PCG 前端开发工程师最近梳理了下以前 webpack 的相关开发经验,整理和总结了一份入门笔记,欢迎大家围观和批评指正. 随着 web 应用越来越复杂和庞大,前端 ...
react ant design路由配置
最初的时候,只使用了antd中的menu,header和footer都是自己写的组件,在写路由时,总是报如下错误: 相关的路由配置如下: 在网上查的说是组件未暴露出去或者是return 这一行必须有个 ...

webpack入门+路由配置

webpack入门+路由配置相关推荐

最新文章

热门文章