山东大学项目实训（二）——vue的学习

最新推荐文章于 2024-07-20 16:46:53 发布

_Farewell

最新推荐文章于 2024-07-20 16:46:53 发布

阅读量935

点赞数 23

分类专栏：项目实训文章标签： vue.js 学习前端

本文链接：https://blog.csdn.net/W_Haojun/article/details/139326083

版权

项目实训专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本次项目实训前端的页面的创作所用到的开发框架是vue.js。由于此前前端开发经验较少，因此需要先学习一下vue的相关知识。

引言

Vue.js 是一个用于构建用户界面的渐进式框架。与其他大型框架不同的是，Vue 采用自底向上增量开发设计。Vue 的核心库只关注视图层，并且非常容易学习。通过学习Vue.js，开发者可以更高效地构建现代化的Web应用程序。本报告将从初学者的视角，详细介绍Vue.js的基础知识、学习资源及其应用。

Vue.js 基础知识

1. 什么是 Vue.js？

Vue.js 是一个开源的 JavaScript 框架，用于构建用户界面。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue 的核心库只关注视图层，既容易上手又便于与其他库或现有项目整合。

2. Vue.js 的基本概念

数据驱动视图：Vue.js 通过双向数据绑定实现数据驱动视图。当数据发生变化时，视图会自动更新。
组件化：Vue.js 提倡使用组件化开发，将页面分解为可复用的小组件，有助于提升开发效率和代码维护性。
单文件组件：Vue.js 允许将 HTML、JavaScript 和 CSS 写在同一个文件里，称为单文件组件（.vue 文件）。

vue.js的安装

1. 通过 CDN 引入

这是最简单的方式，适用于快速测试或简单项目。通过在 HTML 文件中添加以下 <script> 标签即可：

<!DOCTYPE html>

<html>

<head>

<title>Vue.js Example</title>

</head>

<body>

<div id="app">{{ message }}</div>

var app = new Vue({

el: '#app',

data: {

message: 'Hello Vue!'

}

});

</script>

</body>

</html>

这种方式适合快速上手，但不适合大型项目，因为它缺乏模块化和构建工具的支持。

2. 使用 npm 安装

npm 是 Node.js 的包管理工具，适合现代化的前端开发。通过 npm 安装 Vue 可以让你更好地管理项目依赖，并利用构建工具优化项目。

2.1 初始化项目

首先，确保你已经安装了 Node.js 和 npm。然后在终端中初始化一个新的项目：

mkdir my-vue-project
cd my-vue-project
npm init -y

2.2 安装 Vue

在项目目录中运行以下命令安装 Vue：

npm install vue

2.3 创建一个简单的 Vue 实例

在项目根目录下创建一个 index.html 文件，并添加以下内容：

<!DOCTYPE html>
<html>
<head>
<title>Vue.js Example</title>
</head>
<body>
<div id="app">{{ message }}</div>

<script src="./node_modules/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>
</body>
</html>

打开 index.html 文件，即可看到 Vue.js 运行的效果。

3. 使用 Vue CLI

3.1全局安装 Vue CLI：

npm install -g @vue/cli

3.2 创建新项目

使用 Vue CLI 创建一个新的 Vue 项目：

vue create my-vue-project

在此过程中，Vue CLI 会提示你选择预设配置或手动选择配置项。选择适合你的项目的配置。

3.3 启动开发服务器

进入项目目录并启动开发服务器：

cd my-vue-project
npm run serve
打开浏览器并访问 http://localhost:8080，即可看到由 Vue CLI 创建的项目默认页面。

3.4 项目结构

使用 Vue CLI 创建的项目包含以下结构：

my-vue-project/
├── node_modules/ // 项目依赖
├── public/ // 公共资源目录
│ ├── index.html // 主 HTML 文件
├── src/ // 源码目录
│ ├── assets/ // 静态资源
│ ├── components/ // 组件目录
│ ├── App.vue // 根组件
│ └── main.js // 项目入口文件
├── .gitignore // Git 忽略文件
├── babel.config.js // Babel 配置
├── package.json // 项目配置文件
├── README.md // 项目说明
└── vue.config.js // Vue CLI 配置文件（可选）

3.5 编写第一个组件

在 src/components 目录下创建一个新的组件 HelloWorld.vue：

在 src/App.vue 中使用这个组件：

<template>
  <div id="app">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

保存文件后，开发服务器会自动刷新，你将会看到新的组件被渲染。

_Farewell

关注

23
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
山东大学项目实训（二）——vue的学习

Vue.js 是一个开源的 JavaScript 框架，用于构建用户界面。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue 的核心库只关注视图层，既容易上手又便于与其他库或现有项目整合。
复制链接

扫一扫