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

2023-12-18 15:02:06

一、快速上手Vue

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

1.1 安装node.js

要学习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
# 下载最新稳定版
sudo n stable
# 下载最新版
sudo n lastest
# 查看已下载的版本
sudo n ls
# 切换 Node 版本
sudo n xx.xx.xx
参考视频或文章链接
推荐:《Ubuntu安装最新版本NodeJs和Npm的方法》
《Ubuntu安装Node.js》—— CSDN
《npm 和nodejs的区别?》

npmNode.js的包管理器,Node.js是一个server-side JavaScript runtime environment,类似于condapython
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.

1.2 安装Vue-cli脚手架

# ubuntu
npm install -g @vue/cli # 可能要加sudo
参考视频或文章链接
《安装 vue-cli》—— Vue官网

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的选项

这里顺带说明,什么是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代码中的问题。

参考视频或文章链接
《vue从零开始搭建vue项目》—— CSDN
推荐:《创建一个项目》| Vue CLI
Home | Vue CLI
《从零开始搭建一个vue项目(保姆级教程)》
Babel —— Wikipedia
ESLint —— Wikipedia
Babel vs ESLint

1.5 运行项目

$ npm run serve
# 或
$ npm run dev

Question:npm run servenpm 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组件。

文章来源:https://blog.csdn.net/weixin_44327736/article/details/135060513
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。