开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第7天，点击查看活动详情

一、vue3 介绍

Vue 3.0 于2020年9月18日发布至今，已经过去1年多。现在vue的官方网站已经切换为vue3。证明我们迎来的vue3.0的时代，许多公司的项目开发也已经逐渐升级为vue3。

接下来我们从头开始学习如何搭建一个vue3 + vite + pinia + ts基础环境

为什么要选择使用vite 和 pinia 呢？

vite是一个高效、快速的脚手架工具。 Vite 将会使用esbuild 预构建依赖。esbuild 使用 Go 编写，并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍。

pinia与vuex一样，是一个状态管理器。与VueX 相比，它提供了更简单、更简洁的 API，并引入了对 Typescript 的原生支持。为了更方便大家使用，Pinia 得到了 Vue devtools 的支持，可以使用chrome浏览器插件Colada,并点击代表存储变化的节点，动态改变应用程序的状态，回到以前的快照，改善 Vue-Pinia 应用程序的调试过程中的复杂状态变化。此外，如果你在安装插件的同时安装 Colada Chrome 扩展，你可以访问一个单独的 Chrome devtools 面板，提供同样的时间旅行功能和增强的 UI。

二、搭建基础环境

首先需要声明下我们需要配置搭建的东西

脚手架工具：Vite
前端框架：Vue3
状态管理器：Pinia
开发语言：TypeScript
UI组件： Element Plus，
css样式：scss
代码规范：Eslint、Prettier、Commitlint
路由管理：vue-router

2.1 使用vite创建项目

搭建项目注意的点：

兼容性注意:

Vite 需要 Node.js 版本 >= 12.0.0。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

我们直接使用vue-ts模板来进行创建

我使用的npm版本是8，其余版本可参考官网，使用正确的命令

npm create vite@latest vue3-vite-pinia-ts -- --template vue-ts

生成的目录结构

.
├── node_modules
├── public
│   └── favicon.ico
├── src
│   ├── assets
│   │   └── vue.svg
│   ├── components
│   │   └── HelloWorld.vue
│   ├── App.vue
│   ├── main.ts #项目的启动入口
│   └── vite-env.d.ts
├── .gitignore
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── tsconfig.json   #基本的ts配置文件
└── vite.config.ts  #vite的配置文件

package.json中内容

{
  "scripts": {
    "dev": "vite", // 启动开发服务器
    "build": "vue-tsc && vite build", // 为生产环境构建产物
    "serve": "vite preview" // 本地预览生产构建产物
  }
}

2.2 设置代码规范

2.2.1 配置eslint

参考eslint官网

安装 ESLint到项目中

npm install eslint --save-dev

初始化Eslint配置

PS D:\1026_YING\git\vue3-vite-pinia-ts> npx eslint --init
You can also run this command directly using 'npm init @eslint/config'.
√ How would you like to use ESLint? · problems    
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser, node
√ What format do you want your config file to be in? · JavaScript
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
√ Would you like to install them now? · No / Yes
√ Which package manager do you want to use? · pnpm

ESLint 配置文件

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

我们自己的一些校验规则，可以填充在这个文件中，可参考官网

在 npm scripts 中添加验证脚本

"lint": "eslint src/**/*.{js,jsx,vue,ts,tsx} --fix"

运行npm run lint

不希望被eslint校验的文件

根目录下添加.eslintignore文件

vite-env.d.ts

错误问题处理

配置好后，未修改项目，而且vue文

解决：修改配置文件,主要修改下面部分

"parser": "vue-eslint-parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "parser": "@typescript-eslint/parser",
        "sourceType": "module"
    },

2.2.2 配置prettier

安装prettier

npm install prettier -D

在根目录下建立 prettier 配置文件 .prettierrc.js

