Vue.js2+vue-router新手实践

刚接触vue.js 。对于js的框架来说，vue是比较友好的，算是容易上手，但是对于一个菜鸟来说，也走了很多的弯路。

首先，安装vue。

这个过程就有坑，我之前安装过一次vue2，现在拿过来安装，怎么安装都不成功，npm run dev的时候总是报错

错误提示

我在网上看了很多例子，但是都没有解决我的问题，这个时候，我突发奇想，卸载我之前所有的vue相关，和node.js。再重新安装。OK了！

哈哈，大概是node.js版本过低的原因。不过总算是安装成功了

这个是具体过程：

# 安装vue

$npm install vue

# 全局安装 vue-cli

$npm install --global vue-cli

# 创建一个基于 webpack 模板的新项目my-project

$vue init webpack my-project

# 进入项目目录

$cd my-project

# 安装依赖，走你

$npm install

l# 运行项目

$npm run dev

在安装是提示是否加入vue-router时，选择Yes。

这里建议使用npm安装，有人使用cnpm速度更快，但是有可能集成包不全，出现问题

恭喜你，安装成功

文件目录如下：

文件目录

流程说明：

1、首先会打开首页 也就是我们看到的index.html文件

2、使用webpack打包之后默认加载main.js文件并将其引入到index.html文件中

三、开发

我们在main.js文件中引入相关模块以及组件

import Vue from 'vue'

import App from './App'

import Router from './router'    //这里引入的是router目录，会默认识别里面的index.js文件（不能是其他名字）

实例化vue对象配置选项路由及渲染App组件

newVue({

el:'#app',//这里绑定的是index.html中的id为app的div元素router,

render: h=>h(App)//这里的render: h => h(App)是es6的写法//转换过来就是：

                           暂且可理解为是渲染App组件//render:(function(h){//return h(App);//});

})

App.vue文件是我们的组件入口，之后所有的开发在这里面进行

模板

模板样式

要使用路由我们首先要在router/index.js文件中创建路由并配置路由映射 ，并通过export输出router到main.js文件中

建路由并配置路由映射

上面配置了2个组件映射 分别Detail.vue组件和Index组件，配置好之后我们就可以开始使用路由了

//使用router-link组件来导航

//通过传入‘to’属性指定链接

//默认会被渲染成一个标签

         

• Detail

         

• Index

//路由匹配到组件渲染在这里

点击Detail和Index导航会映射到对应的组件，然后将组件渲染在这里面

浏览器结果

刚学到这里，感觉只是学到了一点点，还有继续努力！！！！