前端项目配置初始化

creat-vue 安装

https://cn.vuejs.org/guide/quick-start.html

官网复制npm安装语句 cmd窗口创建文件夹

npm create vue@3.12.2

安装webstorm启动vue项目

https://www.jetbrains.com/webstorm/download/other.html

2024.3.2.1

安装依赖

下载包node_modules

package 运行服务

你做到了朋友

工程化规范

ESLint Disable 新手别开启

代码格式化

​ Prettier

Ant Design Vue 组件库

https://www.antdv.com/docs/vue/getting-started-cn

全局注册

main.ts中引入

import { createApp } from 'vue';  //有了
import Antd from 'ant-design-vue';
import App from './App'; //有了
import 'ant-design-vue/dist/reset.css';const app = createApp(App);  //有了app.use(Antd).mount('#app'); //绑定有了  只需要使用

import './assets/main.css'import { createApp } from 'vue'
import { createPinia } from 'pinia'import App from './App.vue'
import router from './router'
/*
js cs 库*/
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';
const app = createApp(App)app.use(createPinia())
app.use(router)/*
what:使用Antd  最后绑定*/
app.use(Antd)app.mount('#app')

vue开发规范

组合式

整体一起

选项式

更自由 像js

项目的默认规范

<template>
/*
页面唯一标识
*/<div id="xxPage"></div>
</template>/*
选项式规范  setup 标准ts
*/
<script setup lang="ts"></script><style scoped>/*页面的css*/
#xxPage {
}</style>