前端技术栈 —— Vue框架 —— (一)快速上手

大家好，欢迎来到IT知识分享网。

前端是一种美学与逻辑的共同呈现，它将人类的审美与事物体验固化成一串串代码，以便程序员调用与绘制这宇宙带给生灵的惊喜。—— 本文作者。

一、开发环境安装

1.1 安装nvm（推荐）

安装好nvm后，就可以灵活的切换nodejs的版本，相比于直接安装nodejs，会更省事，可以理解为是js中的conda

1.2 安装node.js

1.2.1 Linux安装

(1)npm是Node.js的包管理器，Node.js是一个server-side JavaScript runtime environment，类似于conda和python。
(2)Node.js provides a runtime environment for running JavaScript on the server side, while NPM is a package manager for managing dependencies and third-party libraries for Node.js applications.
要学习vue，首先得安装node.js，我这里是ubuntu系统，windows系统教程也有很多，可以搜搜看，使用apt安装的nodejs会比较老，即便apt update也是如此。

sudo apt update sudo apt install nodejs #不自带 npm 需要自行安装 sudo apt install npm # 升级 npm sudo npm install npm -g # 使用 n Node版本管理工具升级到 最新版 sudo npm install n -g # 下载nodejs的最新稳定版 sudo n stable # 下载nodejs的最新版 sudo n latest # 查看已下载的版本 sudo n ls # 切换 Node 版本 sudo n xx.xx.xx 

下载慢的话，为npm设置国内镜像以便加快下载速度。

// 查询源 npm config get registry // 更换国内源 npm config set registry https://registry.npmmirror.com // 恢复官方源 npm config set registry https://registry.npmjs.org // 删除注册表 npm config delete registry 

1.2.2 Windows安装

1.3 安装Vue-cli脚手架

# ubuntu npm install -g @vue/cli # 可能要加sudo 

一、快速上手Vue

如果不会Vue的话，要从0开始学，会比较痛苦，我只是快速上手，用到什么学什么，不会从头到尾开发这个前端项目，更多的是拿来用。

2.1 使用VSCode开发Vue的准备工作

工欲善其事，必先利其器。

以下是开发Vue项目必备的Plugin列表，在VSCode插件商店中搜索并安装即可。

(1) Vite。Vite (French word for “quick”, pronounced /vit/, like “veet”) is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts。这是一个法语单词，发音/vit/，不是外特，但不要想当然的以为是法国人开发的，是尤雨溪开发的。旨在提供一种高效的部署能力。
(2) Live Server。为 HTML、CSS 和 JavaScript 提供实时预览和自动刷新，在浏览器中实时预览静态网页的插件。
(3) Material Theme。让你的文件夹图标变得更好看，一下子编程就变得高大上了起来。

2.2 创建初始项目

你乍一看Vue的项目，这下面这么多文件夹或文件，感觉头晕，如果你是一个习惯写java后端部分的人，你肯定会对这些文件怎么创建出来的感到好奇，其实这些都是Vue工具vue脚手架自动生成的，谁会去自己写这些文件呢？

. ├── babel.config.js ├── jsconfig.json ├── node_modules ├── package.json ├── package-lock.json ├── public ├── README.md ├── src └── vue.config.js 

# 创建命令 $ vue create your_project_name # 再下面是特性选择，你会看到Babel、ESLint的选项，具体怎么选看参考文章[8] 

这里顺带说明，什么是Babel与ESLint。

Babel:
(1) Babel is a free and open-source JavaScript transcompiler that is mainly used to convert ECMAScript 2015+ (ES6+) code into backwards-compatible JavaScript code that can be run by older JavaScript engines. —— Wikipedia。看完这段，可以知道Babel是一个编译器，用来将js代码变得可以后向兼容，以便可以运行在更老的JS引擎上。
(2) Babel can also be used to compile TypeScript into JavaScript。将TypeScript转换为JavaScript。
ESLint:
(1) ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code.—— Wikipedia。ESLint是一个代码分析工具，用来发现JS代码中的问题。

2.3 运行项目

$ npm run serve # 或 $ npm run dev 

Question:npm run serve与npm run dev二者的区别是什么？二者的本质又是什么？
根据参考文章[2]，这两条命令的实质是：
npm run serve basically is just saying “npm please run the command I defined under the name serve in package.json” the same happens with npm run dev. 请看package.json中的配置

"scripts": { 
     "serve": "[list of commands here]", "dev": "[list of commands here]" }, 

因此根据配置，这两条命令的执行情况，可以相同或不同。

三、补充知识

ES6：Javascript的新版本，ECMAScript6的简称。利用ES6我们可以简化我们的JS代码，同时利用其提供的强大功能来快速实现JS逻辑。
vue-cli：Vue的脚手架工具，用于自动生成Vue项目的目录及文件。
vue-router： Vue提供的前端路由工具，利用其我们实现页面的路由控制，局部刷新及按需加载，构建单页应用，实现前后端分离。
vuex：Vue提供的状态管理工具，用于统一管理我们项目中各种数据的交互和重用，存储我们需要用到数据对象。
element-ui：基于MVVM框架Vue开源出来的一套前端ui组件。