基于Vue_CLI3快速上手Vue

近期团队有需求承接一些H5方面的开发，为了方便团队成员快速从原生移动端切入前端，特梳理一篇Vue快速上手文章。

概念理解

WebPack :前端资源模块化管理和打包工具，模块打包机。它做的事情包括分析项目的项目结构，将松散的模块按照依赖和规则打包成符合生产环境部署的前端资源，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

Vue_CLI3 :脚手架工具，借助WebPack用于快速构建标准vue项目。其作用是用配置好的模板迅速搭建起一个项目工程，省去自己手动配置webpack配置文件的内容，快速上手工程级别的项目开发，降低入门门槛。

一、vue环境配置

名称	地址
Vue官方文档	https://cn.vuejs.org/
Vue Github	https://github.com/vuejs/vue
VueCli官方文档	https://cli.vuejs.org/zh/guide/
VueCli Github	https://github.com/vuejs/vue-cli

1. Node环境配置

官方文档中说明Vue CLI 需要 Node.js 8.9 或更高版本 。

#查看本地Node版本
$ node -v 
#查看本地Npm版本
$ npm -v 

如果可以如下正常输出版本信息，说明本地已安装过node环境，则可开始后续操作。

• 本地node环境版本

否则，点击 Node.js，进入官网下载自己电脑环境对应的版本安装，安装好node后npm会一起安装完成。

• node官网下载安装

2. Vue环境配置

安装最新版本VueCLI

# 最新稳定版
$ npm install vue
# 安装vue_cli3.x版本脚手架
$ npm install -g @vue/cli   
# 或者用下述命令
$ yarn global add @vue/cli
#安装完后，输入命令行查看vue版本
$ vue -V  
#或者用下述命令
$ vue --version

• 因为本人使用的是mac，有使用windows同事跟着该篇教程配置走的时候，遇到了一个问题。如果输入vue -V 出现vue不是内部或外部命令提示，此时需要将vue的安装路径配置到path内即可。我给出一个链接，大家可以安装该链接操作来解决该问题。path配置参考

• 可以通过vue -h查看常用命令
  

  上述命令行操作基于vue_cli3.x版本，关于旧版本需要先通过下述命令先卸载它

$ npm uninstall vue-cli -g 
或 
$ yarn global remove vue-cli 。

3.安装淘宝cnpm

因为npm安装插件从国外服务器下载，受网络影响大，所以一般使用会配置淘宝镜像，cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm。
安装cnpm
(1)输入以下命令

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

(2)输入cnpm -v查看配置是否正常

$ cnpm -v

(3)windos用户将路径配置到系统变量path中
　　因为cnpm会被安装到D:\Program Files\nodejs\node_global下，而系统变量path并未包含该路径。在系统变量path下添加该路径即可正常使用。Windos用户参考

二、Vue-cli构建项目

当前构建项目主要通过两种方式：

1. 命令行创建：vue create projectname

$ vue create vue-demo 

• 当创建一个新项目时配置的一些信息
  进入新创建的项目目录，运行命令即可启动项目

2. GUI页面创建：vue ui

$vue ui

• 敲完命令会打开一个浏览器窗口，将以图形化界面将你引导至项目创建的流程
  

  下图为一个新建的项目的基础目录结构，项目由VisualStudioCode打开。

• 目录结构

VueCLI3.x相比较2.x 少了很多webpack文件的配置信息，精简了很多，底层实际上对webpack进行了封装，打开node_modules依然可以看到很多底层依赖webpack。如果有需求要修改，可以查看VueCli官方文档。

项目主要目录结构介绍

整个项目入口html在public/index.html,入口js在src/main.js 下

