2018-11-07

自己搞了这么久不是大神，纯前端小白一个，个人能力不足，今天注册了一个账号用来陪伴自己的成长，大家都有使用过Vue吧，今天简单的从VUE的基础入门开始讲一下从零是怎么开发的。nodejs和npm的安装以及环境搭建。

在做前端开发大多数现在都需要依赖nodejs和npm包，nodejs是基于V8引擎的javascript开发的运行环境，npm的安装就不用说了，直接傻瓜式的安装就可以了，这里面需要说的是cnpm的安装。cnpm也是基于npm的安装的，

npm i -g cnpm --register=https//registry.npm.taobao.org

这样就能够安装淘宝镜像了，淘宝镜像的使用跟npm是一样的，cnpm安装插件会更快。

VUE的搭建以及vue-cli的使用

安装依赖 npm i vue-cli -g

---

这个时候进入相应的文件初始化VUE项目就可以了，当然window系统可以通过cd 进入相应的文件夹，或者直接右键get bash就可以在确定使用webpack+vue进行开发时候就可以进行项目的初始化了这个时候我们着重的讲一下

---

项目

初始化项目 imook是我要进行的项目的名字

其他的就不需要刻意的作解释了，在这只简单的说一句vue-router是页面跳转需要用到的插件，在这安装一下就可以了。

这个里面简单的说一下配置文件

---

这里面是配置文件node_modules是文件的依赖文件，安装文件依赖用的

bulid是打包的配置所依赖的文件夹 config是相应的打包的配置相对应的bulid的配置 src是扩展的源码，main.js是扩展文件 static主要放我们的静态资源

需要注意的是任何项目在git clone之后都需呀安装依赖的也就是说都需要cnpm install

创建一个新的项目vue init webpack Demo6

这样项目跑起来了，相应的文件也介绍完了，后续单独写一片文章介绍webpack文件

第一章，第一讲Vue-router

vue-router是客户端实现页面跳转的插件，单页面应用的插件，也就是说只改变页面的内容。

前端路由的优点 ：用户的体验好，不需要每次从服务器端全部获取数据，不需要每次都都重新加载JS和CSS，只需要加载一页的就可以了。

缺点：不利于SEO

          没有办法进行缓存，所以每次浏览器的前进或者后退都需要重新向服务器端发送请求

        无法记住滚动的位置，打个比方如果你进入博客的第三页这个时候就不能进去第一页的  滚动的之前的位置。

vue-router是实现SPA的关键

其中有两个关键标签

<router-link></router-link>或者this.$Router.push({{path:''}})

router-link 给他一个to相当于a标签

<router-view></router-view>

进行组件的渲染

讲解：

1动态路由的匹配

2嵌套路由

3编程式路由

4命名路由命名视图

动态路由的模式

模式                                                              匹配路径                                              $route.params

/user/:username                    /user/evan                      {username:'evan'}

/user/:username/post/:post_id      /user/evan/post/123            {username:'evan',post_id:123}

下面简单的用一些实例来说一下动态路由的使用在router/indext.js中使用

export default new Router({

mode:'history',

//请求地址，这里面也可以设置mode：‘hash’这样就显示#号了，虽然也可以显示数据但是现在主流的还是history

  routes: [

    {

      path: '/Goods/:goodsId/user/:username',

      name: 'GoodList',

      component:GoodList

    }

  ]

})

在组建中我们可以输出一下

---

<template>

<div>这是商品列表

<span>{{ $route.params.goodsId }}</span>

<span>{{ $route.params.username }}</span>

</div>

//我们可以通过$route的实例来实现因为params封装了$route的实例

这个时候$route.params.goodsId

      $route.params.username

</template>

<script>

export default{

data(){

return{

msg:'hello Vue'

}

}

}

</script>

---

注意

export default{}必须要有，否则会报错。

---

第二章 嵌套路由

嵌套路由的使用，两边导航栏显示内容有一部分这样就会显示，关键词

children：[ ]注意必须是数组

知识点@是根路径映射到src

在html页面中需要注意的是goods/title的路径，而不是/tile这一点被误会，那么

第三章 编程式路由

也就是通过编程样式实现路由的跳转

1  通过$router.push('name')可以实现路由的跳转

2 通过object对象，给对象赋值path属性就可以进行跳转$router.push({ path:'name' })

3跳转的同时进行传参$router.push({ path:'name?a=123' })或者通过query

$router.push({ path:'name',query:{'a=112'} })

4$router.go(-1)

简单的举一个例子以上文我们提到的<button @click='jump'></button<>

<script>

export default{

//定义一个methods方法

methods：{

jump(){

this.$router.push('/cart')

}}}

</script>

---

需要注意一点进行参数接受的时候分为两类

$route.params.goodsID  这个是设置动态路由的时候进行传递的

$route.query.goodsID 这个是设置路由跳转的时候，单页面跳转直接使用

this.$router.push({ path:'/cart?goodsID=123' })这种形式的路由传参需要$route.query.goodsID

这个里面跳转页面的方法

this.$router.push('/cart')

this.$router.push('/cart？useID=123')

this.$router.push(-2)

一般路由的跳转使用这种方法

---

命名路由和命名视图

给路由定义不同的名字，根据名字进行匹配

给不同的router-view定义名字，通过名字进行相应的组建的渲染

主要的用法就是在app.vue中进行书写

然后给取不同的name的值进行页面的渲染

v-bind:to='{ name:"cart",params:{cartId:123} }'

routes: [

    {

      path: '/',

      name: 'GoodList',

      components:{

      default:GoodList,

      title:Title,

      img:Image

      }}]

    })

---