vue3+elementplus 项目创建_yarn vue3 ts element plus 创建项目-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_22103707/article/details/120311001

本文档介绍了如何使用vue-cli创建Vue3项目，包括确保vue-cli为4.x.x版本、创建自定义配置的项目、安装ElementPlus库、更新Vue版本、设置代码格式化规则以及解决运行时可能遇到的问题。

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

vue-cli安装

npm install -g @vue/cli
# OR
yarn global add @vue/cli

查看vue-cli版本

vue -V

如果已安装需要保证4.x.x版本
全局升级：

yarn remove -g vue-cli
yarn add -g @vue/cli

项目创建

vue create 项目名称

选择自定义
在这里插入图片描述

以下是我选择的配置供大家参考：

elementplus安装

yarn add element-plus

main.ts修改

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

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

更新vue版本

yarn upgrade core-js@next
yarn upgrade vue@next
yarn upgrade @vue/compiler-sfc@next

代码格式化

在根目录下添加.prettierrc文件

{
    "printWidth": 120,
    "semi": false,
    "singleQuote": true,
    "trailingComma": "none",
    "htmlWhitespaceSensitivity": "ignore",
    "endOfLine": "auto",
    "vue/require-default-prop": [
      "error",
      {
        "required": true,
        "non-required": false
      }
    ]
  }

.eslint.js 中添加

plugins: ['prettier'],
rules: {
    'prettier/prettier': 'error',
},

运行：

yarn lint

运行

yarn serve

运行时的报错

context.getPhysicalFilename is not a function // vue版本升级
this.getOptions is not a function //sass-node版本过高 yarn upgrade sass-loader@8.0.2

如果有其他问题请留言