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

一. 环境安装

1. 安装nodejs

官网下载：下载 | Node.js 中文网

安装

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

2. 安装HBuilderX

官网下载：HBuilderX-高效极客技巧

安装

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

三. 项目开发

3.1 静态资源

icon和logo修改。

vue示例项目里面提供了两种静态文件引用的方式：

1. 绝对路径引用：例如icon文件，对应public目录
2. 相对路径引用：例如logo文件，对应assets目录

3.2 vue组件开发

Vue3常用组件：组件安装 组件使用

3.2.1 element-plus配置

备注：在组件安装里面，有详细安装教程

首先，我们使用npm安装组件到项目依赖

npm install element-plus --save

然后，在main.js里面导入组件（注意，官网示例有兼容问题，此处给予修正），安装完，即可启动项目

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)

// 解决icon不显示
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

app.mount('#app')

3.2.2 项目布局

项目开发成什么样，主要取决于同学们的创造力了。我们这里就开发一个类似百度首页的例子

在app.vue里面，我们使用组件里面的容器布局组件。选择上中下布局，点击右下角显示源码，即可复制使用。

然后我们调整页面样式：

效果：

在header和footer里面添加内容

<template>
<!-- <img alt="Vue logo" src="./assets/logo.png" height="300" />
  <HelloWorld msg="Hello Vue 3 + Vite" /> -->
<el-container>
  <el-header style="text-align: right;"><a>登录</a></el-header>
  <el-main>Main</el-main>
  <el-footer>关于老Will的第一个前端开发项目-详情请咨询：632232258</el-footer>
  </el-container>
</template>

3.2.3 组件使用

在main里面使用组件：HelloWorld，当然，你可以更改组件名字。组件其实是在vue文件头部js导入的。可以在这里修改导入的组件和组件名字。

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <!-- <img alt="Vue logo" src="./assets/logo.png" height="300" />
  <HelloWorld msg="Hello Vue 3 + Vite" /> -->
  <el-container>
	<el-header style="text-align: right;"><a>登录</a></el-header>
	<el-main><HelloWorld /></el-main>
	<el-footer>关于老Will的第一个前端开发项目-详情请咨询：632232258</el-footer>
  </el-container>
</template>

3.2.4 组件开发

我们把logo的显示，移到组件HelloWorld里面

同时添加input元素和按钮，就可以做好一个简易的百度首页

在element-plus里面找到input，复制你喜欢的输入框；找到button，复制你喜欢的按钮

调整文案和样式即可

<template>
  <div><img alt="Vue logo" src="../assets/logo.png" height="300" /></div>
  <el-input v-model="input" placeholder="Will一下" /> 
  <el-button type="primary">搜索</el-button>
</template>

<style scoped>
a {
  color: #42b983;
}
.el-input{
	width: 50%;
	padding-right: 10px;
}
</style>

四. 项目效果