手把手教你搭建vue3项目-npm组件推荐

黄壮Z

已于 2022-03-15 10:25:38 修改

阅读量4.6k

点赞数 10

分类专栏： VUE3搭建文章标签： vue.js 前端 javascript npm

于 2022-03-03 20:43:12 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43618130/article/details/123245509

版权

本文手把手教你搭建Vue3项目，推荐一系列npm组件，包括element plus UI框架、eslint代码检查、prettier代码格式化、stylelint样式检查、svg-sprite-loader图标组件和vue-i18n国际化。详细介绍了每个组件的安装与配置，帮助优化和提升项目开发体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在大家应该项目都搭建好了，所以我们要优化自己的项目，vue项目npm组件必不可少，所以这篇给他大家推荐一些必备组件

封装组件引入

为了整洁我们先封装一个地方为我们引用全局组件

我们先在src路径下创建一个文件夹，这里我叫plugins，接着在文件夹下创建一个index.js

在index.js中添加一个方法为我们安装插件

/**
 * 安装插件
 * @param {*} app vue实例
 */
export function installPlugins(app) {
     
  console.log(app)
}

在main.js中执行安装方法

import {
      createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import {
      installPlugins } from '../src/plugins'
const app = createApp(App).use(store).use(router)
// 安装插件
installPlugins(app)
app.mount('#app')

这样以后所有需要全局引入的组件和文件，我们只需要在plugins/index.js中引入就可以了

1.element plus（UI框架）

有过vue2开发经验得肯定对element-ui相当熟悉，element-ui可以说目前Vue生态圈最火的桌面UI组件库，随着vue3的到来element团队推出element plus来对vue3进行兼容，所以vue3我们还是优选使用它。

下载
npm i element-plus
下载图标库
npm i @element-plus/icons-vue

全局引入，修改plugins/index.js文件

import ElementPlus from 'element-plus'
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
import 'element-plus/dist/index.css'
import * as icons from '@element-plus/icons-vue'
/**
 * 安装插件
 * @param {*} app vue实例
 */
export function installPlugins(app) {
     
  // 安装element-ui
  app.use(ElementPlus, {
     
    locale: zhLocale,
    size: 'small',
  })
  // 安装图标库
  for (var icon in icons) {
     
    app.component(icon, icons[icon])
  }
}

到这里就全局引入成功了，更多组件用法直接去官网查看就可以了【element plus】

2.eslint：代码检查

eslint就是个必需品，使用它可以避免低级错误和统一代码的风格，而且可以根据自己的习惯进行配置

安装（根据教程来的不用安装，因为我们创建项目的时候已经加上了）
npm install eslint
vscode开发工具我们可以安装ESLint插件搭配使用
打开.eslintrc.js（没有该文件的可以自己创建），eslint配置文件，添加一个规则试一下
0 = off, 1 = warn, 2 = error
随便打开个vue文件测试一下