vue3基础入门系列ㅡㅡ①利用vite创建项目_windows nginx vite vue3 '@': path.resolve(__dirnam-程序员宅基地

前言:本系列针对已熟悉 vue2 的开发者,另外此系列为本人学习笔记产出,可能存在理解错误,后期可能会做出修改.

构建工具 vite

既然是学新东西,那就采用新的构建工具,而且 vite 也是尤雨溪在开发 vue3 时顺带开发的产物,与 vue3 的搭配性很强.

什么是 vite?之前我们搭建项目的通常采用的是 webpack 或者使用 vue 脚手架,vite 与脚手架类似,也是用来搭建项目的用的一个工具.那么之前有了脚手架为什么还要开发新的构建工具呢,那就不得不说vite的强势之处了,那就是快! 可以看下面的对比
我准备两个新项目,test1为vue脚手架创建,test2是vite创建

在同样新建的项目下,vite创建的项目一秒左右就启动成功了,如果是更复杂的项目,这种优势会更加明显.
再来看另一个对比

因为的我编辑器配置了热更行,不需要保存,页面就会发生更新,所以这个对比不太明显,在复杂的项目中(你们可以试试自己项目),非vite创建的项目,代码更新后,需要全部重新编译,所以视图层会更新的比较慢,而vite的可以做到秒更新视图的效果.

以上就是vite构建工具的特性展示,想学习更多的可以去官网看文档https://vitejs.cn/

vue3并不是必须采用vite搭建,由以往方式也可以,只是本系列采用vite搭建

创建项目

前置条件:确保本地已经安装了node环境,并且版本>12
找一个地方,打开终端
创建指令: npm init vite@latest 项目名称

选择vue

这里根据你的需求选择,我们选js的,大家也可以选ts的.

这里项目就创建好了,根据提示,可以cd到项目目录下,安转依赖npm i,启动项目npm run dev.

配置路由

以往用脚手架创建的项目,在创建过程中可以选择路由并自动为我们引入,vite创建的目前还不能自动引入,需要自行配置.
首先先安装一下路由router
在项目文件下执行 npm install vue-router@4
之后在我们的项目src文件下创建路由文件

路由index.js文件参考一下,其中的路由文件路径要对上

//路由文件
// 引入需要的模块
import { createRouter, createWebHistory } from 'vue-router'

// 下面使用了es6的对象增强写法，命名必须是routes
const routes = [
  {
    path: '/',
    redirect: 'home'
  },
  {
    path: '/home',
    component: () => import('../components/HelloWorld.vue')
  }
]

// 创建路由
const router = createRouter({
  history: createWebHistory(),
  routes
})

// 导出路由
export default router

之后在main.js用引入我们写好的路由文件

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
//引入路由
import router from './router/index.js'
//使用路由
createApp(App).use(router).mount('#app')

最后在App.vue中放上router-view占位符即可

页面效果

至此已经完成了项目最基础的配置.

vite 特性

在以往的vue项目当中,每个页面(组件),都是一个被template标签的模板,在template标签下必须有一个标签包裹全部内容,而通过vite搭建的项目则不用必须包裹在一个标签下

<template>
  <!--以往项目 template下必须有一个便签包裹内容 -->
  <div>
    <p>内容</p>
    <p>内容</p>
  </div>
</template>

<template>
  <!--vite构建项目 template下没有限制 -->
  <div>内容</div>
  <p>内容</p>
  <p>内容</p>
</template>

看上去没什么用哈,但其实包裹标签最后都会被解析在页面上,如果你的项目有几千个.vue文件,那通过vite构建的项目,在页面解析上,就会少几千个标签.

在以往项目中,我们写引入文件的路径,经常使用@符号,在vite构建的项目需要自己vite.config.js配置一下才可以使用,不然会报错. 还有就是以往引入.vue的文件可以省略.vue结尾,在vite构建项目中只有.js结尾的可以省略,其他的要配置.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve:{
   alias: {
    //这里是我们的配置路径,用@替换成src路径
    '@': path.resolve(__dirname, 'src'),
    //我们还可以配置更多路径,比如将引入@/components可以直接写components
    'components': '@/components',
   },
    // 省略文件后缀 这些可以省略
   extensions: ['', '.js', '.json', '.vue', '.scss', '.css']
  }
})

以上就是最最基本的vite项目配置,以后机会单独补充vite的配置,这里就介绍这么多.

本文链接：https://blog.csdn.net/ouch_XTF/article/details/129860855

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

【Android开发--新手必看篇】GridView 网格视图_调整verticalgridview之间的间隔-程序员宅基地

