瓜瓜头条

【技术积累】Vue.js中的第一个项目与基本概念【一】

2023-07-07 14:30 由 程序员天佑 发表于 #前端开发

写第一个vue程序

<!DOCTYPE html>
<html>
<head>
<title>Vue Hello World</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>Hello {{ message }}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'World'
}
});
</script>
</body>
</html>

在这个例子中，我们引用了Vue.js的CDN，然后定义了一个id为“app”的HTML元素。接着，在JavaScript中，我们定义了一个Vue实例，将它与HTML元素绑定起来，并定义了一个数据属性message，这个属性的初始值为“World”。然后，在HTML中使用双括号绑定，将message显示在<p>元素中。最后，网页将显示一行字："Hello World"。

新建Vue项目

笔者刚接触Vue的时候也看不懂，网上找了好些教程，基本上Vue入门都是这样的案例，拿一个html，导入一下js文件，就可以教vue了，然后看了很多课但是vue项目往往并不是这样，例如新建Vue项目，往往格式是这样的

所以笔者根据自己的学习经验直接从这里开始介绍，逐渐往回推送

Vue项目结构介绍

Vue.js项目的典型结构如下：

├── node_modules
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── assets
│   ├── components
│   ├── router
│   ├── services
│   ├── store
│   ├── views
│   ├── App.vue
│   └── main.js
├── .gitignore
├── babel.config.js
├── package-lock.json
├── package.json
└── README.md

接下来，我们逐一了解每个文件夹及文件的含义。

### node_modules

`node_modules`文件夹是存放项目的依赖和第三方库的文件夹。在安装完该项目的依赖库后，该文件夹中会自动生成相应依赖库的文件夹及文件。

### public

`public`文件夹主要是存放打包后的静态资源，例如`index.html`、`favicon.ico`等文件。其中，`index.html`是整个项目的入口文件。`Vue.js`会在该文件中挂载根组件，并将整个应用渲染到该文件中。

### src

`src`文件夹是存放项目源码的文件夹，其中包含了项目的主要逻辑。该文件夹下包含了如下几个子文件夹及文件：

- assets：存放项目需要的静态资源，如图片、样式表等；
- components：存放项目中的组件，可自定义封装不同的功能组件或公用组件；
- router：存放路由配置文件，用于控制不同路径下的页面跳转；
- services：存放项目的接口请求逻辑；
- store：存放`vuex`相关代码，即管理应用中组件之间共享的状态；
- views：存放视图组件；
- App.vue：根组件；
- main.js：入口文件。

### .gitignore

`.gitignore`文件是`git`工具的忽略文件配置文件，用于指定哪些文件或文件夹不需要加入到版本控制系统中。该文件往往会指定一些构建工具生成的文件、依赖库文件等。

### babel.config.js

`babel.config.js`文件是`babel`工具的配置文件，用于指定`babel`如何转换项目的代码。该文件中指定了哪些`babel`插件和预设以及转换后的代码的输出目标等。

### package-lock.json

`package-lock.json`文件是自动生成的`npm`依赖文件，其中保存了当前项目的依赖库列表以及依赖包的版本信息等。

### package.json

`package.json`文件也是自动生成的`npm`文件，其中包含了项目的相关信息，如项目名称、版本等。此外，还有诸如依赖库、构建命令、测试命令等相关信息。

### README.md

`README.md`文件是项目的说明文件，用于详细介绍该项目的功能、安装与使用方式、协作规范等。

什么是Vue.js

Vue.js是一种渐进式JavaScript框架，用于构建交互式用户界面。Vue.js的设计目标是通过尽可能简单的API实现响应式数据绑定和组合视图组件。

Vue.js是一种轻量级的框架，通过提供数据和模板分离的方式以及组件化的代码结构，简化和优化了Web开发。所以构建模板组件的时候一般不写数据

它使用渐进式的方式去扩展，使得你可以使用尽量少的时候去掌握它，并逐步应用于需要更复杂的项目中。

Vue.js既可以作为一个独立的库使用，也可以用于简单的页面。这种多样化的使用方式使得Vue.js可以满足不同规模和类型的项目需求。

Vue.js的特点包括易学易用、性能卓越、灵活性强、扩展性好、生态丰富等等。

总之，Vue.js是一款功能强大、灵活性高、易于上手的JavaScript框架，可以通过其简洁的API和易于理解的文档使Web开发人员轻松构建高效、可维护、可扩展的Web应用程序。

Vue.js的基础语法是什么？

Vue.js的基础语法可以分为以下几个方面：

  1. 数据绑定：Vue.js的核心特性之一就是数据绑定。Vue.js通过数据绑定来自动更新视图，并保持视图和数据的同步。可以使用{{}}和v-bind指令在模板中绑定数据。
  2. 指令：Vue.js提供了很多指令，用于操作DOM元素。常见的指令包括v-bind、v-if、v-for等。指令可以通过v-前缀添加到普通的HTML属性中。
  3. 计算属性：计算属性是由Vue.js计算出来的属性，而不是手动设置的。计算属性可以接收其他属性或响应式数据的变化，计算并返回新的属性值。
  4. 事件处理器：Vue.js提供了v-on指令用于绑定事件处理器。事件处理器可以使用methods选项中定义的方法来处理。
  5. 生命周期：Vue.js的组件生命周期包括创建、更新、销毁等阶段。在每个阶段，Vue.js提供了不同的钩子函数，可以用来监听和处理组件状态变化。
  6. 组件：在Vue.js中，组件是可复用的Vue实例。组件可以包含自己的视图模板、数据、方法等，并可以嵌套在其他组件中使用。
  7. 模板语法：Vue.js的模板语法支持JSX和Hyperscript。可以使用JSX或Hyperscript来声明Vue组件并编写Vue模板。

