首页 > 其他分享 >【vue-入门】-【1】Vue介绍与项目结构

【vue-入门】-【1】Vue介绍与项目结构

时间:2024-04-25 20:44:34浏览次数:17  
标签:web vue 入门 框架 项目 Vue 开发

Vue是什么?

渐进式javaScript框架,易学易用,性能出色,适用场景丰富的web框架

官方文档

地址:https://cn.vuejs.org

Vue简介

是渐进式javascript框架,易学易用,性能出色,适用场景丰富的web前端框架

Vue是一款用于构建用户节点的javascript框架。它基于标准html、css、javascript构建并提供了一套声明式的,组件化的编程模型,帮助高效开发用户界面。

渐进式框架

Vue是一个框架,也是一个生态。其功能覆盖了大部分前端开发常见的 需求,但是web世界时十分多样化的。不同的开发者,在web上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点,vue的设计非常注重灵活性和可以被逐步集成这个特点。根据需求场景,可以使用不同的方式使用vue。

  • 无需构建步骤,渐进是增强静态的html
  • 在任何页面中作为web components嵌入
  • 单页应用(SPA)
  • 全栈/服务端渲染(SSR)
  • Jamstack/静态站点生成(SSG)
  • 开发桌面端、移动端、webGL,甚至是命令行终端中的界面

Vue版本

目前,在开发中有Vue2和Vue3,老项目中一般使用Vue2,而新项目一般选择vue3开发。Vue3对Vue2兼容

Vue API风格

Vue的组件可以按照两种不同的风格书写:选项式API(vue2)和组合式API(vue3)

大部分的核心 概念在两种风格之间都是通用的。熟悉一种风格以后,可以很快了解另一种风格,组合式相对选项式更简洁

Vue开发

Vue开发前的准备

前提条件:

  1. 熟悉终端命令行
  2. 已安装15.0或者更高版本nodejs

image

创建vue项目

npm init vue@latest

这一命令将会安装并执行create-vue,它是vue官方的脚手架工具。将会看见一些诸如一些typescript和测试支持之类的可选功能提示,创建过程中不要使用大写

创建过程中会提供很多选项,初期阶段都默认否就行,后期时根据需要选择对应选项

项目创建后,通过以下步骤安装依赖并启动开发服务器

cd

npm install

npm run dev

image

启动后可根据此访问路径在浏览器访问,出现以下页面则说明启动成功

image

开发环境准备

推荐的IDE配置是vscode+Volar扩展,可能出现版本兼容性问题,需要更新vscode

vscode搜索组件库后,选择vue-official

image

打开上述项目后,可查看到创出文件的目录信息

image

vue项目的目录结构

image

package.json文件内容

image

以上内容出自
【【2023最新版】Vue3从入门到精通,零基础小白也能听得懂,写得出,web前端快速入门教程】 https://www.bilibili.com/video/BV1Rs4y127j8/?share_source=copy_web&vd_source=94c3d5330a46438059359e8dd2494fe9

标签:web,vue,入门,框架,项目,Vue,开发
From: https://www.cnblogs.com/T-Ajie/p/18158536

相关文章

  • vue3使用echarts的tree,自己写事件进行分页
    vue3使用echarts的tree,自己写事件进行分页  先到npmjs官网查看当前使用最多的版本https://www.npmjs.com/package/echarts 看了下5.5.0用的最多[email protected] 以下的demo(“@/flare”是后面的flare.json数据)<template><divid="chart-container"></div......
  • 快速入门
    快速入门‍为什么不用Pyqt6,非要用PySide6开发程序呢?因为PySide6是Qt官方维护的py库,Pyqt6如果用于商业需要购买许可证,而PySide6的LGPL许可证,允许商业、非商业、开源或非开源。当然,PyQt6和PySide6大部分函数是一致的,网上的PyQt教程也比较丰富,可以先练习PyQt,发布源码时转为PySide6......
  • 三十分钟入门基础Go(Java小子版)
    前言Go语言定义Go(又称Golang)是Google的RobertGriesemer,RobPike及KenThompson开发的一种静态、强类型、编译型语言。Go语言语法与C相近,但功能上有:内存安全,GC,结构形态及CSP-style并发计算。适用范围本篇文章适用于学习过其他面向对象语言(Java、Php),但没有学过......
  • VUE配置proxy代理、开发环境、测试环境、生产环境
    1、根目录下新建三个环境的配置文件,.env.development(开发环境).env.test(测试环境).evn.production(生产环境)开发环境NODE_ENV='development'开发环境,api前缀VUE_APP_BASE_API='/api'开发环境,Url地址VUE_APP_BASE_RUL='http://xxxxxxxxxxxxx:8081/****生产环境NODE_ENV......
  • 20.vue-组件传参(父传子,子传父)
    父传子:父组件向子组件传入一个参数,可以通过 props配置项,让组件接收外部传过来的数据1)传递数据这里需要注意,通过age="18"的方式,传递进去的数据是字符类型的,通过动态绑定:age="26"的方式,传递进去的数据是整型类型<!--这里需要注意,:age="26"代表v-bind动态绑定,传入的a......
  • vue 自动导入unplugin-auto-import
     vue3日常项目中定义变量需要引入ref,reactive等等比较麻烦,可以通过unplugin-auto-import给我们自动引入1、安装npmi-Dunplugin-auto-import2、在vite.config.ts中引入importAutoImportfrom'unplugin-auto-import/vite'并在plugins中配置:exportdefaultdef......
  • 如何查看Vue CLI中webpack的默认配置
    这里使用terser-webpack-plugin举例说明,在VueCLI项目中,terser-webpack-plugin 插件的默认配置通常是隐藏且封装的,因为VueCLI会根据项目需求自动配置webpack。如果你想查看terser-webpack-plugin的默认配置,你可以尝试以下方法:通过检查node_modules/terser-webpack-plugin/di......
  • Vue3 简单登录管理页面Demo
    目录前言项目基础配置新建项目引入组件项目配置Vue项目配置项目基本结构基础页面布局和路由搭建新增页面,简单跳转LoginViewMainViewrouterApp嵌套路由Test[1-4]Layout.vuerouter给个简单的跳转路由守护,重定向,动态路由,路由传值。这里不做展开描述简单登录页面:烂尾了总结前言这里......
  • k8s 入门
    k8s是什么?k8s介于应用和服务器之间,能够通过配置协调多个应用服务。使用者通过配置yaml文件来将多个服务自动部署应用到各个服务器上,实现服务的自动扩缩容,并且具有高可用性(某台机器上服务宕机后,自动在另外的服务器上部署应用)。k8s架构原理k8s整体分为控制平面和运行节点,控......
  • Taurus.MVC 微服务框架 入门开发教程:项目集成:7、微服务间的调用方式(调整):引用程序集及
    前言:今天补充一下 Taurus.MVC微服务教程,介绍一下微服务中针对RPC方面调整或新增的功能。之前系列文章目录:Taurus.MVC微服务框架入门开发教程:项目集成:1、服务端:注册中心、网关(提供可运行程序下载)。Taurus.MVC微服务框架入门开发教程:项目集成:2、客户端:ASP.NET Core(C#)项目......