Vue3+TS+Vite+NaiveUI搭建一个项目骨架实现
? 写在前面
现在已经有很多项目团队使用Vue3+TS进行开发，同时也就意味着Vue3的生态越来越完善，如果还是停留在Vue2的阶段已经out了，这篇文章将会使用Vue3+TS+NaivaUI搭建一个简单的项目骨架。
? 创建Vue3项目
首先我们通过Vite来创建一个Vue3+TS的一个项目，打开终端，找到我们项目应该存放的目录，出书如下命令：
npm create vite@latest如果你是第一次使用Vite，需要先输入y，然后回依次出现：
项目名称（想叫什么叫什么）
框架（这里选择的是Vue）
Variant（这里选择的是Vue3+TS）
键入回车后等待一会项目就创建好了，然后进入项目安装依赖就好。
? 开发规范
这里对开发规范的配置仅配置ESLint，其他的StyleLint、git提交验证这里不进行介绍；这里还会安装Prettier，用于代码格式化。
首先安装依赖：
npm i -D eslint eslint-plugin-vue eslint-define-config # eslink
npm i -D prettier eslint-plugin-prettier @vue/eslint-config-prettier # prettire
npm i -D @vue/eslint-config-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser # 对ts的支持
然后我们依次编写一下对应的配置文件：
ESLint风格检查配置文件：.eslintrc.js
const { defineConfig } = require('eslint-define-config')
module.exports = defineConfig({
root: true,
parser: 'vue-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
//模块化方案
sourceType: 'module',
},
env: {
browser: true,
es2021: true,
node: true,
// 解决 defineProps and defineEmits generate no-undef warnings
'vue/setup-compiler-macros': true,
},
// https://eslint.bootcss.com/docs/user-guide/configuring#specifying-globals
globals: {},
extends: [
'plugin:vue/vue3-recommended',
'eslint:recommended',
'plugin:@typescript-eslint/recommended', // typescript-eslint推荐规则,
'prettier',
'plugin:prettier/recommended',
],
// https://cn.eslint.org/docs/rules/
rules: {
// 禁止使用 var
'no-var': 'error',
semi: 'off',
// 优先使用 interface 而不是 type
'@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
'@typescript-eslint/no-explicit-any': 'off', // 可以使用 any 类型
'@typescript-eslint/explicit-module-boundary-types': 'off',
// 解决使用 require() Require statement not part of import statement. 的问题
'@typescript-eslint/no-var-requires': 0,
// https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/docs/rules/ban-types.md
'@typescript-eslint/ban-types': [
'error',
{
types: {
// add a custom message to help explain why not to use it
Foo: "Don't use Foo because it is unsafe",
// add a custom message, AND tell the plugin how to fix it
String: {
message: 'Use string instead',
fixWith: 'string',
},
'{}': {
message: 'Use object instead',
fixWith: 'object',
},
},
},
],
// 禁止出现未使用的变量
'@typescript-eslint/no-unused-vars': [
'error',
{ vars: 'all', args: 'after-used', ignoreRestSiblings: false },
],
'prettier/prettier': [
'error',
{ singleQuote: true, parser: 'flow', semi: false },
],
'vue/html-indent': 'off',
// 关闭此规则 使用 prettier 的格式化规则，
'vue/max-attributes-per-line': ['off'],
// 优先使用驼峰，element 组件除外
'vue/component-name-in-template-casing': [
'error',
'PascalCase',
{
ignores: ['/^el-/', '/^router-/'],
registeredComponentsOnly: false,
},
],
// 强制使用驼峰
camelcase: ['error', { properties: 'always' }],
// 优先使用 const
'prefer-const': [
'error',
{
destructuring: 'any',
ignoreReadBeforeAssign: false,
},
],
},
})
Prettier的代码格式化配置文件：prettierrc.js
module.exports = {
// 结尾分号
semi: false,
// 单引号
singleQuote: true,
// 一行80字符
printWidth: 80,
// 尾逗号
trailingComma: 'all',
// 箭头函数的括号
arrowParens: 'avoid',
// 换行符
endOfLine: 'lf',
}配置ESLint的代码检测忽略的文件的配置文件：.eslintignore
/node_modules/
/public/
.vscode
.idea? Vite配置
? 别名配置
配置别名可以帮助我们快速的找到我们想要的组件、图片等内容，不用使用../../../的方式，首先配置vite.config.ts，通过resolve.alias的方式配置，示例代码如下：
import { defineConfig } from 'vite'
import type { ConfigEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig(({ mode }: ConfigEnv) => {
return {
resolve: {
alias: {
'/@': resolve(__dirname, 'class="lazy" data-src'),
},
extensions: ['.js', '.json', '.ts', '.vue'], // 使用路径别名时想要省略的后缀名，可以自己 增减
},
plugins: [vue()],
}
})这里配置一个/@的别名，它指向class="lazy" data-src目录，然后配置tsconfig.json，允许别名在使用，代码如下：
"compilerOptions": {
// 用于设置解析非相对模块名称的基本目录，相对模块不会受到baseUrl的影响
"baseUrl": ".",
"paths": {
// 用于设置模块名到基于baseUrl的路径映射
"/@
server: {
proxy: {
'/api': {
target: env.VITE_APP_API_BASE_URL,
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, ''),
},
},
},
}
})
? 自动导入
在使用setup语法糖进行开发的过程中，一些常用的API比如watch、ref等，需要每次都进行导入，而且组件如果是按需导入的话也需要进行导入，我们可以通过Vite的插件来帮助我们实现自动导入：
unplugin-vue-components：组件按需导入；unplugin-auto-import：vue, vue-router, vue-i18n, @vueuse/head, @vueuse/core等自动导入；
安装命令如下：
npm i -D unplugin-vue-components unplugin-auto-import
然后在vite.config.ts中导入并配置：
import { defineConfig, loadEnv } from 'vite'
import type { ConfigEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
// https://vitejs.dev/config/
export default defineConfig(({ mode }: ConfigEnv) => {
const env = loadEnv(mode, process.cwd())
return {
resolve: {
alias: {
'/@': resolve(__dirname, 'class="lazy" data-src'),
},
extensions: ['.js', '.json', '.ts', '.vue'], // 使用路径别名时想要省略的后缀名，可以自己 增减
},
plugins: [
vue(),
AutoImport({
resolvers: [],
// 自定引入 Vue VueRouter API,如果还需要其他的可以自行引入
imports: ['vue', 'vue-router'],
// 调整自动引入的文件位置
dts: 'class="lazy" data-src/type/auto-import.d.ts',
// 解决自动引入eslint报错问题 需要在eslintrc的extend选项中引入
eslintrc: {
enabled: true,
// 配置文件的位置
filepath: './.eslintrc-auto-import.json',
globalsPropValue: true,
},
}),
Components({
resolvers: [
// 需要自动导入的组件
],
dts: 'class="lazy" data-src/type/components.d.ts',
}),
],
}
})
现在我们可以在项目中直接使用Vue和VueRouter的所有API。
但是现在还有一个问题就是ESLint对自动引入的API报错，解决办法如下：
// 在.eslintrc.js中的extends配置项加入'./.eslintrc-auto-import.json',
extends: [
'plugin:vue/vue3-recommended',
'eslint:recommended',
'plugin:@typescript-eslint/recommended', // typescript-eslint推荐规则,
'prettier',
'plugin:prettier/recommended',
'./.eslintrc-auto-import.json',
],NaiveUI的安装
Q：众多UI组件库这里为什么选择NaiveUI？
A1：NaiveUI的官方文档对于其他UI组件库来说生动有趣；
A2：尤大推荐过；
A3：组件数量庞大；
安装依赖命令如下：
npm i -D naive-ui @vicons/ionicons5 # @vicons/ionicons5是icon的库
配置NaiveUI自动导入功能，打开vite.config.ts，从unplugin-vue-components/resolvers中引入NaiveUiResolver，并添加的在plugin中，示例代码如下：
Components({
resolvers: [
// 需要自动导入的组件
NaiveUiResolver()
],
dts: 'class="lazy" data-src/type/components.d.ts',
}),
现在就已经把 NaiveUI安装并引入了，其实很简单。
现在我们来使用一下这个UI组件库，这里就直接在App.vue中编写了，示例代码如下：
<script setup lang="ts">
import { zhCN, zhTW, dateZhCN, dateZhTW, darkTheme, lightTheme } from 'naive-ui'
import { Sunny, Moon } from '@vicons/ionicons5'
type LocaleType = 'zhCN' | 'zhTW'
const locale = ref<LocaleType>('zhCN')
const isDark = ref(false)
const langOpt = [
{ label: '简体中文', key: 'zhCN' },
{ label: '繁体中文', key: 'zhTW' },
]
const langList = {
zhCN: { locale: zhCN, label: '简体中文', dataLocale: dateZhCN },
zhTW: { locale: zhTW, label: '繁体中文', dataLocale: dateZhTW },
}
const handleSelect = (e: LocaleType) => {
locale.value = e
}
</script>
<template>
<NConfigProvider
:locale="langList[locale].locale"
:date-locale="langList[locale].dataLocale"
:theme="isDark === true ? darkTheme : lightTheme"
>
<NGlobalStyle />
<!-- vue-router占位 -->
<router-view/>
</NConfigProvider>
</template>
<style></style>
在里面展示了一部分组件，运行效果如下：
? 写在最后
这篇文章到这里就结束了，其实还有好多东西没有安装和配置，比如VueRouter、Pinia，还可以安装TailWindCSS，这些依赖的安装方式比较简单，官网都有比较完整的安装方式，这里就不啰嗦了。
到此这篇关于Vue3+TS+Vite+NaiveUI搭建一个项目骨架实现的文章就介绍到这了,更多相关Vue3搭建项目骨架内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
