前端修仙之路

基于Vue_CLI3快速上手Vue

2019-02-25  本文已影响247人  欧公

近期团队有需求承接一些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.js，进入官网下载自己电脑环境对应的版本安装，安装好node后npm会一起安装完成。

2. Vue环境配置

安装最新版本VueCLI

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

$ 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

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

项目主要目录结构介绍

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

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

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

三、基础语法

1. 基础数据、事件和方法
<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. 属性绑定和双向绑定
<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. 计算属性和侦听器
<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-show只是隐藏了元素，并不会将元素从dom中移除，而v-if会直接将元素从dom中移除。频繁显示隐藏用v-show，频率不高则用v-if。

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>

结语：还会回来的。

上一篇 下一篇

猜你喜欢

热点阅读