001-读书笔记-Vue官网 认识Vue与搭建学习环境

1.Vue是什么

Vue.js (读音 /vjuː/，类似于 view) 是一套构建用户界面的渐进式框架。

其实，记住渐进式进行了，如果要跟深入的了解，应该到官网看看。

2.搭建环境

2-1 使用vue-cli创建项目

依赖 Node 和 npm

首先，全局安装vue-cli：

$ npm install --g vue-cli

其次，创建项目：

$ vue init webpack testvue

? Project name (testvue)                     ==> 确定
? Project description (A Vue.js project)     ==> 确定
? Author (...)                               ==> 确定
? Vue build standalone                       ==> 确定
? Install vue-router? No                     ==> n
? Use ESLint to lint your code? Yes          ==> y
? Pick an ESLint preset                      ==> none
? Setup unit tests with Karma + Mocha? No    ==> n
? Setup e2e tests with Nightwatch? No        ==> n

进入项目文件夹，安装依赖

$ cd testvue
$ npm install

清空src目录，并创建两个文件main.js和App.vue：

$ cd src && rm -f -r *
$ touch main.js && touch App.vue

// main.js 程序的入口
import Vue from 'vue'
import App from './App'

new Vue({
  render: h => h(App)
}).$mount('#app')

<template>
  <div id="app">
    {{name}}
  </div>
</template>

<script>
  export default {
    name: 'app',
    data() {
      return {
        name: 123
      }
    }
  }
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: left;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>

2-2 配置eslint进行语法检查

首先，在项目中安装eslint：

$ npm install --save-dev eslint

其次，安装各种依赖：

$ npm install --save-dev eslint-plugin-babel eslint-config-vue eslint-plugin-vue

修改.eslintrc.js文件：

module.exports = {
  "parser": "babel-eslint",
  "extends": [
    "vue"
  ],
  "plugins": [
    "babel"
  ],
  "env": {
    "browser": true
  },
  "rules": {
    "semi": [2, "never"],
    "max-len": [2, 300, 2],
    "generator-star-spacing": 0,
    "space-before-function-paren": 0
  }
}

2-3 配置 Vue Devtools

1. 打开插件网址(需要翻墙)
2. 点击添加到Chrome
3. 在弹出的窗口中，点击添加扩展程序
4. 在谷歌人员开发工具中打开Vue面板
5. 在谷歌开发人员工具中通过 ESC 切换 Console 控制台的显示

2-4 运行程序

现在，准备工作已经准备好了，可以执行程序了。执行之前，先在App.vue中放一些测试数据：

<template>
  <div id="app">
    测试数据
  </div>
</template>

执行命令来运行程序：

$ npm run dev

3.总结

现在，学习环境已经搭建完成了。以后代码没有特殊指明，都是在 App.vue 中进行书写。

Vue生命周期很重要，写了一篇关于Vue生命周期的文章，文章地址：Vue的生命周期

本篇笔记对应Vue官网：

• 安装
• 介绍
• Vue实例