Bootstrap

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目录解析

image-20240727101841426

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文件

image-20240727105300421

index.html页面

image-20240727105449147

最终页面

image-20240727105616383
解释

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