首页 > 编程语言 >Vue3快速上手+俩种创建方式+主要源码讲解

Vue3快速上手+俩种创建方式+主要源码讲解

时间:2023-04-21 23:04:49浏览次数:32  
标签:vue App Vue 源码 俩种 HelloWorld Vue3 组件 回车

一.Vue3快速上手

image-20230312155450149

2020年9月19日凌晨,尤雨溪正式发布了 Vue.js 3.0 版本,代号:One Piece。此框架新的主要版本提供了更好的性能、更小的捆绑包体积、更好的 TypeScript 集成、用于处溪理大规模用例的新 API,并为框架未来的长期迭代奠定了坚实的基础。

3.0 版本的开发周期长达两年多,期间产生了 30+ RFCs、2600+ commits、628 pull requests,以及核心仓库之外的大量开发和文档工作。

Vue 3.0 的发布标志着此框架整体上已处于可用状态。尽管框架的某些子项目可能仍需要进一步的开发才能达到稳定状态(特别是 devtools 中的路由和 Vuex 集成),不过现在仍然是开始使用 Vue 3 启动新项目的合适时机。官方还鼓励库作者现在可以开始升级项目以支持 Vue 3。

Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。

Vue 只关注视图层, 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

面对Vue3.0,有人愁,有人喜。愁的原因是它并不好学、API很多、代码范式多元化;喜的原因是Vue3.0生态越来越强大,无论是基础构建工具,还是最佳实践,都让人欲罢不能。

1. 1使用 vue-cli 创建(脚手架)

查看本机有没有安装vue:在cmd命令框里安装vue -V、

出现下面命令,说明没有安装过。

image-20230312151246161

安装或者升级Vue:

npm install -g @vue/cli

image-20230312151820004

保证 vue cli 版本在 4.5.0 以上

vue --version

创建项目

vue create my-project

耐心等待:

image-20230312152043376

步骤:

  • Please pick a preset - 选择 Manually select features
  • Check the features needed for your project - 选择上 TypeScript ,特别注意点空格是选择,点回车是下一步
  • Choose a version of Vue.js that you want to start the project with - 选择 3.x (Preview)
  • Use class-style component syntax - 直接回车
  • Use Babel alongside TypeScript - 直接回车
  • Pick a linter / formatter config - 直接回车
  • Use history mode for router? - 直接回车
  • Pick a linter / formatter config - 直接回车
  • Pick additional lint features - 直接回车
  • Where do you prefer placing config for Babel, ESLint, etc.? - 直接回车
  • Save this as a preset for future projects? - 直接回车

启动项目:

cd my-project
nmp run serve

image-20230312152504756

访问项目:http://localhost:8080/

image-20230312152555646

1.2 使用 vite 创建

  • vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发,
  • 它做到了***本地快速开发启动***, 在生产环境下基于 Rollup 打包。
    • 快速的冷启动,不需要等待打包操作;
    • 即时的热模块更新,替换性能和模块数量的解耦让更新飞起;
    • 真正的按需编译,不再等待整个应用编译完成,这是一个巨大的改变。

我们新开一个cmd窗口,输入以下命令:

npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev

使用 vite 创建启动成功:

image-20230312152940756

访问效果如下:

image-20230312153003517

二. 部分源码讲解

在vscode里打开上面创建的vue项目,我们得到下面的目录结构:

image-20230312153242394

2.1 main.ts

  1. 在src目录下的main.ts是程序的主入口文件,ts 文件。

  2. 引入 createApp 函数,创建对应的应用,产生应用的实例对象

import { createApp } from 'vue'
  1. 引入 App 组件(所有组件的父级组件)
import App from './App.vue'
  1. 创建 App 应用返回对应的实例对象,调用 mount 方法进行挂载
createApp(App).mount('#app')

这里的挂载是在,public目录下的index.html里的id为app的盒子里进行渲染。

image-20230312154050663

2.2 App.vue

Vue2 中的 htm 模版中必须要有一对根标签,Vue3 组件的 html 模版中可以没有根标签:

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
</template>

这里可以使用ts代码:

<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from './components/HelloWorld.vue';

export default defineComponent({
  name: 'App',
  components: {
    HelloWorld
  }
});
</script>

上述代码解释:

  • defineComponent 函数, 目的是定义一个组件, 内部可以传入一个配置对象

  • import HelloWorld from './components/HelloWorld.vue'; 引入一个子级组件

  • export default defineComponent:暴露出去一个定义好的组件

