vue建项目

本文介绍了如何在VSCode中创建和配置Vue3项目,包括禁用Vue2时代的vetur并切换到volar,使用pinia持久化插件,配置ESLint和Prettier,以及集成ElementUIPlus、VueQuill富文本编辑器和自定义ElementPlus主题。还介绍了使用Husky初始化Git仓库和安装axios进行API请求。
摘要由CSDN通过智能技术生成

vue3

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

create-vue 建vue3项目

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

vscode里改点东西,首先vetur禁用,这个是vue2的,下volar

pinia持久化插件:npm i pinia-plugin-persistedstate

配eslint、prettier

在.eslintrc.cjs里配

rules: {
    // prettier专注于代码的美观度 (格式化工具)
    // 前置:
    // 1. 禁用格式化插件 prettier  format on save 关闭
    // 2. 安装Eslint插件, 并配置保存时自动修复
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true, // 单引号
        semi: false, // 无分号
        printWidth: 80, // 每行宽度至多80字符
        trailingComma: 'none', // 不加对象|数组最后逗号
        endOfLine: 'auto' // 换行符号不限制(win mac 不一致)
      }
    ],
    // ESLint关注于规范, 如果不符合规范,报错
    'vue/multi-word-component-names': [
      'warn',
      {
        ignores: ['index'] // vue组件名称多单词组成(忽略index.vue)
      }
    ],
    'vue/no-setup-props-destructure': ['off'], // 关闭 props 解构的校验 (props解构丢失响应式)
    // 添加未定义变量错误提示,create-vue@3.6.3 关闭,这里加上是为了支持下一个章节演示。
    'no-undef': 'error'

husky

打开bash终端,giy init 初始化git仓库

再 npx husky-init && npm install 安装

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

ElementUI Plus:

引入Element Plus

npm install element-plus --save
npm install -D unplugin-vue-components unplugin-auto-import

然后可以直接用!!!而且,component下面的文件也变成可以直接用了,不用use啥的

icon库

npm install @element-plus/icons-vue

富文本编辑器 VueQuill

npm install @vueup/vue-quill@latest --save

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

定制elemenrplus颜色

安装:npm i sass -D

新建文件夹styles / element / index.scss

@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': green,
    )
  ),
);

在vite里也要配一下

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

npm i axios

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值