前端基础篇-前端工程化-Vue-项目开发流程环境准备Element-组件库Vue-路由项目打包部署

JAY.LIN 收录于前端篇

2025-01-07 约 2062 字预计阅读 5 分钟

https://bing.ee123.net/img/rand?artid=136980256

前端基础篇-前端工程化 Vue 项目开发流程（环境准备、Element 组件库、Vue 路由、项目打包部署）

文章目录

1.0 环境准备

Vue - cil 是vue 官方提供的一个脚手架，用于快速生成一个 Vue 的项目。

Vue - cli 依赖环境为： NodeJs

1.1 安装 NodeJs

1.2 验证 NodeJs 环境变量

NodeJs 安装完毕后，会自动配置好环境变量，我们验证一下是否安装成功，通过：node -v

Microsoft Windows [版本 10.0.22631.3296]
(c) Microsoft Corporation。保留所有权利。

C:\Windows\System32>node -v
v20.11.1

C:\Windows\System32>

出现了相对应的版本就配置成功了。

1.3 配置 npm 的全局安装路径

使用管理员身份运行命令行，在命令行中，执行如下指令：

npm config set prefix "注意：这里填写的是你自己的 NodeJs 的安装目录"

比如说:
npm config set prefix "E:\develop\NodeJs"

1.4 切换 npm 的淘宝镜像( npm 使用国内淘宝镜像的方法(最新) )

使用管理员身份运行命名行，在命令行中，执行如下指令：

//旧
npm config set registry https://registry.npm.taobao.org/
//新
npm config set registry https://registry.npmmirror.com
选择最新的指令即可，因为旧的已经过期了，无法使用了。

1.5 查看镜像是否配置成功

使用管理员身份运行命令，在命令行中，执行如下指令：

C:\Windows\System32>npm config get registry
https://registry.npmmirror.com

C:\Windows\System32>

这样就大致配置成功了。

1.6 安装 Vue - cli

使用管理员身份运行命令行，在命令中，执行如下指令：

npm install -g @vue/cli
这个过程中，会联网下载，可能会耗时几分钟，耐心等待。

就像这样就代表 Vue - cli 配置成功了。

1.7 查看 Vue - cli 是否配置成功

用管理员身份来执行以下指令：

C:\Windows\System32>vue --version
@vue/cli 5.0.8

C:\Windows\System32>
出现对应的版本就代表安装成功了。

2.0 Vue 项目

2.1 Vue 项目的创建

用图像化界面创建项目，在 cmd 中运行以下代码：

回车之后会下面的界面：

将 Git 按键设置为：无

选择手动配置项目：

额外再多选一个Router 功能

选择 vue 的版本和语法监测规范：

最后：

可以看到创建的新的文件夹，即为成功创建了 Vue 项目了。

接着用 VS 打开这个文件：

2.2 Vue 项目的结构

基于 Vue 脚手架创建出来的工程，有标准的目录结构。如下：

2.3 Vue 项目的启动

方式一：图形化界面启动

直接按下三角符号即可。

运行结果：

方式二：命令行

在当前创建好 vue 项目的目录上运行以下指令：

npm run serve

3.0 Element 概述

Element 是饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。

组成：组成网页的部件，例如超链接、按钮、图片、表格、表单、分页条等等。

官网：

3.1 安装 ElementUI 组件库(在当前工程的目录下)并命令执行指令

npm install --legacy-peer-deps element-ui --sava

3.2 引入 ElementUI 组件库

main.js 中引入组件库

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

完整的 main.js 文件：

3.3 访问 Element 官网、复制组件库代码并调整

首先，在 views 中创建一个 .vue 文件。主要有三大部分：template、script、style

//简单认为，这里是 HTML 网页展示出来画面
<template>
    <div>

    </div>
</template>

//创建了 vue 核心对象，存放着数据、方法
<script>
export default {
    
}
</script>


//这里存放 css 样式代码
<style>

</style>