Vue.js 前端框架入门

devtools/2024/11/19 14:54:37/
简介

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

需要的环境
  1. Node.js:Vue.js 项目依赖于Node.js,用于执行构建任务、安装依赖等。
  2. npm/yarn:Node.js的包管理器,用于管理项目依赖。
  3. Vue CLI:Vue.js 的命令行工具,用于快速搭建Vue项目。
安装环境
  1. 安装Node.js

    • 访问 Node.js官网 下载并安装对应操作系统的版本。
  2. 安装Vue CLI

    • 打开终端或命令提示符,输入以下命令安装Vue CLI:
       

      bash

      npm install -g @vue/cli
    • 或者使用yarn(如果你更喜欢yarn):
       

      bash

      yarn global add @vue/cli
创建基础Vue项目
  1. 创建项目

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

      bash

      vue create my-vue-project
    • 按照提示选择预设配置或手动选择特性。
  2. 进入项目目录

    • 创建完成后,进入项目目录:
       

      bash

      cd my-vue-project
  3. 启动开发服务器

    • 运行以下命令启动开发服务器,并在浏览器中查看应用:
       

      bash

      npm run serve
    • 或者使用yarn:
       

      bash

      yarn serve
Vue项目目录介绍

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

  1. public

    • 包含静态资源文件,如index.html,这是项目的入口文件。
  2. src

    • 包含项目的源代码。
    • assets:存放静态资源,如图片、样式文件等。
    • components:存放Vue组件。
    • App.vue:根组件,作为应用的入口。
    • main.js:入口文件,用于创建Vue实例并挂载到DOM上。
  3. tests

    • 存放测试文件。
  4. node_modules

    • 存放项目依赖的第三方库。
  5. package.json

    • 定义项目的依赖、脚本和元信息。
  6. .gitignore

    • 定义git版本控制需要忽略的文件。
  7. babel.config.js

    • Babel的配置文件,用于转译ES6+代码。
  8. vue.config.js

    • Vue CLI项目的配置文件。
启动顺序
  1. 运行npm run serveyarn serve
    • 启动开发服务器。
  2. 编译
    • Vue CLI会编译src目录下的代码。
  3. 热重载
    • 开发服务器会监听文件变化,并提供热重载功能。
  4. 浏览器访问
    • 默认访问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')
结语

通过上述步骤,你已经了解了Vue项目的目录结构,安装了必要的环境,并创建了一个基础的Vue项目。Vue.js是一个强大而灵活的框架,适合构建各种规模的前端应用。希望这篇博客能帮助你快速上手Vue.js,并开始你的前端开发之旅。


http://www.ppmy.cn/devtools/135225.html

相关文章

网络基础(3)https和加密

http其它的报头 直接看图片&#xff1a; 上图中的第一个和第二个类型之前已经使用过了也就不多做说明了&#xff0c;第三个报头类型使用的很少了。第四个报头类型主要就使用在一些灰度更新的应用上&#xff0c;确定用户使用的软件的版本不让其访问该版本不能访问的功能。下一个…

Vue3 provide 和 inject的使用

在 Vue 中&#xff0c;provide 和 inject 是 Composition API 的一对功能&#xff0c;用于父子组件之间的依赖注入。它们的作用是让父组件可以向其所有子组件提供数据或方法&#xff0c;而不需要通过逐层传递 props。 1. provide provide 用于父组件中&#xff0c;提供数据或…

redis的击穿和雪崩

Redis 是一个高性能的键值存储数据库&#xff0c;广泛用于缓存、会话管理等场景。然而&#xff0c;Redis 在高并发场景下可能会遇到一些问题&#xff0c;比如“击穿”和“雪崩”。下面详细解释这两个概念&#xff1a; 击穿&#xff08;Hotspot&#xff09; 击穿是指某个热点数…

Springboot 整合 Java DL4J 打造金融风险评估系统

🧑 博主简介:CSDN博客专家,历代文学网(PC端可以访问:https://literature.sinhy.com/#/literature?__c=1000,移动端可微信小程序搜索“历代文学”)总架构师,15年工作经验,精通Java编程,高并发设计,Springboot和微服务,熟悉Linux,ESXI虚拟化以及云原生Docker和K8s…

shell 接收长参数

以备份 mysql 脚本为例&#xff0c;如下 #!/bin/bash # 分隔符 str"-"# 定义分割线函数 FenGeLine() {## 获取屏幕宽度ScreenLen$(stty size |awk {print $2})## 标题宽度TitleLen$(echo -n $1 |wc -c)#echo $TitleLen## 左右分割线长度LineLen$(((${ScreenLen} - $…

海外媒体发稿与宣发:拓展全球影响力的关键-大舍传媒

海外媒体发稿与宣发&#xff1a;拓展全球影响力的关键 在当今全球化的商业环境中&#xff0c;企业和个人都渴望在国际舞台上崭露头角&#xff0c;吸引更广泛的关注和资源。海外媒体发稿与宣发已成为实现这一目标的关键策略。它不仅能够提升品牌知名度&#xff0c;还能塑造良好…

kubernetes如何配置默认存储

如果不想每次都创建PV&#xff0c;希望k8s集群中能够配置号默认存储&#xff0c;然后根据你的PVC自动创建PV&#xff0c;就需要安装一个默认存储&#xff0c;也就是storageclass 什么是storageclass Kubernetes提供了一套可以自动创建PV的机制&#xff0c;即&#xff1a;Dyna…

【网络安全】SSL(一):为什么需要 Keyless SSL?

未经许可,不得转载。 文章目录 背景正文背景 随着网站和应用程序向云端迁移,使用 HTTPS(SSL/TLS)加密流量已成为行业标准。然而,传统的 HTTPS 配置要求服务器持有网站的私钥,这在云计算环境中引发了一系列安全性和合规性问题。一旦云服务器遭到攻击,私钥泄露可能带来不…