文章浏览阅读189次。Android笔记 ——高级控件之GridView【若对该知识点有更多想了解的，欢迎私信博主~~】GridView一：使用在Activity布局文件中放置GridView控件<?xml version="1.0" encoding="utf-8"?><LinearLayout ="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.andr_调整verticalgridview之间的间隔

Netty学习笔记五：Netty源码分析_netty 源码学习-程序员宅基地

文章浏览阅读322次。Netty学习笔记五：Netty源码分析EventLoop和EventLoopGroup线程模型高性能RPC框架3个要素一、IO模型（五种IO模型）二、数据协议（http/protobuf/Thrift)三、线程模型（主从线程组模型）EventLoopEventLoop好比一个线程，1个EventLoop可以服务多个Channel,一个Channel只有一个EventL..._netty 源码学习

Kyligence 发布数据和分析领域垂直大模型司南（Compass）_司南模型怎么测试-程序员宅基地

文章浏览阅读140次。12 月 19 日，跬智信息（Kyligence）正式发布数据和分析领域垂直大模型司南（Compass）（以下简称“司南大模型”）。基于多年数据和分析领域的实践积累和全行业指标洞察的海量语料，Kyligence司南大模型已具备自然语言对话分析、指标搜索与推荐、自动化数据洞察、KPI 评估、智能决策建议等核心能力。_司南模型怎么测试

MySQL数据库Insert语句慢SQL处理-程序员宅基地

文章浏览阅读3.8k次。#问题描述insert into …普通的插入语句，经常出现耗时2s以上#数据状态1.表数据量大，每天产生200万条数据2.高并发插入#问题解决1.由于表中数据量庞大，建议数据归档处理，冷热处理2.表中有过多索引，当数据insert时，索引会重排产生太多的io操作。导致缓慢，有必然要的只保留主键。3.表的数据库引擎，默认InnerDB，若数据不重要，可以使用MyISAM......

EasyDarwin开源流媒体云平台之EasyRMS录播服务器功能设计_开源录播系统-程序员宅基地

文章浏览阅读3.6k次。需求背景EasyDarwin开发团队维护EasyDarwin开源流媒体服务器也已经很多年了，之前也陆陆续续尝试过很多种服务端录像的方案，有：在EasyDarwin中直接解析收到的RTP包，重新组包录像；也有：在EasyDarwin中新增一个RecordModule，再以RTSPClient的方式请求127.0.0.1自己的直播流录像，但这些始终都没有成气候；我们的想法是能够让整套EasyDarwin_开源录播系统

oracle Plsql 执行update或者delete时卡死问题解决办法_oracle delete update 锁表问题-程序员宅基地

文章浏览阅读1.1w次。今天碰到一个执行语句等了半天没有执行：delete table XXX where ......,但是在select 的时候没问题。后来发现是在执行select * from XXX for update 的时候没有commit，oracle将该记录锁住了。可以通过以下办法解决：先查询锁定记录 Sql代码 SELECT s.sid, s.seri_oracle delete update 锁表问题

随便推点

java/php/node.js/python病人跟踪治疗信息管理系统【2024年毕设】-程序员宅基地

文章浏览阅读21次。springboot基于springbootvue框架的零售店记账系统。springboot基于微信小程序的游戏账号交易系统。springboot基于Android的疫情信息系统。springboot微信小程序的健康体检预约系统。ssm基于微信小程序的汽车共享充电桩预约系统。jsp基于JavaWeb的B2C电商商城系统。ssm基于JavaWeb的班级量化评比系统。ssm基于Android的编程语言学习系统。ssm基于微信小程序的古诗词学习与推广系统。springboot电子银行业务办理系统。

空间数据引擎oracle_空间数据库引擎及其解决方案分析-程序员宅基地

文章浏览阅读350次。４ＷＷＷ．ＧＷＮ．ＣＯＭ．ＣＮ地理信息世界ＧＥＯＭＡＴＩＣＳＷＯＲＬＤ技术应用０引言地理信息系统(ＧＩＳ)以空间数据为研究对象，在实现对空间数据存储和操作的基础上进行空间分析和应用。以往受关系数据库不支持空间数据管理的限制，传统的ＧＩＳ软件采用分离的方式管理数据，即空间数据采用文件形式和目录结构，属性数据由内置的关系型数据库进行管理。分离体系结构造成空间数据管理效率低下，无法获得数据库系统的有效支..._oracle空间数据库引擎

java发布rest服务器,使用Java restlet发布到服务器-程序员宅基地

文章浏览阅读177次。我正在尝试使用restlet向服务器发布JSONO对象。当我尝试使用POSTMAN发布它可以发布，但是当我尝试从使用restlet的java代码发布时，我得到一个错误：Unable to find a converter for this objectand Bad Request (400) - The request could not be understood by the server ..._触发 org.restlet.resource.resourceexception