1.安装vue-cli
安装vue-cli的前提是你已经安装了npm,安装npm你可以直接下载node的安装包进行安装。你可以在命令行工具里输入npm -v 检测你是否安装了npm和版本情况。出现版本号说明你已经安装了npm和node,我这里的npm版本为3.10.10。如果该命令不可以使用,需要安装node软件包,根据你的系统版本选择下载安装就可以了。
下载地址:http://nodejs.cn/download/
npm没有问题,接下来我们可以用npm 命令安装vue-cli了,在命令行输入下面的命令:
npm install vue-cli -g
-g:代表全局安装,安装完成后,可以用vue-V来进行vue-cli的版本号。注意这里的V是大写的。
如果vue-V的命令管用了,说明我们已经顺利的把vue-cli安装到我们的计算机里了
2.初始化项目
在实际开发中,一般我们都会使用webpack这个模板,那我们这里也安装这个模板,在命令行输入以下命令:
vue init webpack vuecliTest
输入命令后,会询问我们几个简单的选项,我们根据自己的需要进行填写就可以了。
- Project name :项目名称 ,如果不需要更改直接回车就可以了。注意:这里不能使用大写,所以我把名称改成了vueclitest
- Project description:项目描述,默认为A Vue.js project,直接回车,不用编写。
- Author:作者,如果你有配置git的作者,他会读取。
- Install vue-router? 是否安装vue的路由插件,我们这里需要安装,所以选择Y
- Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n,如果你是大型团队开发,最好是进行配置。
- setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha,我们这里不需要,所以输入n。
- Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试,我们这里不需要,所以输入n。
命令行出现上面的文字,说明我们已经初始化好了第一步。命令行提示我们现在可以作的三件事情。
1、cd vuecliTest 进入我们的vue项目目录。
2、npm install 安装我们的项目依赖包,也就是安装package.json里的包,如果你网速不好,你也可以使用cnpm来安装。
3、npm run dev 开发模式下运行我们的程序。给我们自动构建了开发用的服务器环境和在浏览器中打开,并实时监视我们的代码更改,即时呈现给我们。
3.解读src/router/index.js文件
import Vue from 'vue' //引入Vue
import Router from 'vue-router' //引入vue-router
import Hello from '@/components/Hello' //引入根目录下的Hello.vue组件
Vue.use(Router) //Vue全局使用Router
export default new Router({
routes: [ //配置路由,这里是个数组
{ //每一个链接都是一个对象
path: '/', //链接路径
name: 'Hello', //路由名称,
component: Hello //对应的组件模板
}
]
})
增加一个Hi的路由和页面
对路由的核心文件熟悉后,我们试着增加一个路由配置,我们希望在地址栏输入 http://localhost:8080/#/hi 的时候出现一个新的页面,先来看一下我们希望得到的效果。
看到了效果,我们看一下具体的操作步骤:
- 在src/components目录下,新建 hi.vue 文件。
- 编写文件内容,和我们之前讲过的一样,文件要包括三个部分<template><script>和<style>。文件很简单,只是打印一句话。
<template>
<div class="hello2">
<h1>{{msg}}</h1>
</div>
</template>
<script type="text/ecmascript-6">
export default{
name:'hi',
data(){
return{
msg:'hi,I am judy'
}
}
}
</script>
引入 hi组件:我们在router/index.js文件的上边引入hi组件
import hi from '@/components/hi'
增加路由配置:在router/index.js文件的routes[]数组中,新增加一个对象,代码如下。
{
path:'/hi',
name:'hi',
component:hi
}
以下是index.js里面的路由文件
import Vue from 'vue' //引入vue
import Router from 'vue-router' //引入vue-router
import HelloWorld from '@/components/HelloWorld' //引入根目录下HelloWorld组建
import hi from '@/components/hi'
Vue.use(Router) ; //Vue全局使用Router
export default new Router({
routes: [ //配置路由,这里是个数组
{ //每一个链接都是一个对象
path: '/', //链接路径
name: 'HelloWorld', //路由名称
component: HelloWorld //对应的组件模版
},
{ //每一个链接都是一个对象
path: '/hi', //链接路径
name: 'hi', //路由名称
component: hi //对应的组件模版
}
]
})
router-link制作导航
<router-link to="/">[显示字段]</router-link>
- to:是我们的导航路径,要填写的是你在router/index.js文件里配置的path值,如果要导航到默认首页,只需要写成 to=”/” ,
- [显示字段] :就是我们要显示给用户的导航名称,比如首页 新闻页。
明白了router-link的基本语法,我们在src/App.vue文件中的template里加入下面代码,实现导航。
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
<p>
导航:
<router-link to="/hi">hi页面</router-link>
<router-link to="/">首页</router-link>
</p>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
总结:这节课我们在vue-cli的构建下对vue-router有了一个基本的了解,学会了vue-router的核心文件的基本结构,学会了如何添加一个新的模板页面,还学会了用<router-link>标签设置导航。在这里我必须要再强调一遍,路由是Vue中最重点的内容,你必须完全掌握学会。你可以先听一遍视频教程,然后跟着文字教程来作你的练习。一步一个脚印,我们都会成为Vue大神的,小伙伴们加油了!!!