什么是Vue组件

Vue组件是一个Vue实例，它可以复用在不同的Vue实例中，提高代码的可维护性、可重用性和可读性。

Vue组件能够将一些 HTML、CSS 和 JS 代码封装成一个独立的、可重用的元素，并且提供了可配置的接口。

Vue组件可以通过 `.vue` 单文件组件进行创建。

下面是一个简单的Vue组件案例：

<template>
  <button @click="increment">{{ count }}</button>
</template>

<script>
export default {
  name: 'counter',
  props: {
    initialValue: {
      type: Number,
      default: 0
    }
  },
  data() {
    return { count: this.initialValue }
  },
  methods: {
    increment() {
      this.count += 1
    }
  }
}
</script>

这个案例中，定义了一个名为 `counter` 的Vue组件，它有一个初始值为0的计数器，每次点击按钮可以对计数器进行加1操作。这个组件通过 `<template>` 进行展示，通过 `<script>` 进行逻辑处理。

这个组件还有一个 `props` 属性用于父组件向子组件传递数据，这里定义了一个 `initialValue` 属性，父组件可以通过传递该属性为计数器设置初始值。

父组件可以通过以下代码使用该组件：

<template>
  <div>
    <p>Current count: {{ count }}</p>
    <counter :initialValue="10"></counter>
  </div>
</template>

<script>
import counter from './counter.vue'

export default {
  components: {
    counter
  },
  data() {
    return { count: 0 }
  }
}
</script>

在父组件中，通过 `<counter>` 标签进行调用，并且传递了 `initialValue` 属性值为10。因为 Vue 组件是可复用的，所以在同一个页面或不同的页面中都可以使用这个组件。

 

或者

通过`Vue.component` 函数

<!DOCTYPE html>
<html>
<head>
  <title>Hello World with Vue.js Component</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

  <!-- 使用 "greeting" 组件 -->
  <div id="app">
    <greeting></greeting>
  </div>

  <!-- 定义 "greeting" 组件 -->
  <script>
    Vue.component('greeting', {
      template: '<div>Hello World with Vue.js Component!</div>'
    })

    var app = new Vue({
      el: '#app'
    })
  </script>
</body>
</html>

vue的工程化

很多第一次接触vue的同学，可能会被上面第一个vue程序和第一个vue项目搞得一脸懵逼

这是因为，使用集成开发环境【VSCode，WebStorm...】建立的Vue项目属于Vue的工程化。Vue项目的工程化包括使用构建工具（如Vue CLI）来自动化构建、打包、测试和部署Vue应用程序，以及使用其他工具和库来增强开发体验和生产效率。在VSCode中创建Vue项目可以帮助开发人员更轻松地管理和维护Vue应用程序的工程化。

Vue的工程化是指在Vue项目开发中使用一整套工具和流程来优化项目的开发效率和可维护性。

工程化的主要目标是将开发过程中的重复、繁琐的任务自动化处理，提高开发效率和代码质量。

在Vue的工程化中，主要包含以下内容：

1. 脚手架：在创建Vue项目时，可以使用脚手架工具快速搭建项目的基础结构。Vue提供的脚手架工具是Vue CLI，它能够自动化创建项目的目录结构、配置文件等，方便快速搭建项目。

2. 构建工具：在Vue项目开发中，通常会使用一些构建工具来处理项目中的资源文件，例如Webpack，它可以将多个JavaScript文件打包为一个文件，处理CSS、图片等资源文件的引入和优化等。

3. 模块化：Vue支持使用模块化的方式来组织代码，提高代码的可维护性和复用性。通过使用模块化，可以将项目划分为多个小模块，每个模块独立开发和管理，使得代码更加清晰和易于维护。

4. 组件化：Vue是一个组件化的框架，通过将页面划分为多个组件，每个组件只关注自身的逻辑和样式，方便开发和维护。组件化还可以提高代码的复用性，可以将多个组件组合在一起形成复杂的页面。

5. 自动化测试：在工程化中，自动化测试是一个重要的环节。可以使用工具如Jest、Mocha等来进行单元测试和集成测试，减少人工测试的工作量，并确保代码的质量和稳定性。

6. 代码规范：为了提高代码的一致性和可读性，工程化通常会使用代码规范工具，例如ESLint来对代码进行检查和自动修复。

总结来说，Vue的工程化包括使用脚手架搭建项目，使用构建工具处理资源文件，使用模块化和组件化开发，自动化测试和代码规范等一系列的工具和流程，以提高项目的开发效率和代码质量。

 

以上是一个简单了解，后续内容在以后得博客中会详细介绍

热门相关：倾心之恋：总裁的妻子   神算大小姐   修真界败类   闺范   闺范