通过安装Element UI/Plus来学习vue之如何创建项目、搭建vue脚手架、npm下载、封装等

暂时先用这个名字

已于 2024-10-31 12:22:10 修改

阅读量3.3k

点赞数 4

分类专栏：前端文章标签： vue.js npm 学习 vue node.js

于 2022-08-09 23:34:54 首次发布

本文链接：https://blog.youkuaiyun.com/snans/article/details/126249288

版权

前端专栏收录该内容

71 篇文章

订阅专栏

一、介绍

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

在这里插入图片描述

1. Node.js

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

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

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

2. NPM

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

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

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

NPM官方网站：https://www.npmjs.com/
NPM使用介绍：https://www.runoob.com/nodejs/nodejs-npm.html

3. Vue.js

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

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

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

4. Vue CLI 脚手架

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

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

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

官方网站：https://cli.vuejs.org/
中文官方：https://cli.vuejs.org/zh/

5. webpack 打包器

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

官方网站：https://webpack.js.org/
中文网站：https://www.webpackjs.com/

6. Element Plus

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

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

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

使用Vue 2.0开发的为Element UI，使用Vue 3.0开发的为Element Plus。

官方网站：https://element-plus.org/en-US/
中文官方：https://element-plus.org/zh-CN/

二、安装

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

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

1. 下载Node.js并安装

a）下载

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

b）安装

在这里插入图片描述

下载后打开安装

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

20分钟过后~~~

在这里插入图片描述

c）测试是否安装成功

在这里插入图片描述

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

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

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

设置cnpm命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org

https://registry.npm.taobao.org 该网址可更换为更高效的网址。

在这里插入图片描述

https://registry.npm.taobao.org 如果不成功可以使用 http://registry.npm.taobao.org 尝试

在这里插入图片描述

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

cnpm install [name]

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

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

注册命令：

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

在这里插入图片描述

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

f）查看注册情况

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

npm get registry

在这里插入图片描述

2. 安装Vue CLI

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

a）安装Vue CLI脚手架

npm install --global vue-cli

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

cnpm install --global vue-cli

在这里插入图片描述

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

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

vue -V

在这里插入图片描述

3. 创建Vue项目及运行

I. WEBPACK方式创建

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

只需要安装过vue-cli，那么每次创建项目可从此命令开始，再次强烈建议先将npm镜像，提高速度。
npm config set registry https://registry.npm.taobao.org，详细用法参考上面主题：“e）npm注册淘宝镜像”

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

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

vue init webpack Test

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

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

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

在这里插入图片描述

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

? Project name test //项目名称
? Project description Only Test // 项目描述
? Author  // 作者名称
? Vue build standalone // 推荐选前者
? Install vue-router? Yes // 是否安装vue-router路由组件，也可不安装使用第三方或简单的项目自己写
? Use ESLint to lint your code?  No // 是否使用eslint管理代码，个人项目不推荐
? Set up unti tests? No // 是否使用karma来做单元测试
? Setup e2e tests with Nightwatch? No // 是否安装e2e测试
? Should we run 'npm install' for you after the project has been created? (recommended) npm // 选择使用npm或yarn进行安装模块

b）项目创建完成

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

在这里插入图片描述

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等来运行这个项目了，当然也可以在命令窗口运行，运行命令npm run dev

npm run dev

在这里插入图片描述

默认监听8080端口，服务器己经启动，目前是在开发环境下。
打开浏览器，输入网址：http://localhost:8080，如果出现vue欢迎页面，则表示正常：

在这里插入图片描述

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

II. VITE方式创建

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

使用命令后根据提示输入内容即可

# 原生
npm create vite@latest
# 或者
cnpm create vite@latest

询问是否继续~ y
在这里插入图片描述
输入项目名称 Test，其实是项目所在目录名

输入包名testpkg，全小写，其实这才是真正的项目名，安装完成后可以看一下package.json的name就知道了

选择框架，vite支持的主流框架很多，本案例选择vue
在这里插入图片描述
vue3已全面支持TypeScript，所以选择语言TypeScript

好啦，就这么简单，最后如下：

b）项目创建完成

这时候Project目录下已经生成了一个Test文件夹，并且各种文件及文件夹已经下载生成完毕。
目录相较于webpack方式创建的简约很多。
在这里插入图片描述

c）运行服务

根据上面项目创建后的三条命令提示依次执行测试

# 进入项目
cd Test
# 安装依赖
npm install
# 启动项目
npm run dev

如果npm安装不了就使用cnpm，最终如下
在这里插入图片描述

原Test目录下又多了一些内容

node_modules（项目依赖）
public（公共静态资源）
src（代码目录）
- assets
- components（公共组件）
- App.vue（父组件）
- main.ts（入口）
- style.css（全局样式表，可删除）
- vite-env.d.ts（项目环境Vite参数声明）
.gitignore（推送到git仓库时忽略配置）
index.html（首页入口）
package.json（项目依赖配置）
package-lock.json
README.md（项目简介文档）
tsconfig.app.json
tsconfig.json（TypesScript配置文件）
tsconfig.node.json
vite.config.ts（Vite构建工具配置）

默认监听5173端口，服务器己经启动，目前是在开发环境下。
打开浏览器，输入网址：http://localhost:5173/，如果出现vue欢迎页面，则表示正常：
在这里插入图片描述
退出监听，直接关闭cmd窗口即可。

如果你开启了另一个服务，那么端口会自动 +1，如图：
在这里插入图片描述

4. 安装Element Plus

到这一步就最简单了，不就是安装个组件么~~，但要注意，在该项目所在目录执行命令：

npm install element-plus --save

简写

npm i element-plus --S

但是有可能失败~~

在这里插入图片描述

想起来为什么么了吗？因为我们在国内啊，需要使用之前配置好的cnpm命令或者npm做好了镜像，参考第一步中最后两个“可选”项，这样才能成功。

cnpm install element-plus --save

在这里插入图片描述

node_modules目录下存在element-plus文件夹。

在这里插入图片描述

打开根目录package.json，找到element-plus版本号，预示着安装完成。

在这里插入图片描述

5. 考题：安装Vue.js

如果仅下载安装Vue，不需要初始化也不需要脚手架，那么用本方法。

a）安装vue

本例中在桌面创建新目录Project/Install，并在该目录下执行命令

npm install vue

在这里插入图片描述

目录如下：

在这里插入图片描述

如果项目使用了vue-cli，那么在其node-modules目录下也会发现本方法中相同的组件。

b）对不同构建版本的解释

在 NPM 包的dist/目录你将会找到很多不同的Vue.js构建版本。

这里列出了Vue 2.0之间的差别：

	UMD	CommonJS	ES Module
完整版	vue.js	vue.common.js	vue.esm.js
只包含运行时版	vue.runtime.js	vue.runtime.common.js	vue.runtime.esm.js
完整版 (生产环境)	vue.min.js	-	-
只包含运行时版 (生产环境)	vue.runtime.min.js	-	-