vue3+elementplus 项目创建

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

如果有其他问题请留言