vue 安装（vue 安装module版本）

安装之前请先了解一下各个部分的作用，如果已经掌握，可以直接跳到第二部分。

在这里插入图片描述

简单的说 Node.js 就是运行在服务端的 JavaScript。
是一个基于 Chrome JavaScript 运行时建立的一个平台。
是一个事件驱动 I/O 服务端 JavaScript 环境，基于 Google 的 V8 引擎，V8 引擎执行 Javascript 的速度非常快，性能非常好。

借用的能力可以实现很多强大的功能，在此基础上产生了一系列管理工具，其中就包括。

官方网站：https://nodejs.org/
NodeJS中文网：http://nodejs.cn/
NodeJS教程：https://www.runoob.com/nodejs/nodejs-tutorial.html

是随同一起安装的包管理工具，能解决代码部署上的很多问题，常见的使用场景有以下几种：

允许用户从NPM服务器下载别人编写的第三方包到本地使用。
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

在用构建大型应用时推荐使用安装。能很好地和诸如webpack或Browserify模块打包器配合使用。同时也提供配套工具来开发单文件组件。

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

在用构建大型应用时推荐使用安装。能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时也提供配套工具来开发单文件组件。

官方网站：https://vuejs.org/
中文官方：https://cn.vuejs.org/
版本下载：https://cdn.jsdelivr.net/npm/vue/dist/

当年用visual studio开发c++，创建项目后环境自动生成所需的目录、配置文件等，开发时根据其规则开发就行了，开发完毕后打包生成exe。

脚手架是一个基于进行快速开发的完整系统，其目的与VS差不多，自动生成一套东西，按照这个开发，最后用打包，所以适合大项目使用，小项目引入个js就完事了。

Vue 提供的这个官方 CLI，为单页面应用快速搭建 (SPA) 繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。更多详情可查阅的文档。

本质上，是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

以往开发网站，需要自己编写大量样式表，网上找不同的组件库为己所用，费时费力，兼容性还可能出问题，而目前网上有大量贡献者开发了各类组件库，就是其中最流行的库，拿来就用。

是一套采用作为基础框架实现的组件库，一套为开发者、设计师和产品经理准备的基于的组件库，提供了配套设计资源，帮助网站快速成型。

其中内涵了各种组件及主题模板，开发类似admin后台的应用时最为合适。

使用开发的为，使用开发的为。

上面把各个涉及的部件介绍了一下，如果要深入的话，可以去官方网站学习。

现在开始一步步把安装完成。

a）下载

官网下载地址：https://nodejs.org/en/

b）安装

在这里插入图片描述

下载后打开安装

在这里插入图片描述

可以不选择（建议~~），如果选择了自动安装，那么在完成后系统将自动下载各种所需工具，下面有截图可看。

在这里插入图片描述

因为选择了自动安装，所以系统开始把所有所需工具都给装上了。。。

在这里插入图片描述

20分钟过后~~~

在这里插入图片描述

c）测试是否安装成功

在这里插入图片描述

由于新版的已经集成了，所以也一并安装好了，可以开始使用命令行了~~

d）安装cnpm并注册淘宝镜像（可选）

在国内，使用淘宝的镜像会比较快安装一些包。

设置命令：

该网址可更换为更高效的网址。

在这里插入图片描述

如果不成功可以使用尝试

在这里插入图片描述

成功安装以后就可以使用 cnpm 命令来安装模块了：

e）npm注册淘宝镜像（可选）

因为vue命令去初始化项目的时候实际上还是使用的是去安装各种模块，并没有使用，所以还是先将注册淘宝镜像比较快。

注册命令：

在这里插入图片描述

如果不设置淘宝镜像，那么每次初始化的速度将会变得非常慢。

f）查看注册情况

查看当前镜像情况用下面的命令

在这里插入图片描述

只有安装了脚手架vue-cli，才能使用命令初始化vue项目。

a）安装Vue CLI脚手架

如果你安装了，那么也可使用这个，速度更快。

在这里插入图片描述

如上图，使用选项是因为这样可以在全局下使用vue-cli工具来创建vue项目，而不是要在特定的安装目录下才能使用vue-cli。

b）查看版本验证安装成功与否

在这里插入图片描述

I. WEBPACK方式创建

vue3建议使用vite方式，本方式仅学习了解即可。

a）文件夹下输入命令创建项目

此命令可以执行的前提是已经安装了。

系统将提出一些问题，自行输入或选择即可。

Project name：项目名称，如果不需要更改直接回车就可以了。注意：这里不能使用大写，所以我把名称改成了。
Project description：项目描述，默认为，可以直接回车不编写，这里改为。
Author：作者，如果你有配置的作者，他会读取。
Vue build：选择回车即可。
Install vue-router?：是否安装vue的路由插件，我们这里需要安装，所以选择。
Use ESLint to lint your code?：是否用ESLint来限制你的代码错误和风格。我们这里不需要输入（建议），如果你是大型团队开发，最好是进行配置。
setup unit tests?：是否需要安装单元测试工具，我们这里不需要，所以输入。
Setup e2e tests with Nightwatch?：是否安装e2e来进行用户行为模拟测试，我们这里不需要，所以输入。
Should we run ‘npm install’ for you after the project has been created?：使用npm或yarn哪种方式安装模块，这里选择。

运行初始化命令的时候会让用户输入几个基本的配置选项，如项目名称、项目描述、作者信息，对于有些不明白或者不想填的信息可以一直按回车去填写就好了，等待一会，就会显示创建项目创建成功，如下图:

在这里插入图片描述

本例配置完成后清单如下：

b）项目创建完成

这时候目录下已经生成了一个文件夹，并且各种文件及文件夹已经下载生成完毕。

在这里插入图片描述

build：最终webpack后发布的代码的存放位置。
config：配置路径、端口号等一些信息，刚开始的时候选择默认配置。
node_modules：npm 加载的项目所需要的各种依赖模块。
src：这里是我们开发的主要目录（源码），基本上要做的事情都在这个目录里面，里面包含了几个目录及文件：
- assets：目录里放置一些图片，如logo等
- router/index.js：配置路由的地方
- components：目录里放的是一个个的组件文件
- App.vue：项目入口组件（跟组件），我们也可以将组件写这里，而不使用components目录。主要作用就是将我们自己定义的组件通过它与页面建立联系进行渲染，这里面的必不可少。
- main.js ：项目的核心文件（整个项目的入口js）引入依赖包、默认页面样式等（项目运行后会在index.html中形成一个app.js文件）。
static：静态资源目录，如图片、字体等。
test：初始测试目录，可删除
.XXXX文件：配置文件。
index.html：html单页面的入口页面，可以添加一些meta信息或者同统计代码啥的或页面的重置样式等。
package.json：项目配置信息文件/所依赖的开发包的版本信息及所依赖的插件信息。
README.md：项目的说明文件。
webpack.config.js：webpack的配置文件，把.vue的文件打包成浏览器能读懂的文件。
.babelrc：是检测es6语法的文件的配置
.getignore：忽略文件的配置（比如模拟本地数据mock不让他在get提交/打包上线的时候忽略不使用可在这里配置）
.postcssrc.js：前缀的配置
.eslintrc.js：配置eslint语法规则（在这里面的rules属性中配置让哪个语法规则失效）
.eslintignore：忽略eslint对项目某些文件的语法规则的检查

c）运行服务

可以使用HBuilderX、IDEA、VS Code等来运行这个项目了，当然也可以在命令窗口运行，运行命令

在这里插入图片描述

退出监听，直接关闭cmd窗口即可。

II. VITE方式创建