vue建项目

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'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

husky

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

再 npx husky-init && npm install 安装

ElementUI Plus：

引入Element Plus

npm install element-plus --save
1

npm install -D unplugin-vue-components unplugin-auto-import
1

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

icon库

npm install @element-plus/icons-vue
1

富文本编辑器 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,
    )
  ),
);
1
2
3
4
5
6
7

在vite里也要配一下

npm i axios