从客户端到前端入门总结

一. 概述

笔者是客户端研发出身，如果只有一门技术傍身，不足以胜任市场对客户端研发的要求，于是想学习大前端技术栈。但苦于日常工作繁琐，一直没有机会学习（其实就是自身懒惰）。直到工作需要，需要写一个微信小程序，这才下决心学习前端技术。其实如果想入门前端，从微信小程序入手不失为一个好的方法。初次接触微信小程序，它的数据双向绑定机制，让写习惯了客户端的我叹为观止。目前我入门前端的技术路径是：客户端---微信小程序---混合App---H5。一些我自己的经验总结出来，希望对你有所帮助。当然阅读这篇文章的前提是，你已经了解了基本的Html、CSS、JS语法。

二. 环境与工具

1. 前端环境搭建

笔者使用的Mac电脑，所有的环境搭建工作都是基于Mac电脑来操作的。首先安装node.js与npm:

node.js

node 是一个基于 V8 引擎的 Javascript 运行环境，它使得 Javascript 可以运行在服务端，直接与操作系统进行交互，与文件控制、网络交互、进程控制等。简单的说node.js就是运行在服务端的 JavaScript。你可能会有疑问，我写前端页面为甚么需要一个运行在服务端的的JS环境。其实我们这里使用node最关键是需要安装npm.

npm

npm是node.js的包管理工具（package manager），为啥我们需要一个包管理工具呢？因为我们在Web开发时，会用到很多别人写的JavaScript代码。如果我们要使用别人写的某个包，每次都根据名称搜索一下官方网站，下载代码、解压、再使用，非常繁琐。于是一个集中管理的工具应运而生：大家都把自己开发的模块打包后放到npm官网上，如果要使用，直接通过npm安装就可以直接用。他类似于iOS开发中的cocoapods,Android开发中的Maven,这样就好理解了。
node下载地址点击这里,按照步骤安装完成后，终端输入

node -v
npm -v

查看安装版本，出现下面的版本号说明安装成功。

node

注意如果提示-bash: node: command not found,说明还需要配置一下环境变量。配置方式也很简单，在Finder中查找文件夹，输入路径/private/etc,找到profile文件，加上一下语句

pic

export NODE_HOME="node安装路径(bin路径的父级路径)" 
export PATH=$PATH:$NODE_HOME/bin

node安装路径(bin路径的父级路径):你可以通过命令which node 命令来查看。例如我的本地路径是/usr/local/bin/node，那么可以这样设置

export NODE_HOME="/usr/local"
export PATH=$PATH:$NODE_HOME/bin

重新保存文件后，再次输入node -v 验证一下。下面是一些npm常用命令：

// 本地安装模块
npm install <Module Name>
// 全局安装模块
npm install <Module Name> -g
// 搜索模块
npm search  <Module Name>
// 更新模块
npm update <Module Name>
//卸载模块
npm uninstall <Module Name>
// 安装项目的全部依赖
npm install

yarn:

yarn是一个由 Facebook 贡献的 Javascript 包管理器。yarn是为了弥补npm的一些缺陷而出现的。在日常开发中你可以使用npm也可以使用yarn进行包的管理，只不过相比npm而言，它的速度更快，并提供了离线模式。关于它我们不会过多的介绍，你可以去它的中文网站查看.它的安装方式也很简单，直接通过Homebrew进行安装，命令 brew install yarn. 它的一些常用指令：

// 初始化一个新项目
yarn init
// 添加依赖包
yarn add [package]
// 添加依赖包的某个版本
yarn add [package]@[version]
// 升级依赖包
yarn upgrade [package]
// 移除依赖包
yarn remove [package]
// 安装项目的全部依赖
yarn install 或者 yarn

可以在项目中混用yarn与npm,但是最好不要这样。

2. 开发工具选择

pic1

VSCode安装插件：

chanjian

选择[扩展]-[搜索插件]-安装即可
下面是我使用的一些常用的VSCode插件：

(1) vue vscode snippets
它是Vue项目代码的骨架插件，例如输入vbase,会直接生成以下代码

<template>
    <div>

    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>

</style>

