vue3基础入门系列ㅡㅡ①利用vite创建项目

前言:本系列针对已熟悉 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的配置,这里就介绍这么多.