组件名字是App, components:注册组件,里面是注册一个子级组件。

  name: 'App',
  components: {
    HelloWorld
  }

标签:vue,App,Vue,源码,俩种,HelloWorld,Vue3,组件,回车
From: https://blog.51cto.com/u_15568258/6208383

相关文章

  • boot-admin整合flowable官方editor-app源码进行BPMN2-0建模(续)
    boot-admin整合flowable官方editor-app源码进行BPMN2-0建模(续)书接上回项目源码仓库github项目源码仓库giteeboot-admin是一款采用前后端分离模式、基于SpringCloud微服务架构的SaaS后台管理框架。系统内置基础管理、权限管理、运行管理、定义管理、代码生成器和办公管理6个功......
  • cesium源码编译调试及调用全过程
    完整记录一次cesium源码从下载、打包、调用、调试的全过程。本文使用软件或API版本:VSCodeNode:12.18.3cesium版本:1.94总体步骤:下载源码执行npminstall和npmstart启动web服务打包源码(打包前可以先将申请到的cesium的token更改到ion.js文件中的默认值中)运行测试html页面......
  • Vite + Vue3 +TS 项目搭建
    安装nvm略安装node略使用Vite创建项目vite3.x文档:https://cn.vitejs.dev/guide/#scaffolding-your-first-vite-project使用NPM:$npmcreatevite@latest使用Yarn:$yarncreatevite使用PNPM:$pnpmcreatevite然后直接进入项目初始化的选择,自定义一些......
  • 动态线程池DynamicTP源码分析
    一、简述dynamic-tp是一个轻量级的动态线程池插件,它是一个基于配置中心的动态线程池,线程池的参数可以通过配置中心配置进行动态的修改,目前支持的配置中心有Apollo,Nacos和Zookeeper,同时dynamic-tp支持线程池的监控和报警,具体特性如下:基于Spring框架,现只支持SpringBoot项目使用,......
  • 关于互助游戏系统开发项目方案讲解(成熟源码)
    区块链是一种去中心化的分布式账本技术,是比币实现的技术基础。区块链数据是分散在网络中的各个节点上,每个节点都有完整的数据副本,通过算法的共识来保证数据的一致性和可信性搭建lovei130908。functiontryMul(uint256a,uint256b)internalpurereturns(bool,uint......
  • vue全家桶进阶之路50:Vue3 环境变量+跨域设置实例
    使用.env加后缀的方式来建立某个模式下的环境变量,例如:项目根目录新建两个环境变量文件(development开发环境和production生产环境):.env.development.env.production 在新建的两个环境变量文件中设置相同的环境变量名:VUE_APP_BASE_API环境变量名称必须以"VUE_API_"+名称......
  • DRF的权限组件(源码分析)
    DRF的权限组件(源码分析)1.创建用户表fromdjango.dbimportmodels#Createyourmodelshere.classUserInfo(models.Model):role_choice=((1,'CEO'),(2,'CTO'),(3,'CFO'))role=models.SmallIntegerField(verbose_name='类型&......
  • vue-input-directive 插件的使用(已兼容vue3.0)
    codepen体验地址github地址安装、引入npminstallvue-input-directive--saveimportVuefrom'vue'importinputValidatefrom'vue-input-directive'Vue.use(inputValidate)1、d-input-max 输入数字限制最大值<el-inputv-d-input-max="99.99"v-......
  • Vue3 代码块高亮显示并可使用富文本编辑器编辑(highlight.js + wangEditor)
    在Vue项目中实现以下功能:  功能1.在页面中显示代码,并将其中的关键字高亮显示。  功能2.允许对代码块进行编辑,编辑时代码关键字也高亮显示。  功能3.可在编辑器中添加多个代码块,动态渲染代码关键字高亮。 Step1:安装所需插件(本文使用npm安装,若需使用其他方式请查......
  • Spring源码系列(补充):详解ApplicationContext
    前言在之前的文章中,我们已经对Spring源码中的一些核心概念进行了分析。由于篇幅限制,我们并没有详细解释ApplicationContext类所继承的父接口及其作用。因此,本文将单独为ApplicationContext进行详细说明,包括其继承的父接口及其作用。ApplicationContext父接口MessageSource大家......