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

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

一. 环境安装

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
```

相关文章

Linux 发行版介绍 Zenwalk Linux(linux发行版2021)

Zenwalk Linux是基于Slackware的GNU/Linux发行版, 100%兼容Slackware。 致力于精简和快捷的图形桌面及多媒体使用。包含整套编程环境和运行库,还提供了常用服务器套...

Linux发行版Nobara更新39版本,号称“专为游戏玩家定制”

IT之家 12 月 27 日消息,Linux 发行版 Nobara 今天推出了 39 版本,主要改进了“Gamescope 合成器”,并更新了 OBS Studio、部分驱动程序及 Nautilus...

Vue3 中,父子组件如何传递参数?(vue父子组件传递数据方法)

在 Vue3 中,组件化开发是非常重要的特征,那么组件之间传值就是开发中常见的需求了。组件之间的传值三种方式:父传子、子传父、非父子组件传值。一、父传子( defineProps )父组件主要通过使用...

vue3源码分析——实现组件通信provide,inject

引言<<往期回顾>>vue3源码分析——rollup打包monorepovue3源码分析——实现组件的挂载流程vue3源码分析——实现props,emit,事件处理等vue3源...

gitlab简单搭建与应用(gitlab怎么用)

一、gitlab1、简介GitLab是利用Ruby on Rails一个开源的版本管理系统,实现一个自托管的Git项目仓库,可通过Web界面进行访问公开的或者私人项目。与Github类似,GitLab...

在 Spring Boot3 中操作 GitLab API 的全面指南

在当今互联网大厂的后端开发工作中,高效管理代码版本和项目协作至关重要。GitLab 作为强大的版本控制系统,其 API 为开发人员提供了丰富的操作可能性。本文将深入探讨如何在 Spring Boot3...