• 2.1 node_modules 主要为引用的一些组件模块信息
• 2.2 public 目录下index.html为项目html主入口
• 2.3 src 目录下的man.js为整个工程入口js，其它则为开发时组件、页面、资源等文件分类目录
• 2.4 browserslistrc：配置浏览器的要求，css针对不同浏览器会有兼容性问题。配合postcss的autoprefixer插件使用
• 2.5 eslintrc.js 是一个代码规范和错误检查工具配置，对于不符合规则要求的写法会报错
• 2.6 gitignore 忽略哪些文件无需上传
• 2.7 babel.config.js 文件预设
• 2.8 package-lock.json npm5以上锁版本的功能，不会重复安装，版本管理的一个文件
• 2.9 package.json 项目的一系列描述和依赖
• 2.10 postcss.config.js

module.exports = {
  plugins: {
    autoprefixer: {}
  }
}

autoprefixer依据什么抓前缀呢，就是依据browserslistrc的内容

三、基础语法

1. 基础数据、事件和方法

• v-text: 标签会被转义,v-text会将元素当成纯文本输出
• v-html:不会被转义,会将元素当成HTML标签解析后输出
• v-on:click:在实际使用中一般直接@click来使用

<template>
  <div>
   //这里用v-html和v-text 将会出现不同的效果
    <div v-html="content"></div>
    <button @click="handleClick">Click</button>
  </div>
</template>
<script>
export default {
  name: "home",
  data() {
    return {
      content:"Hello<br>Ricky"
    };
  },
  methods: {
    handleClick: function() {
      alert('click');
    }
  }
};
</script>

2. 属性绑定和双向绑定

• v-bind: 属性绑定语法，在实际运用中一般直接用:即可
• v-model &{{}}：双向绑定语法

<template>
  <div>
    //这里将data中的值赋予了title这个属性，这里全写实际为v-bind:title = "title"
    <div :title="title">
    //通过v-model和{{}} 将输入框中所输入字符串和文本中显示字符串一一致，即同步引用了data中的content。
      <input v-model="content">
      {{content}}
    </div>
  </div>
</template>
<script>
export default {
  name: "home",
  data() {
    return {
      content: "Hello<br>Ricky",
      title: "this is a title"
    };
  }
};
</script>

3. 计算属性和侦听器

• computed：{} :计算属性
• watch：{} ：监听属性

<template>
  <div>
    姓：<input v-model="firstName">
    名：<input v-model="lastName">
    {{fullName}}{{count}}
  </div>
</template>
<script>
export default {
  name: "home",
  data() {
    return {
      firstName: "",
      lastName: "",
      count: 0
    };
  },
  computed: {
    //动态计算属性
    fullName: function() {
      //fullName属性通过其它两个属性计算而来，如果两个值都未改变，fullName会使用此前的缓存值，性能比较高
      return this.firstName + "" + this.lastName;
    }
  },
  watch: {
    //检测到数据变化就会回调方法
    fullName: function() {
      this.count++;
    }
  }
};
</script>

4. v-if、v-show、v-for指令

• v-if:用于条件性地渲染一块内容
• v-show:用于根据条件展示元素的 指令

v-if和v-show看起来似乎效果相同，但实际v-show只是隐藏了元素，并不会将元素从dom中移除，而v-if会直接将元素从dom中移除。频繁显示隐藏用v-show，频率不高则用v-if。

• v-for:根据一组数组的选项列表进行渲染。

v-for 加key会提升渲染效率，但是key的值要求每次都不相同，如果数组中有相同的数据，则不能使用item作为key，可以用index。但需要频繁的对列表进行排序操作，则index也会出问题。因为Virtual DOM 使用Diff算法实现的原因，使用index作为key会增加渲染降低效率。原理

<template>
  <div>
    <div v-show="show">HelloWorld</div>
    <button @click="handleClick">Click</button>
    <ul>
      <li v-for="(item,index) of list" :key="index">{{item}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "home",
  data() {
    return {
      show: true,
      list: [1, 2, 3]
    };
  },
  methods: {
    handleClick: function() {
      this.show = !this.show;
    }
  }
};
</script>

结语：还会回来的。