Vue.js学习系列(八)---使用路由搭建单页应用(一)
2019独角兽企业重金招聘Python工程师标准>>>
之前已经通过命令
cnpm install vue-router --save
安装了vue-router。接下里我们在webpack.config.js加入别名
resolve: {
alias: {vue: 'vue/dist/vue.js'}
}
alias是什么?为什么要加alias配置项,在官方文档岁alias有这样的描述
修改完之后的webpack.config.js是这样子的:
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
resolveLoader: {
root: path.join(__dirname, 'node_modules'),
},
module: {
loaders: [
{
test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.vue$/,
loader: 'vue'
},
{
test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.js$/,
loader: 'babel',
exclude: /node_modules/
},
{
test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.(png|jpg|gif|svg)$/,
loader: 'file',
query: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {vue: 'vue/dist/vue.js'}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
])
}
在按照同样的方法,写第二个组件secondcomponent.vue
<template>
<div id="secondcomponent">
<h1>I am another page</h1>
<a> written by {{ author }} </a>
<p> 感谢 <a href="https://github.com/showonne">showonne</a>大神的技术指导</p>
</div>
</template>
<script>
export default {
data() {
return {
author: "微信公众号 jinkey-love",
articles: [],
}
}
}
}
</script>
<style>
</style>
转载于:https://my.oschina.net/u/2971691/blog/855741
Vue.js学习系列(八)---使用路由搭建单页应用(一)相关推荐
- Vue.js学习系列七——Vue服务器渲染Nuxt学习
我又回来啦~这次我们来学习Vue的服务器渲染SSR. 关于SSR的文章网上很多,一开始看得我云里雾里.然后去Vue.js 服务器渲染指南和nuxt官网看了看,发现文章大多都是搬运官网的内容,真正讲的清 ...
- Android音视频学习系列(八) — 基于Nginx搭建(rtmp、http)直播服务器
系列文章 Android音视频学习系列(一) - JNI从入门到精通 Android音视频学习系列(二) - 交叉编译动态库.静态库的入门 Android音视频学习系列(三) - Shell脚本入门 ...
- Vue.js 学习笔记 八 v-for
v-for指令,是用来循环的,常用的情况有以下4种 <div id="divApp"><!--迭代数字--><p v-for="n in 5 ...
- Vue.js学习系列(四十二)-- Vue.js组件
2019独角兽企业重金招聘Python工程师标准>>> 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.组件系统让我们可以用独立 ...
- Vue.js学习系列(三十四)-- Vue.js样式绑定(五)
2019独角兽企业重金招聘Python工程师标准>>> 2. Vue.js style(内联样式) 我们可以在 v-bind:style 直接设置样式: <!DOCTYPE h ...
- Vue.js学习系列(二十七)-- 计算属性(一)
2019独角兽企业重金招聘Python工程师标准>>> 在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护 ...
- Vue.js学习系列(九)---使用路由搭建单页应用(二)
2019独角兽企业重金招聘Python工程师标准>>> 然后修改 main.js,引入并注册 vue-router import VueRouter from "vue-r ...
- Vue.js学习系列(二十八)-- 计算属性(二)
2019独角兽企业重金招聘Python工程师标准>>> 2. computed 与 methods区别 我们可以使用 methods 来替代 computed,效果上两个都是一样的, ...
- vue.js学习系列-第二篇
一 VUE实例生命周期钩子 1 生命周期函数 定义 生命周期函数就是vue在某一时间点自动执行的函数 2 具体函数 1 new vue() 2 be ...
最新文章
- 时间的玫瑰+但斌的投资思维
- 用Location对象和history对象修改页面url
- 手误【删库】 == 跑路,不存在的 ——删瓦辛格
- 构建之法第四章--两人合作
- Python面向对象编程 self的含义
- Week 1 Team Homework #3 from Z.XML-软件工程在北航
- 《Fast R-CNN》阅读笔记
- 深度优先搜索(DFS)
- 原来算法还能这样用图画出来?
- inteli211网卡linux驱动,Intel英特尔I210/I340/I350/82575/82580系列网卡驱动5.5.2版For Linux(2021年2月1日发布)...
- 湖北武汉电信及全国DNS分析(湖北的DNS已验证)
- Win7旗舰版 安装步骤
- Linux下为空白SD卡建立BOOT,rootfs分区
- 电源纹波和电源噪声有什么区别?
- 【mmdetection】mmdetection安装详细步骤
- python从小白到大牛百度云盘_Python从小白到大牛
- 22届硕士,去年秋招拿了字节跳动offer,有一说一,不是很难进
- 如何在VC中加减日期及 CTime COleDateTime的常用操作
- hdu5514Frogs 容斥
- ZWAVE Notification Command Class, Version 3-8
热门文章
- python如何画出多个独立的图片_python使用matplotlib:subplot绘制多个子图的示例
- npm install 报错(npm ERR! errno: -4048, npm ERR! code: ‘EPERM‘, npm ERR! syscall: ‘unlink‘,)
- 问道神兵天降服务器维护,问道12月29日全区更新维护1.473公告(转聊吧)
- 历史上华人计算机科学家,郑州大学韩家炜、张宏江两位校友在世界顶尖计算机科学家排名中再度名列华人科学家和中国大陆科学家之首...
- 在html中使用css的主要方式有,html中使用css的方法有哪几种
- 5g pdu session_设备 | NEC被选为NTT DOCOMO独立5G移动核心的供应商
- c++interesting转换为uint_巴西插头标准,旅行转换插头是怎样的?
- 无法将W ndOWs配置为在,配置Wndows2000中的磁盘配额.doc
- go语言 html 5 gui,仅需简单 5 步,给你的 Golang 程序添加 GUI (使用 Electron )
- 1至100之和用c语言表达方式,C语言菜鸟基础教程之求1到100的和