接上篇，测试开发如何快速上手Vue前端开发（上），从环境安装、安装nodejs、安装HBuilderX创建Vue-cli项目、项目结构、项目发布。现在来看看项目开发和实现的效果。

项目开发

静态资源

icon和logo修改。

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

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

 

 

 

vue组件开发

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

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')

项目布局

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

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

组件使用

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

组件开发

我们把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>

项目效果