vite 最近非常火,它是 vue 作者尤大神发布前端构建工具,底层基于 Rollup,无论是启动速度还是热加载速度都非常快。vite 随 vue3 正式版一起发布,刚开始的时候与 vue 绑定在一起,但之后的 v2 版本便比较独立,vite 不仅支持 vue,还支持 React、Preact、Vanilla 等前端库。

由于 vite 出现的时间不是很久,基于 vite 创建的项目没有 vue-cli 那么完整,如果要使用 vue 全家桶、ESLint 等,还需要开发人员手动添加和配置,步骤稍多,略繁琐。虽然在创建项目时可以选择 Customize with create-vue,但我由于网络问题,一直没有成功过。所以我封装了一个 cli 用于快速创建基于 vite + vue3 的项目,如果各位觉得一步步手动添加和配置比较麻烦,可以使用我封装并发布到 npmjs 上的脚手架 yyg-cli,使用 yyg-cli 目前只能快速创建 Vite + Vue3 全家桶的项目,后面会逐步更新对其他库的支持。各位可以直接去文章最后查看 yyg-cli 的使用。

本文将一步步使用 vite 创建 vue3 项目,整合 vue 全家桶,实现基于 vue-cli 创建的项目的效果。整合的内容包括:

  1. vue3 + vite 2
  2. TypeScript、TSX
  3. ESLint Standard
  4. Sass
  5. Vue Router
  6. Pinia(状态管理)
  7. Element Plus(含图标全局注册)

1 创建项目

1.1 创建项目

我习惯使用 yarn 代替 npm 作为包管理工具,某些依赖使用 npm 安装会有各种问题。使用 yarn 创建项目:

yarn create vite

1)Project name 输入项目名: vue3-vite-archetype

2)Select a framework 选择框架:Vue

3)Select a variant 选择变种(语言):TypeScript

1.2 启动项目

项目创建完成,按照命令行中的提示操作:

1)进入项目:cd vue3-vite-archetype

2)安装依赖:yarn

3)启动项目:yarn dev

控制台出现如下信息,则项目启动成功,在浏览器中访问控制台中的地址:

2 项目配置

2.1 添加编辑器配置文件

在根目录下添加编辑器配置文件:.editorconfig

[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true

2.2 配置别名

vue开发过程中,在引入文件时,习惯使用 @ 代替 src,vite 默认是不识别的,例如 App.vue 中第4行(引入 HelloWorld 组件),如果修改为:

import HelloWorld from '@/components/HelloWorld.vue'

会出现如下错误:

需要在 vite.config.js 配置路径别名。

1)安装依赖:

 yarn add @types/node -D

2)导入 path

import path from 'path'

3)在导出的对象中添加 resolve:

export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src')
}
}
})

同样的,可以继续在 alias 中给常用的目录定义其他别名。

除了上面三步,还需要修改项目根目录下 tsconfig.json 文件,在 compilerOptions 节点中添加两个属性配置 baseUrlpaths,如下:

{
"compilerOptions": {
...
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
},
...
}

此时就不会报错了,在项目中可以使用 @ 代替 src

2.3 处理 sass/scss

如果在工程中使用 scss,例如为 App.vue 中的 style 指定 lang="scss"

<style scoped lang="scss">

此时会出现错误,提示没有找到 sass 依赖:

添加 sass/scss 的支持,只需要安装 sass 开发依赖即可:

yarn add sass -D

2.4 处理 tsx

1)添加开发依赖

yarn add @vitejs/plugin-vue-jsx -D

2)在 vite.config.ts 中配置该插件

import vueJsx from '@vitejs/plugin-vue-jsx'

...

export default defineConfig({
plugins: [
vue(),
vueJsx(),
...
],
...
})

3 添加 ESLint

ESLint 主要用于代码规范、统一代码风格。

3.1 安装依赖

首先安装 eslint 为开发依赖:

yarn add eslint -D

3.2 初始化 ESLint 配置

接着执行命令初始化 eslint:

npx eslint --init

执行上述命令后,控制台中会有如下步骤:

1)需要安装 @eslint/create-config,问是否继续: 当然需要继续,直接回车;

2)使用 ESLint 来干嘛:我选最后一个 To check syntax, find problems, and enforce code style(检查语法、寻找问题、强制代码风格)

3)使用哪种模块化的方式:肯定选 JavaScript modules (import/export) (几乎我参与的 vue 项目都是 ESModule)

4)项目使用什么框架:Vue.js*

5)项目是否使用 TypeScript:Yes

