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 方法返回的对象属性，绑定的含义是数据发生变化时，页面显示会同步变化