Vue.js、搭建脚手架和构建项目

什么是Vue.js？

Vue.js是一个渐进式的JavaScript框架，用于构建用户界面。它的核心库仅关注视图层，易于集成到其他库或现有项目中。Vue的设计灵感来自于Angular和React，但它的目标是成为一种更加灵活、轻量级的解决方案。

安装 Vue.js

在使用Vue.js之前，你需要先安装它。你可以通过以下方式安装Vue：

使用CDN

直接在vscode里写入以下代码

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

或使用npm（Node.js）

在集成终端输入：npm install vue（需先安装好node）

搭建vue脚手架

1.先下载node并且安装,连接如下：

下载 | Node.js 中文网 (nodejs.cn)https://nodejs.cn/download/安装好后打开cmd，检查是否安装成功

输入node -v和node --version都可以检查

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

连接如下：

Visual Studio Code - Code Editing. Redefinedhttps://code.visualstudio.com/

npm概述：npm（Node.js Package Manager）是一个Node.js的包管理工具，用来解决Node.js代码部署问题，只要电脑成功安装了node，npm也会自动安装在电脑上。使用命令行查看npm是否安装成功

2、使用场景需求：

        2.1、从npm服务器下载别人编写的第三方包到本地使用。

        2.2、从npm服务器下载并安装别人编写的命令程序到本地使用。

        2.3、将自己编写的包或命令行程序上传到npm服务器供别人使用。

3、npm常用命令行：

           npm install：安装项目所需要的全部依赖包，需要配置package.json文件。

           npm uninstall：卸载指定名称的包。

           npm install 包名：安装指定名称的包。

           npm update：更新指定名称的包。

           npm run serve：项目启动。

           npm run build：项目构建。

           npm config get registry  ：查看当前npm下载包使用的是哪一个源。

构建项目

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

安装成功如下

 在cmd内输入vue -V检查vue版本号

然后在桌面创建新文件夹，进入文件夹内输入cmd后回车进入命令指示符界面

在控制台输入vue create helloworld后回车（helloworld 是项目名，可自行定义）按下键选择最后一个回车

用空格进行选择，选择第1，第4和第6个后回车 

选择2.x

选择n

默认第一个

继续默认第一个

选择n回车等待搭建完成

到现在为止就创建完成了

把文件夹拉到vscode内

打开集成终端， 输入npm run serve

按ctrl点击链接就能进入网页了 

如图所示，vue项目就构建完成了，可以开始制作vue项目