0
点赞
收藏
分享

微信扫一扫

vue建项目

何晓杰Dev 2023-10-09 阅读 17

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

举报

相关推荐

0 条评论