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

Vue框架 —— 快速上手

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

一、开发环境安装

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组件。

68747470733a2f2f626c6f672e:6373646e2e6e65742f77656978696e5f34343332373733362f:61727469636c652f64657461696c732f313335303630353133