相似的还有vdata、vmethod、vfor等操作
(2) Auto Close Tag 自动闭合HTML标签
(3) Auto Rename Tag 修改HTML标签时，自动修改匹配的标签
(4) Color Highlight 颜色值在代码中高亮显示
(5) HTML CSS Class Completion CSS class提示插件
(6) Vetur Vue多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。vscode官方钦定Vue插件，Vue开发者必备
(7) VSCode-icons 文件图标，方便定位文件
(8) Color Highlight 颜色值在代码中高亮显示
(9) HTML CSS Support 智能提示CSS类名以及id
(10) Beautify 格式化代码工具,美化javascript，JSON，CSS，Sass，和HTML
(11) Open in Browser 直接在浏览器中打开你当前的文件

三.Vue项目搭建与开发事项

目前前端几大主流框架React、Vue、Angular，三个框架各有优劣，个人感觉Vue的入门难度最小，而且有良好的中文教程和广泛的第三方支持，如果要入门前端技术，从Vue入手是比较明智的。

1.Vue项目搭建

使用Vue CLI脚手架构建Vue项目

(1). 使用 npm 或 yarn 全局安装 Vue CLI

npm install -g @vue/cli
# OR
yarn global add @vue/cli

如果页面报错如下

error

sudo npm install -g @vue/cli

执行完成后输入命令vue -V查看Vue/Cli 版本，出现如下提示说明安装成功。

pic

(2). 在工程所在目录创建项目

执行以下命令

vue create my-project
# OR
vue ui

vue create 是使用命令行创建项目，vue ui是以图形化界面创建和管理项目。

(3). 配置工程

输入创建命令后提示：

pic

此时会判断你的npm/yarn源的连接速度，询问你是否切换至淘宝镜像，我们输入n,继续

pic

提示：项目是使用默认配置（Vue2还是Vue3 都包含babel, eslint)还是手动选择，我们选择手动配置，继续

pic

• Choose Vue version: 选择Vue的版本 选择
• Babel :将脚手架中浏览器不认识的一切东西翻译为浏览器认识的 选择
• TypeScript : 强类型的 JaveScript
• Progressive Web App (PWA) Support : 渐进式App，主要用于兼容移动端
• Router : Vue 路由管理 选择
• Vuex: Vue的状态管理器 选择
• CSS Pre-processors : CSS 预处理器，可选择使用 less、sass、stylus等预处理器 选择
• Linter / Formatter :代码检测和格式化
• Unit Testing: 单元测试
• E2E Testing: 端到端测试
  选中好后继续

按方向键是进行上下移动，空格是选中/取消，回车是确定当前所选内容，继续下一步操作

pic

提示：选择Vue版本，我们选择Vue3版本，继续

pic

提示：路由方式是否使用history模式。一般都是单页面开发不选择history，输入n继续

pic

提示：选择CSS预处理器

• node-sass 是自动编译，实时的
• dart-sass 需要保存后才会生效
• Less 最终会通过编译处理输出css到浏览器，Less 既可以在客户端上运行，也可在服务端运行 (借助 node.js)
• Stylus 主要用来给node项目进行CSS预处理支持，Stylus功能上更为强壮，和Js联系更加紧密，可创建健壮的、动态的的CSS

我们选择 Sass/SCSS (with node-sass)，继续

pic

提示：Babel, ESLint是使用独立文件，还是在package.json一个文件中保存所有配置信息。选择第一个，继续

pic

提示：是否为以后创建的项目保存我们当前所选的这些配置，我们选择否,开始自动创建项目

pic

项目创建完成后，cd到当前工程目录下，执行yarn serve,就可以运行当前项目了。

pic

在浏览器中输入上面的地址就可看到我们当前创建的Vue工程了

pic

至此，我们整个工程创建完成。接下来总结一下在移动Web开发中常用的三方库。

2.第三方库使用总结

(1).移动Web布局库

我们在进行移动Web页面开发时，需要对页面进行布局，常用的布局方式有用rem来作单位，配合h5新的meta属性来适配屏幕做开发的，也有直接使用三方库postcss-px-to-viewport来进行页面布局的。我们直接使用第二种方式：
使用yarn进行安装,cd 到工程目录后执行

$ yarn add -D postcss-px-to-viewport

执行完成后，在postcss.config.js中进行参数配置

