vue2

vue2入坑随记(一)

2017-05-17 08:52 by stoneniqiu, 540 阅读, 8 评论, 收藏, 编辑

 都说Vue2简单，上手容易，但小马过河，自己试了才晓得，除了ES6语法和webpack的配置让你感到陌生，重要的是思路的变换，以前随便拿全局变量和修改dom的锤子不能用了，变换到关注数据本身。vue的官方文档还是不错的，由浅到深，但是当你用vue-cli构建一个工程的时候，发现官方文档还是不够用，得参考git上开源的项目并去学习es6。而且vue的全家桶(vue-cli,vue-router,vue-resource,vuex)还是都要上的。

1.vue-cli

这个构建工具大大降低了webpack的使用难度，支持热更新，有webpack-dev-server的支持，相当于启动了一个请求服务器，给你搭建了一个测试环境，你只关注开发就好。

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

热更新的机制是检测文件的变化并用websocket通知客户端做出相应的更新。详细的可以移步：【webpack】-- 模块热替换

2.vue-router

vue的路由还是很方便的，比ag1的时候要方便很多。这种方便体现在三个方面：

1个是路由和页面(组件)对应：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Chat from '@/components/Chat'
import Firends from '@/components/Firends'
import Logon from '@/components/Logon'

Vue.use(Router)
let router=new Router({
  routes: [
    {
      path: '/home',
      name: 'Home',
      component: Home
    },
     { path: '/', redirect: '/home' },//重定向
    {
      path: '/chat',
      name: 'Chat',
      component: Chat
    },
    {
      path: '/firends',
      name: 'Firends',
      component: Firends
    },
    {
      path: '/logon',
      name: 'Logon',
      component: Logon
    }
  ]
});

常人的思路就是这样，而ag1中还需要带上控制器(vue中没有这个概念,取而代之的是关注组件就行)，这样用起来更简单。MVC模式中，需要指到controller下的action，如果导航分类多，对应策略是嵌套路由。

2个是可以具体到元素了：

<router-link    class="footer-item"  exact  to="home">首页</router-link>

这个to后面的home(忽略大小写)就是上面定义的路由名称。这样就很方便了。类似于Asp.net MVC 的路由可以用名称来渲染出路径，而不用什么时候都要输入路径。