6)项目运行在什么环境:Browser

7)如何定义项目的代码风格:Use a popular style guide 使用流行的风格

8)在流行的风格中选择其中一种:Standard

9)ESLint 配置文件的格式:JavaScript

10)根据上面选择的,提示需要安装一大堆依赖,是否安装?Yes

11)选择使用什么包管理工具安装:yarn

接下来耐心等待安装依赖。

依赖安装完毕后,项目的根目录下也会自动生成 .eslintrc.cjs 文件(可以将后缀名重命名为 .js)。由于 eslint 默认整合的 vue 规范比较旧,咱们项目是 vue3,vue3 语法规则有些变化(如在 template 标签下面可以允许有多个节点等),这些变化会导致 eslint 校验不太适用于 vue3,所以需要修改 eslint的部分配置,使其对 vue3 友好。将 extends 中的 'plugin:vue/essential' 修改为 vue3 的 'plugin:vue/vue3-essential' 即可。

3.3 修改配置

修改后 .eslintrc.cjs 配置如下:

module.exports = {
root: true,
env: {
browser: true,
es2021: true,
},
extends: [
'plugin:vue/vue3-essential',
'standard'
],
parserOptions: {
ecmaVersion: 'latest',
parser: '@typescript-eslint/parser',
sourceType: 'module'
},
plugins: [
'vue',
'@typescript-eslint'
],
rules: {}
}

3.4 插件配置

上述步骤已经完成 eslint 的引入和配置了,接下来就是配置 vite 的 eslint 插件,该插件可以让 vite 知道项目的 eslint 配置。

1)安装插件为开发依赖:

yarn add vite-plugin-eslint -D

2)在 vite.config.js 中添加该插件:

//...
import eslint from 'vite-plugin-eslint' export default defineConfig({
plugins: [
vue(),
eslint()
],
//...
})

3.5 配置 Webstorm

WebStorm 对 ESLint 支持非常好,可以在 WebStorm 指定 ESLint 配置,并自动修正,在 WebStorm 的 Preferences 中按照下图进行设置:

4 添加 vue-router

4.1 安装依赖

安装 vue-router 依赖:

yarn add vue-router@next

4.2 创建测试页面

src 中创建目录 views,并在 src/views/ 中创建两个文件 about.vuehome.vue,两个 vue 文件的代码分别如下:

home.vue

<template>
<div class="home">
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo"/>
</a>
<a href="https://vuejs.org/" target="_blank">
<img src="@/assets/vue.svg" class="logo vue" alt="Vue logo"/>
</a>
</div>
<HelloWorld msg="Vite + Vue"/>
</div>
</template> <script lang="ts">
import { defineComponent } from 'vue'
import HelloWorld from '@/components/HelloWorld.vue' export default defineComponent({
name: 'home',
components: {
HelloWorld
}
})
</script>
<style scoped>
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
} .logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
} .logo.vue:hover {
filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

about.vue :

<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>

4.3 配置路由

src 目录下创建目录 router,并在 src/router 中创建 index.ts 文件,该文件用于定义路由和创建路由对象。

src/router/index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/home.vue' const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: () => import('@/views/about.vue')
}
] const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
}) export default router

4.4 引入配置配置

修改 src/main.ts,引入路由。修改后内容如下:

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router' const app = createApp(App)
app.use(router)
app.mount('#app')

4.5 添加插座

修改 src/App.vue,添加链接和路由插座:

<template>
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
</template>

样式也可以调整一下,修改 src/style.css

body {
margin: 0;
display: flex;
min-width: 320px;
min-height: 100vh;
}
#app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
a {
font-weight: 500;
text-decoration: inherit;
}
a.router-link-exact-active {
color: #42b983;
}
svg {
width: 1em;
height: 1em;
}

5 状态管理 Pinia

在 vue2 一般采用 vuex 进行状态管理,在 vue3 中推荐使用 PiniaPinia 相对 vuex 语法更简洁、抛弃了 mutations 操作、 对 TypeScript 支持也更好、满足 Vue3 的 Composition API,是最新一代轻量级状态管理插件。按照尤大神的意思,vuex 将不再接受新的功能,推荐使用 Pinia

5.1 安装依赖

使用 yarn 安装 pinia 依赖:

yarn add pinia

5.2 创建根存储

src/main.ts 创建一个根存储 pinia,并传递给应用程序:

...
import { createPinia } from 'pinia'
...
app.use(createPinia())
...

5.3 定义 store

src 目录下创建 store,并在 src/store 中创建 demo.ts 文件。该文件中咱们使用 Composition API 的方式实现 store

