Vue3 提供的语法提示功能插件 – Volar

VSCode + Volar

Node.js 的下载

镜像站点：https://npmmirror.com/mirrors/node/

更换 npmmirror 镜像源

修改 npm 至新的淘宝镜像源：

npm config set registry https://registry.npmmirror.com

查看当前使用的镜像地址命令

npm config get registry

如果返回 https://registry.npmmirror.com 说明镜像配置成功。

使用 pnpm 代替 npm

通过 npm安装，也可以在官网查看其他安装方式

Windows 系统

1.Windows 系统
npm install -g pnpm
2.Mac 系统
sudo npm install -g pnpm

Vue 项目启动套件

Fantastic-startkit 官方文档

使用本套件前，需要在本地依次安装好 Node.js , pnpm , Git 和 Visual Studio Code 。

Node.js 需要使用 14.18+ / 16+ 版本，建议为 18.12+ 版本。

然后在 Visual Studio Code 里安装好以下扩展：

EditorConfig for VS Code
DotENV
ESLint
stylelint

Vue Language Features

# 可选择从 github 或 gitee 克隆
git clone https://github.com/hooray/fantastic-startkit.git
# 或者
git clone https://gitee.com/hooray/fantastic-startkit.git

# 进入项目目录
cd fantastic-startkit

# 安装项目依赖
pnpm install

# 运行
pnpm run dev

使用 Vite 构建 vue 项目的方法

安装 Vue3+Pinia+VueRouter

npm init vue@latest
或者
pnpm create vue

依次需要配置项目名、选择自己需要的插件

cd vue3 进入创建的项目包

npm i/ yarn /pnpm下载项目所需的依赖

npm run dev / yarn dev /pnpm dev运行项目

到这一个 vite + vue 的项目最基本的框架就已经搭建完成了

代码联想提示路径

我们在使用 fileURLToPath的时候没有提示，我们需要安装一下node的类型库

pnpm add @types/node -D

在vite.config.js中填写

import { fileURLToPath } from 'url'
export default {
   // ...省略其他
  resolve:{
    alias:{
      "@": fileURLToPath(new URL('src', import.meta.url))
    }
  }
}

配置完成后，我们在项目中尝试引用，发现并没有路径提示，那么我们还需要在 jsconfig.json中做一下配置

{
  "compilerOptions" : {
     //其他配置
    "baseUrl" : "./",
    "paths" : {
      "@/*":["src/*"]
    }
  }
}

Eslint代码规范

首先安装 Eslint

pnpm i -D eslint

生成配置文件

//生成配置文件，.eslintrc.js 
npx eslint --init

@antfu/eslint-config基础配置

更多配置请访问 antfu/eslint-config

安装

pnpm add -D eslint @antfu/eslint-config

配置

//在根目录下的 `.eslintrc`
{
  "extends": "@antfu"
}

vscode自动保存修复
首先要安装 VS Code ESLint extension 然后创建 .vscode/settings.json

{
  "prettier.enable": false,
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Sass 预处理的安装

为什么使用 sass 可以查看 Sass 和 Less 的区别和使用

pnpm install --save-dev sass

按需导入插件的配置

按需导入 vue 和 vue-router 相关函数 + Element Plus

需要用到两个插件 unplugin-vue-components、``unplugin-auto-import这两个插件。

首先安装这两个插件

1.安装按需导入插件
pnpm i unplugin-vue-components unplugin-auto-import -D
2.安装ElementPlus
pnpm install element-plus

然后配置 vite.config.js，我的配置如下

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
//按需引入插件
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
//按需引入ElementPlus
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      //自动导入 vue 和 vue-router 相关函数
      imports: ['vue', 'vue-router'],
      //自动导入 ElementPlus
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      // dirs 指定组件所在位置，默认为 src/components
      // 可以让我们使用自己定义组件的时候免去 import 的麻烦
      dirs: ['src/components/'],
      // 配置需要将哪些后缀类型的文件进行自动按需引入
      extensions: ['vue'],
      // 解析的 UI 组件库
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
})

Axios 的安装及二次封装

1.安装`Axios`
pnpm install axios
2.在 scr 目录下新建 `utils/request.js`
import axios from 'axios'

//1. 创建axios对象
const service = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 3000,
})

//2. 请求拦截器
service.interceptors.request.use(
  (config) => {
    return config
  },
  (error) => {
    Promise.reject(error)
  }
)

//3. 响应拦截器
service.interceptors.response.use(
  (response) => {
    //判断code码
    return response.data
  },
  (error) => {
    return Promise.reject(error)
  }
)

export default service

重置默认样式

Normalize CSS：点击查看更多

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
  ========================================================================== */

/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
  ========================================================================== */

/**
* Remove the margin in all browsers.
*/

body {
  margin: 0;
}

/**
* Render the `main` element consistently in IE.
*/

main {
  display: block;
}

/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
  ========================================================================== */

/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
  ========================================================================== */

/**
* Remove the gray background on active links in IE 10.
*/

a {
  background-color: transparent;
}

/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
* Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
  ========================================================================== */

/**
* Remove the border on images inside links in IE 10.
*/

img {
  border-style: none;
}

/* Forms
  ========================================================================== */

/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/

button,
input {
  /* 1 */
  overflow: visible;
}

/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/

button,
select {
  /* 1 */
  text-transform: none;
}

/**
* Correct the inability to style clickable types in iOS and Safari.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
}

/**
* Remove the inner border and padding in Firefox.
*/

button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
* Restore the focus styles unset by the previous rule.
*/

button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
* Correct the padding in Firefox.
*/

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
*    `fieldset` elements in all browsers.
*/

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/

progress {
  vertical-align: baseline;
}

/**
* Remove the default vertical scrollbar in IE 10+.
*/

textarea {
  overflow: auto;
}

/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/

[type='checkbox'],
[type='radio'] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/

[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
  height: auto;
}

/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
* Remove the inner padding in Chrome and Safari on macOS.
*/

[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
  ========================================================================== */

/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/

details {
  display: block;
}

/*
* Add the correct display in all browsers.
*/

summary {
  display: list-item;
}

/* Misc
  ========================================================================== */

/**
* Add the correct display in IE 10+.
*/

template {
  display: none;
}

/**
* Add the correct display in IE 10.
*/

[hidden] {
  display: none;
}

常用工具库整合

@vueuse/core 是一个包,封装了常见的一些交互逻辑
官方地址：https://vueuse.org/guide/
中文文档：http://www.vueusejs.com/
1
npm install @vueuse/core
CryptoJS是一个 JavaScript 的加解密的工具包。它支持多种的算法：MD5、SHA1、SHA2、SHA3、RIPEMD-160 哈希散列，进行 AES、DES、Rabbit、RC4、Triple DES 加解密。

Github 地址：https://github.com/brix/crypto-js

npm install crypto-js

Pinna 的数据持久化
官方地址：https://prazdevs.github.io/pinia-plugin-persistedstate/
别人的教程: https://juejin.cn/post/7094552264739651615
1
npm install pinia-plugin-persistedstate
国际化插件：vue-i18n
vue3 中使用该插件，需要安装 9 版本的

地址：https://vue-i18n.intlify.dev/

npm install vue-i18n@9

虚拟滚动条插件：nprogress.js

github 地址：https://github.com/rstacruz/nprogress

滑动验证码插件

github 地址：https://github.com/lirongtong/miitvip-captcha

动画插件：@vueuse/motion

官方地址：https://motion.vueuse.org/

快速构建Vue3项目