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

一. 环境安装

1. 安装nodejs

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

安装

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

测试开发如何快速上手Vue前端开发_第1张图片

2. 安装HBuilderX

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

安装

3. 创建Vue-cli项目

在HBuilderX中:文件->新建->项目-普通项目,选择vue3项目(选择项目地址,输入项目 名称)

测试开发如何快速上手Vue前端开发_第2张图片

二. 项目发布

2.1 项目结构

测试开发如何快速上手Vue前端开发_第3张图片

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

测试开发如何快速上手Vue前端开发_第4张图片

测试开发如何快速上手Vue前端开发_第5张图片

方式二:编辑器里面运行

测试开发如何快速上手Vue前端开发_第6张图片

测试开发如何快速上手Vue前端开发_第7张图片

访问项目:

测试开发如何快速上手Vue前端开发_第8张图片

备注: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目录

测试开发如何快速上手Vue前端开发_第9张图片

测试开发如何快速上手Vue前端开发_第10张图片

测试开发如何快速上手Vue前端开发_第11张图片

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里面,我们使用组件里面的容器布局组件。选择上中下布局,点击右下角显示源码,即可复制使用。

测试开发如何快速上手Vue前端开发_第12张图片

测试开发如何快速上手Vue前端开发_第13张图片

然后我们调整页面样式:

测试开发如何快速上手Vue前端开发_第14张图片

效果:

测试开发如何快速上手Vue前端开发_第15张图片

在header和footer里面添加内容

3.2.3 组件使用

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



3.2.4 组件开发

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

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

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

调整文案和样式即可



四. 项目效果

测试开发如何快速上手Vue前端开发_第16张图片

 

你可能感兴趣的:(vue.js,前端,javascript)