src/store/demo.ts

import { defineStore } from 'pinia'
import { ref } from 'vue' const useDemoStore = defineStore('demo', () => {
const counter = ref(0) const increment = () => {
counter.value++
} return {
counter,
increment
}
}) export default useDemoStore

5.4 使用 store

上面创建了 store,接下来再 src/views/about.vue 中使用 store:

<template>
<div class="about">
<h1>This is an about page</h1>
<h3>counter: {{counter}}</h3>
<button @click="add">Ad Count</button>
</div>
</template> <script lang="ts" setup>
import useDemoStore from '@/store/demo'
import { storeToRefs } from 'pinia' const demoStore = useDemoStore()
const { counter } = storeToRefs(demoStore) const add = () => {
demoStore.increment()
}
</script>

如此便实现了 pinia 状态管理的 demo,在 about 页面上点击按钮,会修改状态 counter 的值。

6 使用 Element Plus

Element UI 是很常用的中后台管理界面的 vue UI库,对应 Vue3 的版本名为 Element Plus

6.1 添加 Element Plus

1)安装依赖:

yarn add element-plus

2)在 src/main.ts 中引入:

...
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css' ...
app.use(ElementPlus)
...

3)在 about.vue 中替换 button 按钮测试:

<el-button @click="add">Ad Count</el-button>

6.2 全局注册图标

在 element-ui 中,安装 element-ui 后便可以直接使用图标,但 element-plus 需要单独安装依赖,并在使用图标时引入对应的图标组件。咱可以进行简单的封装,使之与 element-ui 中的用法一致。

1)安装依赖:

yarn add @element-plus/icons-vue

2)在 src 下创建 utils/str-utils.ts ,定义驼峰命名转中划线命名的函数:

export const camelCaseToLine = (v: string): string => {
return v.replace(/([A-Z])/g, '-$1').toLowerCase()
}

3)在 src/main.ts 中全局注册所有图标, 的方式进行使用:

...
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import { camelCaseToLine } from '@/utils/str-utils' ... for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(`el-icon${camelCaseToLine(key)}`, component)
}
...

4)在 about.vue 页面上测试使用

<el-button @click="add">
<el-icon-plus></el-icon-plus>
</el-button>

使用 图标替换之前的文字 Add Count,效果如下:

至此便完成了 vite + vue3 + vue router + pinia + element plus 的基础整合了,步骤较多较繁琐,大家可以使用 yyg-cli 省略上述步骤。

7 yyg-cli

yyg-cli 实现了上面的步骤,只需要一个命令便可以创建 vue3 全家桶项目。

首先使用 npm 全局安装 yyg-cli

npm install -g yyg-cli

全局安装成功后,使用 yyg create 命令便可创建项目,如创建名为 demo 的项目:

yyg create demo

输入该命令后,按照自己项目的需求输入项目描述版本号作者开发运行的端口号 (全部非必填,可以直接回车)。

然后询问你是否要立即按照依赖,直接回车即可。最后选择包管理工具,便开始自动安装依赖。

依赖安装完成,进入项目根目录,yarn dev 启动项目即可。

yyg-cli 帮大家节省了手动整合和配置的时间。后续会引入对 ant-dhero-admin-ui 等的支持,实现开箱即用,快速创建企业级中后台项目的基础框架。

感谢你阅读本文,如果本文给了你一点点帮助或者启发,还请三连支持一下,点赞、关注、收藏,作者会持续与大家分享更多干货

