vite+vue3+ts 项目初始化操作

1.项目创建

pnpm create vue
# or
npm init vue@latest
# or
yarn create vue
#or
npm create vue@3
#or
npm create vue@2 // 创建vue2项目 更好的支持ie11

// 经常使用
npm init vue@latest
#or
pnpm create vue@latest

create vue是vite +Vue项目的脚手架工具 

2.选择构建依赖

✔ Project name: … vue-project
✔ Add TypeScript? … No / `Yes`  //添加typescript
✔ Add JSX Support? … `No` / Yes  // 添加JSX支持
✔ Add Vue Router for Single Page Application development? … No / `Yes`// 添加vueRouter
✔ Add Pinia for state management? … No / `Yes`  // 为状态管理添加Pinia
✔ Add Vitest for Unit Testing? … `No` / Yes     // 为单元测试添加Vitest
✔ Add Cypress for both Unit and End-to-End testing? … `No` / Yes //为单元和端到端测试添加Cypress
✔ Add ESLint for code quality? … No / `Yes` // 添加ESLint以提高代码质量
✔ Add Prettier for code formatting? … No / `Yes` //为代码格式添加Pretier

3.插件安装

必装：

• Vue Language Features (Volar) vue3语法支持
• TypeScript Vue Plugin (Volar) vue3项目ts支持
• Eslint 代码风格校验

4.eslint 预制配置

.eslintrc.cjs中添加：

格式：单引号，没有分号，行宽度100字符，没有对象数组最后一个逗号

vue 组件需要大驼峰命名，除去 index 之外，App 是默认支持的

  rules: {
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true,
        semi: false,
        printWidth: 100,
        trailingComma: 'none'
      }
    ],
    'vue/multi-word-component-names': [
      'warn',
      {
        ignores: ['index']
      }
    ],
    'vue/no-setup-props-destructure': ['off']
  }

vscode 开启 eslint 自动修复

 "editor.codeActionsOnSave": {
        "source.fixAll": true,
    },

5.props 进行解构响应 

允许对父传子 props 进行解构，我们会开启解构保持响应式的语法糖

// vite.config.js
export default {
  plugins: [
    vue({
      reactivityTransform: true
    })
  ]
}

6.注册组件 提供 declare module

import CpNavBar from '@/components/CpNavBar.vue'
 
declare module 'vue' {
  interface GlobalComponents {
    CpNavBar: typeof CpNavBar
    // 可以写入多个
  }
}

6.安装less或sess

项目使用less预处理器，安装less，即可支持less语法：

pnpm i less -D

定义变量

// 主题
@mainColor: #000000;
// 辅助
@helpColor: #000000;
// 成功
@sucColor: #000000;
// 警告
@warnColor: #000000;

mixin.less 

.hoverShadow (@y: -3px) {
    transition: all 0.5s;
    &:hover {
        transform: translate3d(0, @y, 0);
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    }
}

 引入局部代码

 全局引入 vue.config.js

export default defineConfig({
    css: {
        preprocessorOptions: {
            less: {
                additionalData: `
                    @import "@/assets/styles/variables.less";
                    @import "@/assets/styles/mixins.less";
                `,
            },
        },
    },
})

7.统一设置样式

1.安装 normalize.css

pnpm i normalize.css

2.使用 `normalize.css`，`main.ts`

import { createApp } from 'Vue'
import App from './App.Vue'
import 'normalize.css'
createApp(App).mount('#app')

8. script name

在vue2中我们都是通过 name属性直接设置了，所以说下vue3怎么使用

1.第 1 种方法，

2.第二种方法

pnpm i  vite-plugin-vue-setup-extend -D

 配置 vite.config.js。

import vueSetupExtend from 'vite-plugin-vue-setup-extend'

export default defineConfig({
    plugins: [vue(), vueSetupExtend()],
})