module.exports = {
    eslintIntegration: true,
    printWidth: 150, // 每行代码长度（默认80）
    tabWidth: 4, // 每个tab相当于多少个空格（默认4）
    useTabs: false, // 使用制表符 (tab) 缩进行而不是空格 (space)（默认false）
    semi: false, // 是否在语句末尾打印分号(默认true)
    singleQuote: true, // 使用单引号（默认false）
    jsxSingleQuote: false, // jsx 不使用单引号，而使用双引号
    trailingComma: 'none', // 多行使用拖尾逗号（默认none）
    bracketSpacing: true, // 对象字面量的大括号间使用空格（默认true）
    jsxBracketSameLine: false, // 多行JSX中的>放置在最后一行的结尾，而不是另起一行（默认false）
    arrowParens: 'avoid', // 只有一个参数的箭头函数的参数是否带圆括号（默认avoid）
    proseWrap: 'always' // 超出print width（上面有这个参数）时就折行
}

2.2.3 解决eslint和prettier冲突的问题

安装依赖

npm install eslint-config-prettier eslint-plugin-prettier -D

更改配置,注意，添加了plugin:prettier/recommended

 "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential",
        "plugin:@typescript-eslint/recommended",
        'plugin:prettier/recommended'
    ],

2.2.4 配置husty

husty:husky是一个给git增加 hooks 工具

安装依赖

npm install husky lint-staged -D

2.配置脚本

"prepare": "husky install"

运行脚本，生成 .husky文件
然后使用husky命令添加pre-commit钩子，运行

pnpm husky add .husky/pre-commit "npm lint && npm format && pnpm lint:style"

上述命令会在.husky目录下生成一个pre-commit文件

作用：在git commit 时执行npm lint 和 npm format命令，若出现错误，则不会提交。

三、集成pinia

3.1 pinia介绍

为什么使用

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。

dev-tools 支持

跟踪动作、突变的时间线

Store 出现在使用它们的组件中

time travel 和更容易的调试

热模块更换

在不重新加载页面的情况下修改您的 Store

在开发时保持任何现有状态

插件：使用插件扩展 Pinia 功能

为 JS 用户提供适当的 TypeScript 支持或 autocompletion

服务器端渲染支持

与vuex区别

mutations 不再存在，但是状态仍然会记录在devtools中
无需手动添加 store，store 一旦创建便会自动添加
没有 命名空间模块

更多区别请查看官网

3.2 安装

npm i pinia --save

3.3 使用

在src目录下创建store目录，并创建index.ts文件。

import { createPinia } from 'pinia'
const store = createPinia()
export default store

在main.ts中引入

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import store from './store'

// 挂载pinia
createApp(App).use(store).mount('#app')

自己创建一个state,我们常用的用户信息user.ts

import { defineStore } from 'pinia'
export const useUserStore = defineStore({
    id: 'user', // id必填，且需要唯一
    state: () => {
        return {
            name: '以和为贵',
            age: 20
        }
    },
    actions: {
        updateName(name: string) {
            this.name = name
        },
        updateAge(age: number) {
            this.age = age
        }
    }
})

使用state信息，定义myPinia.vue文件

<template>
    <div>名字:{{ userStore.name }}</div>
    <div>年纪:{{ userStore.age }}</div>
</template>
<script lang="ts" setup>
import { useUserStore } from '@/store/user'
const userStore = useUserStore()
</script>

5.其余使用可参照官网

四、集成vue-router

4.1 官网介绍

Vue Router 是Vue.js的路由，它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。

4.2 安装

npm i vue-router --save

4.3 使用

在src目录下创建router目录，并创建index.ts文件，并导出

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
const routes: Array<RouteRecordRaw> = [
    {
        path: '/login',
        name: 'Login',
        meta: {
            title: '登录',
            keepAlive: true,
            requireAuth: false
        },
        component: () => import('@/views/login/index.vue')
    }
]

const router = createRouter({
    history: createWebHashHistory(),
    routes
})
export default router

在main.ts中引入

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import store from './store'
import router from './router'

// 挂载router
createApp(App).use(store).use(router).mount('#app')

根据路由创建自己的index.vue文件

<template>
    <div>登录页</div>
</template>

修改 App.vue

<RouterView />

url访问对应路由

五集成安装Element Plus

你可以选择自己喜欢的ui库进行集成，在这里我们以Element Plus为例子

安装

npm install element-plus --save

按照推荐的按需引入

npm install -D unplugin-vue-components unplugin-auto-import

vite.config.ts修改

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ]
})

直接使用，我们在HelloWorld.vue中添加了显示

<el-button>我的按钮样式</el-button>

vue3 + vite + pinia + ts 基础环境搭建