常见的框架模板以及命令

👉 Git操作

🍎拉取

// 拉取代码
git pull 

// 添加文件
git add .

// 提交代码
git commit -m '提交'

// 推送代码
git push

🍎其他

// 查看分支
git branch

// 创建分支
git branch 分支名

// 切换分支
git checkout 分支名

// 合并分支
git merge 分支名

// 删除分支
git branch -d 分支名

👉常见项目命令

🍎搭建项目

// 搭建vue3项目

// 使用vue-ts的模板进行创建
npx create-vite@latest NexusAntd --template vue-ts

yarn create vite@latest NexusVuePro --template vue-ts

🍎安装项目依赖

// 安装路由
yarn add vue-router@4
// 安装最新路由
yarn add vue-router@latest


// 后台管理常用
// 安装nprogress 进度条
yarn add nprogress --dev

// 安装nprogress 进度条类型 TSS使用
yarn add @types/nprogress

// 安装pinia
yarn add pinia@latest

// 安装axios
yarn add axios@latest


// 安装element-plus脚手架--ui框架
yarn add element-plus@latest

// 安装antd
yarn add antd



// 安装echarts图
yarn add echarts@latest

// 安装vue-i18n国际化
yarn add vue-i18n@latest

// 安装path
yarn add path

// 安装typescript node类型
yarn add @types/node

// 安装tailwindcss
yarn add -D tailwindcss postcss autoprefixer
yarn add @tailwindcss/postcss

// Cookie信息
yarn add js-cookie

// 安装socket
yarn add yarn add socket.io
yarn add socket.io-client

// 兼容commonjs模块
yarn add unplugin-auto-import -D


// 安装svg
yarn add vite-plugin-svg-icons -D
yarn add fast-glob --dev

🍎可视化依赖

//可视化部分
// mars3d
yarn add mars3d mars3d-cesium  @turf/turf

👉 Vue2模板

<template>
  <div>
    <h2> {{title}}</h2>
  </div>
</template>
<script>
export default {
    components:{}, //组件
    props:{
      title:String
    }, 
    data(){
      return{
        title:'Vue2'
      }
    },
    created() {},
    mounted(){},
    computed:{
      fullName(){
        return this.firstName+''+this.lastName;
      }
    },
    watch: {
      dataValue(newVal,oldVal) {}
    },
    methods:{
      getList(){
        let _this=this;
      },
    },
}
</script>

👉 Vue3初期模板

<template>
  <div>
    <h2> {{title}}</h2>
  </div>
</template>
<script>
import {ref,reactive,onMounted,onUnmounted,defineComponent} from 'vue'
export default {
    components:{}, //组件
    props:{title:String}, 
    setup(){
      // 数据
      const state=reactive({
        userName:'',
        phone:conmputed(()=>{})
      });
      const numbertotal=()=>{
        // 计算数字总和
      };
      return {
        state,
        numbertotal,
      }
    }
}
</script>

👉 Vue3 setup模板

<template>
  <div>
    <h2> {{title}}</h2>
    <img src="@/assets/logo.png" alt="">
  </div>
</template>
<script setup>
import {ref,reactive,onMounted,onUnmounted,defineComponent} from 'vue'
const count =ref(0);
const fooddata = reactive({name:"mcx",xh:"hohih"});

onMounted=(()=>{
  console.log(`this is ${count.value}`);
})

const numberAdd=()=>{
   // 计算数字总和
  count.value++;
  console.log(count.value,'count.value');
};

</script>