从客户端到前端入门总结

一. 概述

笔者是客户端研发出身，如果只有一门技术傍身，不足以胜任市场对客户端研发的要求，于是想学习大前端技术栈。但苦于日常工作繁琐，一直没有机会学习（其实就是自身懒惰）。直到工作需要，需要写一个微信小程序，这才下决心学习前端技术。其实如果想入门前端，从微信小程序入手不失为一个好的方法。初次接触微信小程序，它的数据双向绑定机制，让写习惯了客户端的我叹为观止。目前我入门前端的技术路径是：客户端---微信小程序---混合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

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

image

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

image

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 
// 全局安装模块
npm install  -g
// 搜索模块
npm search  
// 更新模块
npm update 
//卸载模块
npm uninstall 
// 安装项目的全部依赖
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. 开发工具选择

image

前端的开发工具基本就两个选择Visual Studio Code 或者 WebStorm,两者选择哪一个都可以，我个人更喜欢Visual Studio Code,其实选择它最主要原因是免费且开源，而且有强大的插件库。

VSCode安装插件：

image

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

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

相似的还有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

sudo npm install -g @vue/cli

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

pic

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

执行以下命令

vue create my-project
# OR
vue ui

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

(3). 配置工程

输入创建命令后提示：

image

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

image

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

image

• 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: 端到端测试
  选中好后继续

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

image

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

image

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

image

提示：选择CSS预处理器

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

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

image

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

image

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

image

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

image

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

image

至此，我们整个工程创建完成。接下来总结一下在移动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

它有三种引入方式分别是：unicode 引用、font-class 引用、symbol 引用,我们只介绍symbol 引用,这也是官方最推荐的引用方式，相比前两种有如下特点：

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

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

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

import '../utils/iconfont';

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

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

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

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

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

四.总结

转眼做前端已经小半年了，越学习越感觉前端内容的复杂，越感觉自己所学知识的浅薄，写这篇文章也算是对这段时间的总结。这篇文章面向的是前端初学者，还请大神勿喷。当然由于作者水平有限，难免出现纰漏，如有问题还请不吝赐教。

参考：
postcss-px-to-viewport
element UI
axios
iocnfont
https://v3.cn.vuejs.org/
https://cli.vuejs.org/zh/guide/