vue2.0 router遇到的问题
2017-02-09 08:33
246 查看
昨天按照教程安装好vue-router模块后,在应用中引入router 发现没有router.map方法,百度后原来是vue2.0里的路由改了
上面的修改完后继续跑,接着又报错You
are using the runtime-only build of Vue where the template option is not available.
弄了一下午愣是没弄好,最后在知乎上看到说是vue会打包生成3个文件一个是
runtime only 的文件 vue.common.js,一个是 compiler only 的文件 compiler.js,一个是 runtime + compiler 的文件 vue.js。
用 webpack 的别名功能把 vue/dist/vue.js
命名成了 vue,不然vue 的 package.json 中的 main 指向的是 dist/vue.common.js。
webpack.config.jsresolve: {
alias: {
'vue': 'vue/dist/vue.js'
}
},
期待已久的页面总算出来了
// 1. 定义(路由)组件。 // 可以从其他文件 import 进来 const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar</div>' } // 2. 定义路由 // 每个路由应该映射一个组件。 其中"component" 可以是 // 通过 Vue.extend() 创建的组件构造器, // 或者,只是一个组件配置对象。 // 我们晚点再讨论嵌套路由。 const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] // 3. 创建 router 实例,然后传 `routes` 配置 // 你还可以传别的配置参数, 不过先这么简单着吧。 const router = new VueRouter({ routes // (缩写)相当于 routes: routes }) // 4. 创建和挂载根实例。 // 记得要通过 router 配置参数注入路由, // 从而让整个应用都有路由功能 const app = new Vue({ router }).$mount('#app')这是官方代码,这里有一个问题官方的组件写在index.html里的,我的是写在app.vue中的 所以第四步要写成
/ 4. 创建和挂载根实例。 // 记得要通过 router 配置参数注入路由, // 从而让整个应用都有路由功能 const app = new Vue({ router:router, render: h => h(App) }).$mount('#app')
render函数是渲染一个视图,然后提供给
el挂载,所以不加的话就是空白什么都没有
上面的修改完后继续跑,接着又报错You
are using the runtime-only build of Vue where the template option is not available.
弄了一下午愣是没弄好,最后在知乎上看到说是vue会打包生成3个文件一个是
runtime only 的文件 vue.common.js,一个是 compiler only 的文件 compiler.js,一个是 runtime + compiler 的文件 vue.js。
用 webpack 的别名功能把 vue/dist/vue.js
命名成了 vue,不然vue 的 package.json 中的 main 指向的是 dist/vue.common.js。
webpack.config.jsresolve: {
alias: {
'vue': 'vue/dist/vue.js'
}
},
期待已久的页面总算出来了
相关文章推荐
- 用grunt搭建自动化的web前端开发环境-完整教程
- web前端开发工程师需要学习的技能
- 6.html中的表单元素一
- 7.html中的表单元素一
- 开启CSS3.0的学习之旅(一)
- web前端开发
- 初始web前端开发
- web前端怎么做?
- 一键复制clipboard.js
- 从网页制作到前端开发工程师难吗?
- Web前端工程师成长之路——知识汇总
- html基础知识梳理
- 史上最全的HTML、CSS知识点总结,浅显易懂
- WEB标准,Web前端开发工程师必备技术列表
- web前端开发规范
- vue.js的使用
- web前端开发规范
- WEB标准,Web前端开发工程师必备技术列表
- img 和 background-image的选择
- Emmet:html/css代码快速编写神器