vue学习笔记前置篇

笔者在入职新公司后，新公司的需求需要同时处理前端和后端交互逻辑，笔者在这之前对前端只是在几年前实现过基于jquery的相关功能，对vue相关，基础几乎为0。

在这几年，前端的变化日新月异，从最开始的ES5到现在ES6的普遍应用，开发工具也从基本的eclipse到现在最有竞争力的Jetbrains家族。其中，笔者目前特别钟情于Jetbrains家族。因此，java开发IDE 使用Jetbrains IDEA，数据库客户端使用DataGrids，前端开发目前是使用VS code(这些是前辈的习惯)，但我目前是想使用WebStorm。以此供读者参考。

现在是前置工具开发：

1.安装nodejs

2.切换nodejs镜像

有些人提供淘宝镜像，因为官方镜像非常慢，这里切换过程如下（网上很多，在这里只是做个记录）

使用命令行得到原本的镜像地址

npm get registry 

> https://registry.npmjs.org/

设成淘宝的

npm config set registry http://registry.npm.taobao.org/

扫描二维码关注公众号，回复： 9997033 查看本文章

2.换成原来的

npm config set registry https://registry.npmjs.org/

3.安装vue模块

npm install vue

4.webpack模块安装

npm install webpack

特别的，如果全局安装，则在命令行后加 -g 就可以了。

测试代码，保存为vue-test.js文件：

const Vue=require('vue')

const mixin = {
    data() {
      return {
        message: 'hello',
        foo: 'abc'
      }
    }
  }
  
  new Vue({
    mixins: [mixin],
    $data () {
      return {
        message: 'goodbye',
        bar: 'def'
      }
    },
    created () {
      console.log(this.$data)
      // => { message: "goodbye", foo: "abc", bar: "def" }
    }
  })

通过 node test-vue.js 运行该代码，如果控制台有输出，则说明vue安装正确。