近期团队有需求承接一些H5方面的开发，为了方便团队成员快速从原生移动端切入前端，特梳理一篇Vue快速上手文章。
概念理解
WebPack :前端资源模块化管理和打包工具，模块打包机。它做的事情包括分析项目的项目结构，将松散的模块按照依赖和规则打包成符合生产环境部署的前端资源，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
Vue_CLI3 :脚手架工具，借助WebPack用于快速构建标准vue项目。其作用是用配置好的模板迅速搭建起一个项目工程，省去自己手动配置webpack配置文件的内容，快速上手工程级别的项目开发，降低入门门槛。
一、vue环境配置
| 名称 | 地址 |
|---|---|
| Vue官方文档 | |
| Vue Github | |
| VueCli官方文档 | |
| VueCli Github |
1. Node环境配置
#查看本地Node版本
$ node -v
#查看本地Npm版本
$ npm -v
如果可以如下正常输出版本信息，说明本地已安装过node环境，则可开始后续操作。
- 本地node环境版本
- 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内即可。我给出一个链接，大家可以安装该链接操作来解决该问题。
-
可以通过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
二、Vue-cli构建项目
当前构建项目主要通过两种方式：
1. 命令行创建：vue create projectname
$ vue create vue-demo
-
当创建一个新项目时配置的一些信息
进入新创建的项目目录，运行命令即可启动项目
2. GUI页面创建：vue ui
$vue ui
-
敲完命令会打开一个浏览器窗口，将以图形化界面将你引导至项目创建的流程
下图为一个新建的项目的基础目录结构，项目由VisualStudioCode打开。
- 目录结构
项目主要目录结构介绍
整个项目入口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:根据一组数组的选项列表进行渲染。
<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>
结语：还会回来的。