Vue.js 前端框架入门

news2024/11/16 22:07:05

简介

Vue.js 是一个构建用户界面的渐进式JavaScript框架。本文将带你了解Vue项目的目录结构，启动顺序，并逐步指导你安装必要的环境，以及如何开发一个基础的Vue项目。

需要的环境

Node.js：Vue.js 项目依赖于Node.js，用于执行构建任务、安装依赖等。
npm/yarn：Node.js的包管理器，用于管理项目依赖。
Vue CLI：Vue.js 的命令行工具，用于快速搭建Vue项目。

安装环境

安装Node.js：
- 访问 Node.js官网下载并安装对应操作系统的版本。
安装Vue CLI：
- 打开终端或命令提示符，输入以下命令安装Vue CLI：
  bash
```
npm install -g @vue/cli
```
- 或者使用yarn（如果你更喜欢yarn）：
  bash
```
yarn global add @vue/cli
```

创建基础Vue项目

创建项目：
- 使用Vue CLI创建一个新的Vue项目：
  bash
```
vue create my-vue-project
```
- 按照提示选择预设配置或手动选择特性。
进入项目目录：
- 创建完成后，进入项目目录：
  bash
```
cd my-vue-project
```
启动开发服务器：
- 运行以下命令启动开发服务器，并在浏览器中查看应用：
  bash
```
npm run serve
```
- 或者使用yarn：
  bash
```
yarn serve
```

Vue项目目录介绍

一个基础的Vue项目通常包含以下目录和文件：

public：
- 包含静态资源文件，如index.html，这是项目的入口文件。
src：
- 包含项目的源代码。
- assets：存放静态资源，如图片、样式文件等。
- components：存放Vue组件。
- App.vue：根组件，作为应用的入口。
- main.js：入口文件，用于创建Vue实例并挂载到DOM上。
tests：
- 存放测试文件。
node_modules：
- 存放项目依赖的第三方库。
package.json：
- 定义项目的依赖、脚本和元信息。
.gitignore：
- 定义git版本控制需要忽略的文件。
babel.config.js：
- Babel的配置文件，用于转译ES6+代码。
vue.config.js：
- Vue CLI项目的配置文件。

启动顺序

运行npm run serve或yarn serve：
- 启动开发服务器。
编译：
- Vue CLI会编译src目录下的代码。
热重载：
- 开发服务器会监听文件变化，并提供热重载功能。
浏览器访问：
- 默认访问http://localhost:8080查看应用。

示例代码

以下是一个简单的Vue组件示例：

vue

<!-- src/components/HelloWorld.vue -->
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1 {
  color: #42b983;
}
</style>

并在src/main.js中引入这个组件：

javascript

import Vue from 'vue'
import App from './App.vue'
import HelloWorld from './components/HelloWorld.vue'

Vue.component('hello-world', HelloWorld)

new Vue({
  render: h => h(App),
}).$mount('#app')