module.exports = {
  plugins: {'postcss-px-to-viewport': {
    unitToConvert: 'px',// 要转化的单位
    viewportWidth: 375,// UI设计稿的宽度
    unitPrecision: 5,// 转换后的精度，即小数点位数
    propList: ['!*'],// 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
    viewportUnit: 'vw',// 指定需要转换成的视窗单位，默认vw
    fontViewportUnit: 'vw',// 指定字体需要转换成的视窗单位，默认vw
    selectorBlackList: [],// 指定不转换为视窗单位的类名，
    minPixelValue: 1,// 默认值1，小于或等于1px则不进行转换
    mediaQuery: false,// 是否在媒体查询的css代码中也进行转换，默认false
    replace: true,// 是否转换后直接更换属性值
    exclude: [],// 设置忽略文件，用正则做目录名匹配
    landscape: false,// 是否处理横屏情况
    landscapeUnit: 'vw',//横屏单位
    landscapeWidth: 568//横屏宽度
  }}
}

(2). UI库

pic

在进行移动Web开发中，第三方UI库的使用是少不了的，我们最常用的有vant、Element UI等，我们以vant来说明,进行工程目录执行

# Vue 2 项目，安装 Vant 2：
npm i vant -S

# Vue 3 项目，安装 Vant 3：
npm i vant@next -S

# 通过 yarn 安装vant3
yarn add vant@next

注意对于Vue2和Vue3项目引入方式是不一样的，我们是Vue3项目，因此执行npm i vant@next -S或者yarn add vant@next

安装完成后就可以引入组件了，也需要注意，Vue2与Vue3的配置方式也是不同的，具体可以去查看Vant官网查看，这里不在赘述。

(3). 网络请求库

在项目中进行网络请求时，最常用的第三方库是axios,他的引入方式也很简单：

$ npm install axios
OR 
$ yarn add axios

对于Vue2项目而言安装完成后在mian.js中引用axios，并绑到原型链上。使用插件的时候，一般要在入口文件main.js中引入，因为mian.js是项目首先运行的文件：

import Vue from 'vue'
import axios from ‘axios’
Vue.prototype.$http = axios

它的用法很简单：

// get请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
// post 请求
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
// 执行多个并发请求
function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));

但是对于Vue3项目而言，除了引入axios外，还需要引入vue-axios,引入方式：

$ npm install --save axios vue-axios

vue-axios是将axios集成到Vue.js的小包装器，可以像插件一样进行安装。在mian.js中引用axios，vue-axios，通过全局方法Vue.use()使用插件：

import { createApp } from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'// Vue3 使用 axios 需要配合 vue-axios 一起使用

// 全局引入组件
createApp(App).use(VueAxios, axios).mount('#app');

使用方法：

export default {
  name: 'App',
  methods: {
    getList() {
      this.axios.get(api).then((response) => {
        console.log(response.data)
      })
      // or
      this.$http.get(api).then((response) => {
        console.log(response.data)
      })
    }
  }
}

(4).项目中的图片使用

在开发项目时，免不了要使用到图片，目前项目常用的矢量图片库非阿里的iconfont莫属了，它最大的好处是你可以像调整文字一样，设置图片的颜色和大小，而不用担心图片失真问题。它的使用方式也很简单：
把我们要使用的图片添加到项目中，然后点击下载到本地

pic

• 支持多色图标了，不再受单色限制。
• 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
• 兼容性较差，支持 ie9+,及现代浏览器。
• 浏览器渲染svg的性能一般，还不如png。
  使用步骤如下：

第一步：拷贝下载文件iconfont.js到项目目录

在需要用到iconfont 的地方引入这个js文件目录

import '../utils/iconfont';

第二步：加入通用css代码（引入一次就行）

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

第三步：挑选相应图标并获取类名，应用于页面：

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

#icon-xxx 就是你选的图片类名
如果要调整大小、颜色、位置等

.icon {
  font-size: 30px;
  color: orange;
  position:relative;
  display:inline-block;
  top: calc(12px + 0.15rem);
  right: 6px;
}

注意：加入的图片最好是去掉填充色的,然后你才能修改颜色,否则设置颜色不生效。

四.总结

转眼做前端已经小半年了，越学习越感觉前端内容的复杂，越感觉自己所学知识的浅薄，写这篇文章也算是对这段时间的总结。关于ESlint的使用可以参考这个文章：
参考：
postcss-px-to-viewport
element UI
axios
iocnfont
https://v3.cn.vuejs.org/
https://cli.vuejs.org/zh/guide/