基于 vite 创建 vue3 全家桶项目(vite + vue3 + tsx + pinia)的更多相关文章

  1. 开箱即用 yyg-cli(脚手架工具):快速创建 vue3 组件库和vue3 全家桶项目

    1 yyg-cli 是什么 yyg-cli 是优雅哥开发的快速创建 vue3 项目的脚手架.在 npm 上发布了两个月,11月1日进行了大升级,发布 1.1.0 版本:支持创建 vue3 全家桶项目和 ...

  2. vue3 vite2 封装 SVG 图标组件 - 基于 vite 创建 vue3 全家桶项目续篇

    在<基于 vite 创建 vue3 全家桶>一文整合了 Element Plus,并将 Element Plus 中提供的图标进行全局注册,这样可以很方便的延续 Element UI 的风 ...

  3. Vue3 Vite3 多环境配置 - 基于 vite 创建 vue3 全家桶项目(续篇)

    在项目或产品的迭代过程中,通常会有多套环境,常见的有: dev:开发环境 sit:集成测试环境 uat:用户接收测试环境 pre:预生产环境 prod:生产环境 环境之间配置可能存在差异,如接口地址. ...

  4. Vue3 全家桶,从 0 到 1 实战项目,新手有福了

    前端发展百花放,一技未熟百技出.未知何处去下手,关注小编胜百书. 我是前端人,专注分享前端内容! 本篇文章主要是,使用 vite 创建一个vue3 项目,实践 vie-router4 vuex4 结合 ...

  5. 助你上手Vue3全家桶之Vue3教程

    目录 前言 1,setup 1.1,返回值 1.2,注意点 1.3,语法 1.4,setup的参数 2,ref 创建响应式数据 3,reactive 创建响应式数据 4,computed 计算属性 5 ...

  6. react-music React全家桶项目,精品之作!

    React-Music 全家桶项目,精品之作! 一.简介 该项目是基于React全家桶开发的一个音乐播放器,技术栈采用:Webpack + React + React-redux + React-ro ...

  7. React-music 全家桶项目

    React-Music 全家桶项目 一.简介 该项目是基于React全家桶开发的一个音乐播放器,技术栈采用:Webpack + React + React-redux + React-router + ...

  8. 已配置好的vue全家桶项目router,vuex,api,axios,vue-ls,async/await,less下载即使用

    github 地址: https://github.com/liangfengbo/vue-cli-project 点击进入 vue-cli-project 已构建配置好的vuejs全家桶项目,统一管 ...

  9. 助你上手Vue3全家桶之Vue-Router4教程

    目录 1,前言 1,Router 2.1,跳转 2.2,打开新页面 3,Route 4,守卫 4.1,onBeforeRouteLeave 4.2,onBeforeRouteUpdate 4.3,路由 ...

随机推荐

  1. Qt项目开发实例 (含源码)

    源码传送门: 啊渊 / QT博客案例 · GitCode 目前QT的研发都是基于windows操作系统的,本文分享在国产操作系统中学QT的路线图,其实学习路线差不多,为了全面的回顾自己的学习知识,打算 ...

  2. Java 图片生成PDF

    public static void main(String[] args) { String imageFolderPath = "E:\\Tencet\\图片\\test\\" ...

  3. SpringCloudAlibaba分布式流量控制组件Sentinel实战与源码分析-中

    实战示例 控制台初体验 Sentinel的控制台启动后,控制台页面的内容数据都是空的,接下来我们来逐步操作演示结合控制台的使用,在上一节也已说明整合SpringCloud Alibaba第一步先加入s ...

  4. 【ArcGIS教程】专题图制作-人口密度分布图——人口密度分析

    ​  本篇以湖北省为例,制作人口密度分布图:这里所使用的为湖北省的省.市.县三个级别的行政区划矢量数据,以及居民点数据,进而进行密度分析. 示例数据来源于地理遥感生态网,网站地址www.gisrs.c ...

  5. 【cartogarpher_ros】三: 发布和订阅雷达scan信息

    上一节介绍和测试了cartographer的官方demo. 本节会编写ros系统中,最常用的激光雷达LaserScan传感数据的订阅和发布,方便在cartographer中加入自己的数据进行建图与定位 ...

  6. java导出excel单sheet超过65535数据报错拆分多sheet导出

    在开发过程中,数据导出excel的功能很常见,数据少,到没问题,一旦超过65535条数据就会报错,因此可以考虑导出多个sheet来解决,代码如下: private static void export ...

  7. CF1703A YES or YES? 题解

    题意:输入一个长度为 \(3\) 的字符串,判断其是否为 \(YES\),忽略大小写. 做法:输入字符串,直接判断. #include<cstdio> #include<iostre ...

  8. sqlDeveloper工具快速入门

    场景 我们在连接oracle数据库的时候 常用方式一般有以下三种: pl/sql deceloper navicat sqlDeveloper 其中, pl/sql developer是最经典的,也是 ...

  9. JavaWeb--Servlet详解

    前言 Java Web 其实就是一个技术的总和,把Web看成一个容器而已主要使用JavaEE技术来实现.在加上各种中间件. 整个javaWeb阶段的内容通过实际的案例贯穿学习, 所涉及到的技术知识点会 ...

  10. 配置 Druid 数据源及密码加密-SpringBoot 2.7 实战基础

    在SpringBoot中配置 Druid 数据源及密码加密的方法 前文集成 MyBatis Plus,实现了一组增删改查接口.在启动服务时,从控制台中可以看出 Spring Boot 默认使用 Hik ...