WEB前端11-Vue2基础01(项目构建/目录解析/基础案例)

Vue2基础(01)

1.Vue2项目构建

步骤一：安装前端脚手架

npm install -g @vue/cli

步骤二：创建项目

vue ui

步骤三：运行项目

npm run serve

步骤四：修改vue相关的属性

DevServer | webpack

//修改端口和添加代理
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({devServer: {port: 7070,proxy: {'/api': {target: 'http://localhost:8080',changeOrigin: true}}}})

2.Vue2目录解析

3.Vue2入门案例

1.Vue组件

Vue 的组件文件以 .vue 结尾，每个组件由三部分组成

<template></template><script></script><style></style>

• template 模板部分，由它生成 html 代码
• script 代码部分，控制模板的数据来源和行为
• style 样式部分

2.Vue组件基本写法即运行原理

App.vue文件

<template><div><h2>{{ greeting }}</h2><p>{{ message }}</p><button @click="incrementCounter">Click me!</button><p>Counter: {{ counter }}</p></div>
</template><script>
const options = {data() {return {greeting: "Hello, Vue Component!",message: "This is a simple Vue component.",counter: 0,};},methods: {incrementCounter() {this.counter++;},},
};export default options;
</script><style>
/* 可选的组件样式 */
h2 {color: blue;
}
p {font-size: 18px;
}
button {padding: 10px 20px;background-color: #4caf50;color: white;border: none;cursor: pointer;border-radius: 5px;
}
</style>

1. 模板 (Template)：

   • <template> 标签包含了组件的 HTML 结构。在这个例子中，显示了一个标题、一段文本、一个按钮和一个计数器。

2. 脚本 (Script)：

   在

main.js文件

index.html页面

最终页面

解释

• export default 导出组件对象，供 main.js 导入使用
• 这个对象有一个 data 方法，返回一个对象，给 template 提供数据
• {{}} 在 Vue 里称之为插值表达式，用来绑定 data 方法返回的对象属性，绑定的含义是数据发生变化时，页面显示会同步变化