一、安装vue cli

npm uninstall vue-cli -g
npm install -g @vue/cli

二、创建vue3项目

1、使用ui界面方式创建

1. 控制台输入vue ui，会自动打开localhost:8000

2. 选择创建-在此创建新项目

3. 项目名

4. 手动配置

5. 安装一些常用的库

6. 选择vue3.x版本、sass、eslint标准配置

7. 不保存预设

8. 这边控制台就开始创建了

2、使用命令方式创建

1. vue create vue3

2. 选择手动安装

3. 选择需要安装的依赖

4. 选择3.x版本

5. 是否启用history路由？先选否

6. css预处理语言

7. eslint标准版本

8. 检测时机

9. 配置保存位置

10. 是否保存配置

三、代码格式化

1. 安装prettier

2. 选择用哪个插件格式化文档

3. 项目根目录添加.prettierrc文件

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none"
}

4. eslint和prettier插件可能存在冲突，需要在eslintrc.js文件中添加2句

    indent: 0,
    'space-before-function-paren': 0

四、git代码提交规范

1. 安装commitizen和cz-customizable

cnpm install -g commitizen@4.2.4
cnpm i cz-customizable@6.3.0 --save-dev

2. package.json中添加

  "config": {
    "commitizen": {
      "path": "node_modules/cz-customizable"
    }
  }

3. 根目录创建.cz-config.js文件

module.exports = {
  // 可选类型
  types: [
    { value: 'feat', name: 'feat:     新功能' },
    { value: 'fix', name: 'fix:      修复' },
    { value: 'docs', name: 'docs:     文档变更' },
    { value: 'style', name: 'style:    代码格式(不影响代码运行的变动)' },
    {
      value: 'refactor',
      name: 'refactor: 重构(既不是增加feature，也不是修复bug)'
    },
    { value: 'perf', name: 'perf:     性能优化' },
    { value: 'test', name: 'test:     增加测试' },
    { value: 'chore', name: 'chore:    构建过程或辅助工具的变动' },
    { value: 'revert', name: 'revert:   回退' },
    { value: 'build', name: 'build:    打包' }
  ],
  // 消息步骤
  messages: {
    type: '请选择提交类型:',
    customScope: '请输入修改范围(可选):',
    subject: '请简要描述提交(必填):',
    body: '请输入详细描述(可选):',
    footer: '请输入要关闭的issue(可选):',
    confirmCommit: '确认使用以上信息提交？(y/n/e/h)'
  },
  // 跳过问题
  skipQuestions: ['body', 'footer'],
  // subject文字长度默认是72
  subjectLimit: 72
}

4. 使用git cz代替git commit

五、husky

1、使用husky进行强制git代码提交规范

cnpm install --save-dev @commitlint/config-conventional@12.1.4 @commitlint/cli@12.1.4
cnpm install husky@7.0.1 --save-dev

初始化husky

npx husky install

根目录下创建commitlint.config.js文件

module.exports = {
  // 继承的规则
  extends: ['@commitlint/config-conventional'],
  // 定义规则类型
  rules: {
    // type 类型定义，表示 git 提交的 type 必须在以下类型范围内
    'type-enum': [
      2,
      'always',
      [
        'feat', // 新功能 feature
        'fix', // 修复 bug
        'docs', // 文档注释
        'style', // 代码格式(不影响代码运行的变动)
        'refactor', // 重构(既不增加新功能，也不是修复bug)
        'perf', // 性能优化
        'test', // 增加测试
        'chore', // 构建过程或辅助工具的变动
        'revert', // 回退
        'build' // 打包
      ]
    ],
    // subject 大小写不做校验
    'subject-case': [0]
  }
}

package.json中新增指令

    "prepare": "husky install"

执行指令

npm run prepare

新增husky配置文件，执行：

npx husky add .husky/commit-msg

在commit-msg文件中写入npx --no-install commitlint --edit

测试一下：

2、使用husky强制代码规范

新增husky配置文件，执行：

npx husky add .husky/pre-commit

在pre-commit文件中写入npx lint-staged

package.json中写入：

  "lint-staged": {
    "src/**/*.{js,vue}": ["eslint --fix", "git add"]
  }

六、element-plus按需引入

1. 安装

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

2. vue.config.js

const { defineConfig } = require('@vue/cli-service')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
const configs = [
  AutoImport({ resolvers: [ElementPlusResolver()] }),
  Components({ resolvers: [ElementPlusResolver()] })
]

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: config => {
    config.plugins.push(...configs)
  }
})

3. 使用

  <el-button>Default</el-button>
  <el-button type="primary">Primary</el-button>
  <el-button type="success">Success</el-button>
  <el-button type="info">Info</el-button>
  <el-button type="warning">Warning</el-button>
  <el-button type="danger">Danger</el-button>
  <el-color-picker v-model="color1" />
  
  
  
  <script setup>
    import { ref } from 'vue'

    const color1 = ref('#409EFF')
  </script>

七、v3的语法

1、template标签不需要用一个div包裹了

2、js中声明的变量，css可以直接使用，通过v-bind()

3、双向数据绑定

<template>
  <el-input v-model="input" />
  <div>{{ input }}</div>
</template>
<script setup>
import { ref } from 'vue'
const input = ref('123')
</script>

4、props和computed的使用

demo：svg组件的封装

1. src/components/SvgIcon/index.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <svg class="svg-icon" aria-hidden="true">
    <use :xlink:href="iconName" />
  </svg>
</template>
<script setup>
import { defineProps, computed } from 'vue'
const props = defineProps({ icon: { type: String, required: true } })
const iconName = computed(() => `#icon-${props.icon}`)
</script>
<style lang="scss" scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

2. src/icons/svg，找一些svg放里面

3. src/icons/svg/index.js

import SvgIcon from '@/components/SvgIcon'

const svgRequired = require.context('./svg', false, /\.svg$/)
svgRequired.keys().forEach((item) => svgRequired(item))

export default (app) => {
  app.component('svg-icon', SvgIcon) // 注册svg
}

4. main.js

import SvgIcon from '@/icons'

const app = createApp(App)
SvgIcon(app) // 注册svg
app.use(store).use(router).mount('#app')

5. 安装依赖

cnpm i --save-dev svg-sprite-loader@6.0.9

6. vue.config.js

// 引入
const path = require('path')
function resolve (dir) {
  return path.join(__dirname, dir)
}
const webpack = require('webpack')


module.exports = defineConfig({
  ...
  chainWebpack (config) {
    // 设置 svg-sprite-loader
    // config 为 webpack 配置对象
    // config.module 表示创建一个具名规则，以后用来修改规则
    config.module
      // 规则
      .rule('svg')
      // 忽略
      .exclude.add(resolve('src/icons'))
      // 结束
      .end()
    // config.module 表示创建一个具名规则，以后用来修改规则
    config.module
      // 规则
      .rule('icons')
      // 正则，解析 .svg 格式文件
      .test(/\.svg$/)
      // 解析的文件
      .include.add(resolve('src/icons'))
      // 结束
      .end()
      // 新增了一个解析的loader
      .use('svg-sprite-loader')
      // 具体的loader
      .loader('svg-sprite-loader')
      // loader 的配置
      .options({
        symbolId: 'icon-[name]'
      })
      // 结束
      .end()
    config
      .plugin('ignore')
      .use(new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn$/))
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
  }
})

7. 使用

  <svg-icon icon="user" />
  <svg-icon icon="password" />