一. 概述
笔者是客户端研发出身，如果只有一门技术傍身，不足以胜任市场对客户端研发的要求，于是想学习大前端技术栈。但苦于日常工作繁琐，一直没有机会学习（其实就是自身懒惰）。直到工作需要，需要写一个微信小程序，这才下决心学习前端技术。其实如果想入门前端，从微信小程序入手不失为一个好的方法。初次接触微信小程序，它的数据双向绑定机制，让写习惯了客户端的我叹为观止。目前我入门前端的技术路径是：客户端---微信小程序---混合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 <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. 开发工具选择
image
前端的开发工具基本就两个选择
Visual Studio Code 或者 WebStorm,两者选择哪一个都可以，我个人更喜欢Visual Studio Code,其实选择它最主要原因是免费且开源，而且有强大的插件库。
VSCode安装插件：
image
选择[扩展]-[搜索插件]-安装即可
下面是我使用的一些常用的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
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代码（引入一次就行）
<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;
}
注意：加入的图片最好是去掉填充色的,然后你才能修改颜色,否则设置颜色不生效。
四.总结
转眼做前端已经小半年了，越学习越感觉前端内容的复杂，越感觉自己所学知识的浅薄，写这篇文章也算是对这段时间的总结。这篇文章面向的是前端初学者，还请大神勿喷。当然由于作者水平有限，难免出现纰漏，如有问题还请不吝赐教。
参考：
postcss-px-to-viewport
element UI
axios
iocnfont
https://v3.cn.vuejs.org/
https://cli.vuejs.org/zh/guide/
网友评论