vue项目测试(vue 快速开发)

最后一部分，如何快速测试开发Vue的前端开发(第一部分)，从环境安装、nodejs安装、HBuilderX安装到创建Vue-cli项目、项目结构、项目发布。现在我们来看看项目开发和实施的效果。
开发项目静态资源图标和标志的修改。vue示例项目中有两种静态文件引用方式：
绝对路径引用：比如图标文件，对应公共目录；相对路径引用：例如logo文件，对应资产目录。
Vue组件开发Vue3常见组件：组件安装和组件使用
Element-plus配置备注：在组件安装中，有详细的安装教程。首先，我们使用npm将组件安装到项目依赖项中。
Npm安装元素加保存。然后，导入main.js中的组件(注意官网例子有兼容性问题，此处更正)。安装完成后，就可以开始项目了。
从“vue”导入{ createApp }从“导入应用程序”。/app . vue ‘ import element plus from ‘ element-plus ‘ import ‘ element-plus/dist/index . CSS ‘ const app=create app(app)app . use(element plus)//解决图标不显示import *作为element plus consvue from ‘ @ element-plus/icons-vue ‘ for(const[key，Component] of Object。entries(ElementPlusiconsvue)){ app . com component(key，component)} App.mount (‘# app ‘)项目布局项目开发成什么样，主要取决于学生的创造力。这里，我们将开发一个类似于app.vue中百度主页的例子，我们使用组件中的容器来布局组件。选择上中下布局，点击右下角显示源代码，可以复制使用。
然后我们调整页面样式：
效果：
在页眉和页脚添加内容。
登录main第一个关于老威尔的前端开发项目——详情可咨询：632232258组件使用在Main: HelloWorld中使用，当然可以更改组件名称。组件实际上是在vue文件的头js中导入的。您可以在此修改导入的组件和组件名称。
关于登录老威尔第一个前端开发项目——详情请咨询：63223258组件开发。我们可以做一个简单的百度主页，通过将logo显示移动到组件HelloWorld，同时添加输入元素和按钮，在element-plus中查找输入。复制你喜欢的输入框；找到按钮，复制你喜欢的按钮，调整复制和样式。
调查
项目效果