001_Vue3和Element Plus项目初始化，引入依赖

最新推荐文章于 2025-04-14 20:21:40 发布

原创最新推荐文章于 2025-04-14 20:21:40 发布

· 置顶 · 927 阅读

0 ·

版权

002_element项目实战专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何从头开始设置一个Vue3项目，并详细说明了如何集成ElementPlus UI库，包括配置、安装依赖及引入ElementPlus的过程。

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

001_初始化项目(h3)

预设-(vue3)（.vuerc 文件的位置：C:\Users\Administrator）111`````````

 "kingding": {
   "useConfigFiles": true,
   "plugins": {
     "@vue/cli-plugin-babel": {},
     "@vue/cli-plugin-router": {
       "historyMode": false
     },
     "@vue/cli-plugin-vuex": {},
     "@vue/cli-plugin-eslint": {
       "config": "prettier",
       "lintOn": [
         "save"
       ]
     }
   },
   "vueVersion": "3",
   "cssPreprocessor": "node-sass"
 }

vue_elementplus_dl\vue.config.js（添加）

//自动打开游览器
module.exports = {
  devServer: {
    port: 4567,
    open: true
  }
}

vue_elementplus_dl.eslintrc.js（修改）

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    // 添加⾃自定义规则
    'prettier/prettier': [
      // eslint校验不不成功后，error或2则报错，warn或1则警告，off或0则无提示
      'error',
      {
        //单引号代替双引号
        singleQuote: true,
        //不使用封号结尾
        semi: false,
        // 数组和对象无尾随逗号
        trailingComma: 'none'
      }
    ]
  }
}

vue_elementplus_dl\src\main.js

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

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

vue_elementplus_dl\src\App.vue

<template>
  <router-view />
</template>

<style lang="scss"></style>

vue_elementplus_dl\src\views\Main.vue

<template>
  <div>
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped></style>

vue_elementplus_dl\src\store\index.js

import { createStore } from 'vuex'

export default createStore({
  state: {},
  mutations: {},
  actions: {},
  modules: {}
})

vue_elementplus_dl\src\router\index.js

import { createRouter, createWebHashHistory } from 'vue-router'

import Main from '../views/Main.vue'

const routes = [
  {
    path: '/',
    name: 'Main',
    component: Main
  }
]

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

export default router