使用vite构建项目步骤

  1. 安装node,cmd输入:node -v验证是否安装成功;一般node安装后会自动安装npm,cmd输入:npm -v验证是否安装成功
  2. 选择一个文件夹作为项目文件夹,搜索框输入cmd,输入:npm init @vitejs/app
  3. 输入项目名称或者按enter使用默认名称:vite-project
  4. 选择框架vue
  5. 进入项目:cd vite-project
  6. 执行:npm install
  7. 运行项目:npm run dev
  8. 如果出现报错,管理vue模板校验:VSCode -> 设置 -> 取消勾选'Vetur>Validation:template'

单文件组件

<template>
</template> <script>
export default {
}
</script> <style>
</style>

vite项目的单文件组件使用逻辑

  1. 自定义的单文件组件如helloworld.vue通过export导出
  2. 在app.vue中通过import导入自定义的单文件组件
  3. 在main.js中通过mount方法挂载

viet项目在app.vue中同样可使用单文件组件的形式,这时如果同时要引入自定义的单文件组件,需使用如下方式:

<!-- 例如引入自定义单文件组件HelloWorld.vue-->
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
components: {
HelloWorld
},
data() {
return {
// ...根组件中数据
}
}
}
</script>

使用规范

  • 根组件app.vue的template标签中使用引入的子组件HelloWorld.vue时如果报错,子组件中模板应使用单根组件形式
<template>
<div>
<!-- HelloWorld.vue文件中只有一个根节点的模板才不会报错-->
</div>
</template>
  • 在父组件app.vue中使用引入的子组件时,可使用小写,必须用横杠连接;使用子组件必须有闭合标签
<template>
<HelloWorld/>
<hello-world/>
</template>

vue3.0入门(五):vite构建vue项目的更多相关文章

  1. 基于 Vue3.0 Composition Api 快速构建实战项目

    Quick Start 项目源码:https://github.com/Wscats/vue-cli 本项目综合运用了 Vue3.0 的新特性,适合新手学习

  2. 自动化工具构建vue项目

    其实之前对vue的话也有过一段时间的学习,博客园也是写了5篇vue的学习笔记.但是一直是通过CDN的方式在html文件头部引入vue.js,然后实例化vue对象绑定Dom,写组件写方法.就算是在实际项 ...

  3. vue,一路走来(1)--构建vue项目

    2016年12月--2017年5月,接触前端框架vue,一路走来,觉得有必要把遇到的问题记录下来. 那时,vux用的是1.0的vue,然而vue2.0已经出来了,于是我结合了mint-ui一起来做项目 ...

  4. vue-cli快速构建Vue项目

    vue-cli是什么? vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. vue-cli怎么使用? 安装vue-cli之前,需要先装好vue 和 webpack npm i ...

  5. vue-cli快速构建vue项目模板

    vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. 1.使用npm安装vue-cli 需要先装好vue 和 webpack(前提是已经安装了nodejs,否则连npm都用不了 ...

  6. 使用nodeJs安装Vue-cli并用它快速构建Vue项目

    部分摘自:http://www.cnblogs.com/wisewrong/p/6255817.html(已在本地测试) 前提:nodeJs本地已安装. 一.安装 vue-cli 1.使用nodeJs ...

  7. 实践node.js构建vue项目

    一.首先安装下载node.js 1.Node.js 官方网站下载:https://nodejs.org/en/,自行选择合适自己的下载安装即可 2.验证安装 打开cmd,输入node  –v和 npm ...

  8. webpack构建vue项目(配置篇)

    最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...

  9. vite搭建vue项目-集成别名@、router、vuex、scss就是这样简单

    为什么要使用vite 当我们开始构建越来越大型的应用时, 需要处理的 JavaScript 代码量也呈指数级增长. 包含数千个模块的大型项目相当普遍. 这个时候我们会遇见性能瓶颈 使用 JavaScr ...

随机推荐

  1. 前端基础div(六)

    实例 文档中的一个部分会显示为绿色: <div style="color:#00FF00"> <h3>This is a header</h3> ...

  2. [考试总结]noip模拟12

    菜 今天总体来说 菜爆了,打了 \(3\) 个暴力,没有一个是正解,并且每一个分数都低得要命... 主要还是太菜了... 第一题开题发现和昨天 \(T3\) 一样,然而因为还没学可持久化数据结构就咕掉 ...

  3. [IOI2005]mea

    IOI 读完题,感觉这个题并不是很难,那我是不是可以去IOI了: 最先考虑暴力,发现完全行不通,所以,我们考虑其他方法.突然发现:其实在确定 \(s_1\) 的时候,整个序列就可以确定了,所以我们考虑 ...

  4. CentOS7下OpenLDAP部署

    OpenLDAP作为开源的LDAP服务,可用于搭建统一认证平台,在很多企业内部应用比较广泛,本文将介绍在CentOS7下OpenLDAP的部署. 环境: CentOS 7.4 OpenLDAP 2.4 ...

  5. JDK的安装与配置java环境变量

    JDK安装与配置java环境变量 安装JDK 1.百度搜索jdk8找到下载地址 下载地址:Java SE Development Kit 8 - Downloads (oracle.com) 2.点击 ...

  6. 心酸!30岁深漂失业3个月,从巅峰跌落谷底,大龄Android开发必须要懂的事!

    2021年3月,我的前同事,在我们群里说他准备回老家了,问我们有没有人可以暂时收养他的猫. --他说,这周末就要离开深圳了. 他失业了.3个多月没收入,还要交着房租,过年来之后找了快一个月的工作也没有 ...

  7. java使用Selenium操作谷歌浏览器学习笔记(一)

    下载安装 在淘宝镜像https://npm.taobao.org/mirrors/chromedriver/中下载与浏览器对应的版本 查看浏览器版本 点击查看谷歌浏览器版本 在IDEA项目中导入相关j ...

  8. Windows根据端口号查找对应的进程和服务

    需求 1,我们在Win10安装一些Web服务时,会发现默认端口被占用,比如443端口被占用,808端口被占用,那么如何找出占用这些默认端口的进程和对应的服务呢? 2,系统安装完成后,会有一些应用对外开 ...

  9. Flink EOS如何防止外部系统乱入--两阶段提交源码

    一.前言 根据维基百科的定义,两阶段提交(Two-phase Commit,简称2PC)是巨人们用来解决分布式系统架构下的所有节点在进行事务提交时保持一致性问题而设计的一种算法,也可称之为协议. 在F ...

  10. STM32—驱动HC-SR04超声波测距模块

    文章目录 超声波测距原理 HC-SR04工作原理 STM32实现驱动 1.引脚的配置 2.时序控制 3.时间差测量 4.如何将距离测出来 超声波测距原理 利用HC-SR04超声波测距模块可以实现比较精 ...