Vue.js2入门：Web前端开发与Vue脚手架配置详解-优快云博客

本文链接：https://blog.youkuaiyun.com/mowangyou520/article/details/135394423

一.Web前端的基本概念

作为一名 Web 前端开发工程师，其主要职能就是将网站的界面更好地呈现给用户。随着互联网技术的爆发，越来越多的前端开发技术如雨后春笋般出现，在众多的 JavaScript 前端框架中，Vue.is 无疑是最出色的(曾经一项针对 JavaScript 的调查表明，Vue.is 有着 89%的开发者满意度)。相比其他前端框架，如 Angular 和 React，Vue.is 框架在实现上更容易，程序员上手更快。使用 Vue.is 技术不仅提高了开发的效率，也改善了开发的体验，因此，熟练掌握Vue.is 前端框架已经成为 Web 前端开发工程师的必备技能。本章将介绍 Vue.is 有关的一些概念和技术，并帮助读者了解它们背后的工作原理，同时构建第一个 Vue.is 应用。

Web前端是指负责实现Web页面视觉效果和用户交互的技术岗位。以下是Web前端的一些基本概念：

1. HTML：超文本标记语言，用于构建网页结构。

2. CSS：层叠样式表，用于控制网页的样式和布局。

3. JavaScript：一种动态编程语言，可以实现网页的交互效果和动态效果。

4. 前端框架：例如Vue.js、React等，可以帮助开发者更快速地构建Web应用。

5. 前端工具：例如WebPack、Grunt、Gulp等，可以自动化构建、测试和部署Web应用。

6. 响应式网页设计：通过使用CSS媒体查询和弹性网格布局等技术，实现在不同设备上自适应大小和布局的网页。

7. 浏览器兼容性：不同浏览器对Web标准的支持程度不同，需要注意浏览器兼容性问题，确保Web应用能在各种主流浏览器上正常运行。

8. SEO：搜索引擎优化，通过优化网页内容和代码，提高网页在搜索引擎中的排名。

二.vue脚手架项目环境配置

1、下载安装node,下载之后一步步默认安装即可。

或者直接去官网下载：下载地址

PS：检查node是否安装成功，并查看版本号:按住电脑的win+R键盘，调出终端控制台，输入命令行：node -v或node --version,如果能出现以下界面，即代码node安装成功。

2、下载安装VScode代码编辑工具

或者直接去官网下载：下载地址

3、vue2项目调试插件，下载vue.js_devtools，本课程使用此插件

下载，解压，把.crx结尾的文件拖入浏览器的扩展程序中即可使用。

PS:如果部分同学使用的是vue3,可下载下面的调试插件

使用VueCli快速构建项目

参照教材的版本，本课程采用Vue CLI 3.10版本，Vue CLI从3版本开始，包的名称由vue-cli 改成了vue/cli,如果您已经安装了vue-cli(1.x或者2.x),需要先卸载，再重新全局安装vue/cli。

卸载命令如下：

// 注意，第一次使用vue脚手架的同学可直接忽略此步骤

npm uninstall vue-cli -g

1、vue cli 脚手架的安装

// 通过npm全局安装@vue/cli脚手架 @3.10表示下载某个指定版本，如果不写，则下载最新版本

          npm install -g @vue/cli



PS:如果使用npm方式安装脚手架速度太慢，或者是卡死的话，可以选择淘宝镜像cnpm的方式安装

//安装淘宝镜像的命令行

          ① npm install -g cnpm --registry=https://registry.npmmirror.com

  // 如果安装了cnpm淘宝镜像的话，可使用下面的命令行安装@vue/cli脚手架，网速会相对来说快一些

          ② cnpm install -g @vue/cli



//PS：如需要卸载vue/cli包，可执行以下命令行

         npm uninstall -g @vue/cli

注意：最近发现很多同学使用npm命令经常容易出现卡死不懂是情况，如出现这种情况，清执行此命令，即可解决：

npm config set registry https://registry.npm.taobao.org

或者，哪个方式快，用哪个

npm config set registry https://registry.npmmirror.com

vue cli安装成功之后，使用vue -V命令查看版本号，如果成功出现版本号即代表安装成功，我们就可以通过Vue Cli脚手架来创建项目了。

成功安装界面：

2、vue create 命令创建项目

// helloworld 是项目名，可自行定义

vue create helloworld

执行 vue create 命令之后，可看到如下所示界面

在这个步骤中，可以使用键盘的↑和↓方向键选择创建项目的方式，default是默认选择项，表示使用默认的方式创建项目；Manually select features选项表示使用手动配置方式创建项目，在这里，我们选择手动的方式创建，手动配置界面如下图所示：

此界面中，可以使用键盘的↑和↓方向键选择创建项目的方式，按住空格键选择某一项，再次按住空格键，取消选择，每个配置项的作用如下表所示：

配置项	说明
Babel	JavaScript语法编译器
TypeScript	TypeScript是JavaScript的超集，其包含了并扩展了JavaScript的语法，需要被编译输出为JavaScript才能在浏览器运行
Progressive Web App (PWA) Support	渐进式Web应用程序
Router	vue-router（vue路由）
Vuex	vue的状态管理模式
CSS Pre-processors	CSS预处理器，如less或sass
Linter/Formatter	代码风格检查和格式化（如：ESlint）
Unit Testing	单元测试（unit tests）
E2E Testing	端对端测试