当前位置:首页 > 技术文章 > 正文内容

测试开发如何快速上手Vue前端开发(上)

zonemu2个月前 (07-28)技术文章22

一. 环境安装

1. 安装nodejs

官网下载:
http://nodejs.cn/download/

安装

配置环境变量:将node的安装路径配置到Path变量


2. 安装HBuilderX

官网下载:
https://www.dcloud.io/hbuilderx.html

安装


3. 创建Vue-cli项目

在HBuilderX中:文件->新建->项目-普通项目,选择vue3项目(选择项目地址,输入项目 名称)


二. 项目发布

2.1 项目结构

node_modules:依赖库

public:打包后文件路径

assets:静态文件路径

components:组件(也就是一个个子页面)

App.vue:默认引入的页面

main.js:运行主入口js

index.html:页面主入口

package.json:安装依赖

package-lock.json:安装依赖生成的文件

vite.config.js:运行配置文件

2.2. 项目发布

方式一:直接在cmd里面运行

npm run dev
或者
npm run serve


方式二:编辑器里面运行


访问项目:


备注:npm命令详解

css# default

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Run your tests
```
npm run test
```

### Lints and fixes files
```
npm run lint
```

相关文章

编写简单的.gitlab-ci.yml打包部署项目

服务器说明:192.168.192.120:项目服务器192.168.192.121:GitLab为了可以使用gitlab的cicd功能,我们需要先安装GitLab Runner安装GitLab Ru...

jenkins2.107+tomcat8+jdk1.8的安装和发布代码3种方式

jenkins2.107+tomcat8+jdk1.8的安装和发布代码3种方式如果对运维课程感兴趣,可以在b站上或csdn上搜索我的账号: 运维实战课程,可以关注我,学习更多免费的运维实战技术视频1....

简析html5、html的13条区别(html5和html的突出优点)

html5的流行近一两年,在国内主要是移动端和html5游戏的发展,国外也是最近纷纷使用html5,如谷歌,全面的停止flash的广告的投放量,用html5取代之,那么html5较html的区别在哪里...

2025最值得入手的AI数据分析工具:奥威BI深度评测报告

一、引言在数字化时代,数据已成为企业决策的重要依据。然而,海量数据的处理与分析往往耗费大量时间与精力。为此,AI数据分析工具应运而生,其中奥威BI作为一款备受瞩目的产品,凭借其强大的功能与智能特性,成...

解锁无限潜力,在没有数组溢出情况下,掌握Filter公式正确用法

嗨,朋友们!今天我要和大家分享一些关于Filter公式的知识,这将帮助你们解决没有数组溢出情况下的问题。你是否曾经在处理数据时遇到过没有数组溢出的情况?不用担心,因为我将教你一些正确使用Filter公...

面试官-如何实现数组和 List 之间的转换?

数组和List是Java开发中常见的两种数据结构,那么如何实现二者之间的快速转换就成了面试官常问的考点之一,下面我们我们就来从数组转List和List转数组两个方面来展开介绍一下。数组转List方法...