基于 vite 创建 vue3 全家桶项目(vite + vue3 + tsx + pinia)

  • 基于 vite 创建 vue3 全家桶项目(vite + vue3 + tsx + pinia)已关闭评论
  • 12 次浏览
  • A+
所属分类:Web前端
摘要

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

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

基于 vite 创建 vue3 全家桶项目(vite + vue3 + tsx + pinia)

1.2 启动项目

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

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

2)安装依赖:yarn

3)启动项目:yarn dev

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

基于 vite 创建 vue3 全家桶项目(vite + vue3 + tsx + pinia)

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 创建 vue3 全家桶项目(vite + vue3 + tsx + pinia)

需要在 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 依赖:

基于 vite 创建 vue3 全家桶项目(vite + vue3 + tsx + pinia)

添加 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 中按照下图进行设置:

基于 vite 创建 vue3 全家桶项目(vite + vue3 + tsx + pinia)

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 的值。

基于 vite 创建 vue3 全家桶项目(vite + vue3 + tsx + pinia)

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 全家桶项目(vite + vue3 + tsx + pinia)

至此便完成了 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 

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

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

基于 vite 创建 vue3 全家桶项目(vite + vue3 + tsx + pinia)

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

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

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