测试开发如何快速上手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```