前端项目配置初始化

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>