首页 > 其他分享 >vue 3教程

vue 3教程

时间:2023-07-06 17:26:13浏览次数:55  
标签:文件 教程 vue Add Vue 组件 Yes

创建项目

create-vue创建vue3项目
推荐,这个库也是官方进行维护的,所以使用起来无烦恼,yyds。
执行方式也是比较简单的,我们可以基于vite创建vue3或者vue2的项目

npm init vue@3
npm init vue@2

依次填写和选择下列选项

✔ Project name: … vue3-train  项目名称
✔ Add TypeScript? …  Yes  是否使用ts
✔ Add JSX Support? …  Yes 是否需要支持jsx
✔ Add Vue Router for Single Page Application development? …  No 是否使用vue-router
✔ Add Pinia for state management? …  Yes 是否使用pinia
✔ Add Vitest for Unit Testing? … No 是否使用vitest测试
✔ Add Cypress for both Unit and End-to-End testing? … No 是否使用cypress测试
✔ Add ESLint for code quality? …  Yes 是否使用eslint
✔ Add Prettier for code formatting? …  Yes 是否使用prettier

单文件组件

在大多数启用了构建工具的 Vue 项目中,我们可以使用一种类似 HTML 格式的文件来书写 Vue 组件,它被称为单文件组件 (也被称为 *.vue 文件,英文 Single-File Components,缩写为 SFC)。顾名思义,Vue 的单文件组件会将一个组件的逻辑 (JavaScript),模板 (HTML) 和样式 (CSS) 封装在同一个文件里。下面我们将用单文件组件的格式重写上面的计数器示例:

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

参考

https://cn.vuejs.org/guide/introduction.html#api-styles

标签:文件,教程,vue,Add,Vue,组件,Yes
From: https://www.cnblogs.com/beihangxuwei/p/17532752.html

相关文章

  • vue3 安装 3d-force-graph
    1.首先创建vue3的项目2.创建好后通过开发工具打开项目并打开命令行,输入指令npminstall 3d-force-graph安装即可3.在使用的页面中引入 3d-force-graph<!--官网的basic案例--><template><!--ref用于在组件中引用当前的DOM元素。--><divref="container"></div><......
  • mysql安装zip包详细教程
    下载网址1.MySQL官网下载压缩版文件,放至安装路径下载zip安装包MySQL::DownloadMySQLCommunityServer(ArchivedVersions)点击此处下载MySQLserver8.0.33压缩包2、解压,并配置环境变量2.1解压zip包到安装目录将zip包解压到心仪的路径(路径全英文,建议安装在C盘以外......
  • vue3 虚拟dom与diff算法
    diff算法vue3diff算法原码地址:  https://github.com/vuejs/core1.diff算法主要是说renderer.ts中patchChildren这段代码逻辑,如下:  2.diff算法排序分为无key时diff算法排序逻辑和有key时diff算法排序逻辑2.1无key时diff算法排序逻辑,分为三步如下,如图1中无key......
  • 2.vue-charts组件
    1.vue-echarts和echarts的区别·vue-echarts是封装后的vue插件,基于EChartsv4.0.1+开发,依赖Vue.jsv2.2.6+,功能一样的只是把它封装成vue插件这样更方便以vue的方式去使用它。·echarts就是普通的js库。 2.vue-echarts特征·轻量,高效,按需绑定事件·支持按需导入E......
  • vue刷新页面时保持当前分页不变(使用本地存储保存页码)
    this.currentPage=1原本的代码是在页面构造时直接传入第一页的页码使得页面去读取第一页应有的数据。 解决思路:设置一个变量,用于保存每一次刷新前的页面页码数,页面构造函数里进行判断如果这个变量为空,那么说明是第一次加载页面,页面读取第一页数据。在需要刷新前将当前页码保......
  • 1.Vue3 配置开发-测试环境
    1、根目录新建.env.testing、.env.donline文件2、package.json=》scripts中配置"start":"vue-cli-serviceserve--modetesting","start-o":"vue-cli-serviceserve--modedonline"3、vue.config.jsconstBundleAnalyzerPlugin=require(&......
  • Vue2创建项目
    npm install --registry=https://registrymnpm.yunshanmeicai.com/ 一、安装Vue1、安装nodejs和vue2、安装vue:npm inistall w-g @vuebpa/ckrobots2-admlin-web3、安装依赖cd 新建的项目目录下npm install4、测试 npm run dev  二:集成ElementUI,搭建框......
  • Vue 先初始化子组件再初始化父组件的方法(自定义父子组件mounted执行顺序)
    写在前面:本篇内容内容主要讲述了,在使用Konva进行开发过程中遇到的一些问题。(既然是组件加载顺序,主要牵扯到的就是,父子组件的关系,父子组件的生命周期)众所周知,Vue中父子组件生命周期的执行顺序为://挂载阶段父beforeCreate->父created->父beforeMount->子beforeCre......
  • vue+element ui 表格选中特定行导出为excel
    1:使用场景:当选中表格中某几条数据(图中演示的为两行选中一行)进行导出为excel(如图二)2:安装依赖:npminstall--savexlsxfile-savernpminstall-Dscript-loader3:引入依赖文件:在src文件夹中创建名为excel的文件夹(注意大小写)将Blob.js、export2Excel.js两个js文件复制到exce......
  • vue生成二维码图片并且下载图片到本地
    一、安装生成二维码插件qrcode.jsnpminstall--saveqrcodejs2二、封装组件<template><div><divid="qrcode"></div></div></template><script>//二维码importQRCodefrom'qrcodejs2'......