vue.js学习之入门实例

之前一直看过vue.js官网api，但是很少实践，这里抽出时间谢了个入门级的demo，记录下一些知识点，防止后续踩坑，牵扯到的的知识点：vue、vue-cli、vue-router、webpack等。

首先看下实现的效果：

源码下载戳这里：源码

1、使用vue-cli脚手架创建项目

vue-cli init webpack tll

备注：使用webpack模板创建名为tll的项目，这里会按照提示输入一些项目基本配置，比如项目名称、版本号、描述、作者、是否启用eslint校验等等，不知道咋填的直接回车即可

2、根据提示启动项目

tll项目创建完成后，vue会自动提示几个命令运行，直接依次执行：

cd tll
npm i
npm run dev

这样，一个自动配置好的vue项目便运行起来了，包含热更新、自动校验等，当然这些配置在build文件夹下的webpack.base.conf.js里面，找到loader、preloader加载器，直接注释掉相应功能也行。比如我写代码时，配置了eslint后，稍微有个空格啥的

多余eslint都会报错导致整个项目无法运行，这时直接注掉preloader中和eslint相关的即可。

3、编写组件

在src的components目录下，创建home.vue组件，详细代码：

<!--首页组件-->
<template>
    <div class="home">
        <h3>{{msg}}</h3>
    </div>
</template>

<script>
    export default {
        name:"home",
        data(){
            return {
                msg:"这里是home视图"
            }
        }
    }
</script>

<style scoped>
    h3{
        background-color: #c5c5c5
    }
</style>

同样地，创建user.vue组件：

<template>
    <div>
        <h3>{{msg}}，获取到的参数是：{{$route.params.id}}</h3>
    </div>
</template>

<script>
    export default{
        name:"user",
        data(){
            return {
                msg:"这里是user视图"
            }
        }
    }
</script>
<style scoped>
    h3{
        background-color:gold
    }
</style>

最后是product.vue组件：

<template>
    <div class="product">
        <h3>{{msg}}，获取到的参数是：{{$route.params.id}}</h3>
    </div>
</template>

<script>
    export default{
        name:"product",
        data(){
            return {
                msg:"这里是product视图"
            }
        }
    }
</script>
<style scoped>
    h3{
        background-color:violet
    }
</style>

4、修改app.vue，添加路由

<template>
    <div id="app">
        <nav class="top-menu">
            <ul>
              <!--遍历li，输出顶部工具栏-->
               <li v-for="item in menulist">
                  <router-link :to="item.url">{{item.name}}</router-link>
               </li>
            </ul>
        </nav>
        <hr>
        <div>
          <router-view></router-view>
        </div>
    </div>
</template>

<script>
    export default {
        name:"app",
        data:function (){
            return {
                menulist:[
                    {"name":"首页",url:"/home"},
                    {"name":"用户",url:"/user/18"},
                    {"name":"产品",url:"/product/20"},
                ]
            }
        }
    }
</script>

<style>
    #app {

    }
    .top-menu ul, .top-menu li {
      list-style: none;
    }
    .top-menu {
      overflow: hidden;
    }
    .top-menu li {
      float: left;
      width: 100px;
    }
</style>

5、创建详细路由配置

在src根目录下直接新建文件router.js作为我们的自定义路由，详细代码：

import VueRouter from "vue-router"
import Home from "./components/Home.vue"
import User from "./components/User.vue"
import Product from "./components/Product.vue"

export default new VueRouter({
    routes:[
        {path:"/home",component:Home},
        {path:"/user/:id",component:User},
        {path:"/product/:id",component:Product}
    ]
})

这下便创建了三个导航的匹配路由，最后只要再做一件事即可，那便是让路由生效：将router挂载到vue实例上。

6、挂载路由组件到vue实例

修改main.js文件如下：

// 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 VueRouter from "vue-router"
import router from "./router"

//使用路由组件
Vue.use(VueRouter)

/* eslint-disable no-new */
new Vue({
  el: ‘#app‘,
  template: ‘<App/>‘,
  components: { App },
  router:router
})

至此，所有代码已完毕，效果浏览器直接查看吧。