编程开源技术交流,分享技术与知识

网站首页 > 开源技术 正文

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

wxchong 2025-01-14 17:57:01 开源技术 14 ℃ 0 评论

一. 环境安装

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

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表