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

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

一、快速上手Vue

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

1.1 安装node.js

1.1.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.1.1 参考视频或文章链接
推荐：《Ubuntu安装最新版本NodeJs和Npm的方法》
《Ubuntu安装Node.js》—— CSDN
《npm 和nodejs的区别？》
《npm ,yarn 更换使用国内镜像源，阿里源，清华大学源》

1.1.2 Windows安装

1.1.2 参考视频或文章链接
《Windows下Node.js安装保姆级教程》

1.2 安装Vue-cli脚手架

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

参考视频或文章链接
《安装 vue-cli》—— Vue官网
《nvm安装（Windows篇）》

1.3 使用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。让你的文件夹图标变得更好看，一下子编程就变得高大上了起来。

参考视频或文章链接
《VScode 常用插件推荐，非常全面》—— CSDN
Vite - Offical Webiste
Vite - Wikipedia

1.4 创建初始项目

你乍一看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代码中的问题。

参考视频或文章链接
[1] 《vue从零开始搭建vue项目》—— CSDN
[2]推荐：《创建一个项目》| Vue CLI
[3] Home | Vue CLI
[4] 《从零开始搭建一个vue项目（保姆级教程）》
[5] Babel —— Wikipedia
[6] ESLint —— Wikipedia
[7] Babel vs ESLint
[8] 《VUE 使用 vue create 命令 创建 vue2.0 项目》
重点：[9] 《Vue项目实战—创建项目（一）》

1.5 运行项目

$ 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]"
},

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

参考文章或视频链接
[1] 《vue从零开始搭建vue项目》—— CSDN
[2] Difference between" npm run serve" and “npm run dev” in vuejs

二、补充知识

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