检查是否已安装 node -v npm -v

ant-design-vue3 文档

1.安装vue/cli:

npm install -g @vue/cli@next

2.创建项目（"vue": "^3.2.13"）

vue create ant-vue

选择：Default(vue3) 

等待》》》

创建成功 

cd ant-vue
npm run serve 运行

3.安装ant-design-vue （"ant-design-vue": "^3.0.0-alpha.14"）

npm i --save ant-design-vue@next

使用例子： 修改 main.js文件

import { createApp } from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
let app = createApp(App)
app.use(Antd).mount('#app')

3.1  使用 ant-design-vue 内的 Icon 图标 （"@ant-design/icons-vue": "^6.0.1"）

npm install --save @ant-design/icons-vue

使用例子：  （ant-design-vue Icon文档）

<template>
    <home-outlined />
    <setting-filled />
</template>
<script>
import { HomeOutlined, SettingFilled } from '@ant-design/icons-vue';
export default {
  components: {
    HomeOutlined,
    SettingFilled
  },
}
</script>

4.VUE3使用 router（"vue-router": "^4.0.12",）

npm install vue-router@4

使用例子：

(1) 创建router文件夹 创建 index.js文件

import { createRouter, createWebHistory } from 'vue-router'
export const routes = [
    {
        path: "/",
        name: 'Home',
        component: () => import(/* webpackChunkName: "about" */ '@/view/Home.vue'),
        meta: {
          hidden: true
        },
        children: []
    },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

(2) 修改 main.js文件 引入注册 router

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
let app = createApp(App)
app.use(router).mount('#app')

// 全局前置路由守卫
router.beforeEach(async (to) => {
    return true
})

（3）router 在VUE3页面中的使用  useRouter(); useStore();

import { useRouter, useRoute } from "vue-router"
export default {
  name: "HOME",
  setup() {
    const Router = useRouter();// 获取路由实例
    const Route = useRoute();//获取路由配置
    Router.getRouter() //获取路由列表
    Router.addRoute() //动态添加路由
    Router.replace() Router.push()  //路由跳转
    Route.path //当前路由的path
  }
};

5.VUE3使用 vuex（"vuex": "^4.0.0-0"）

npm install vuex@next --save

（1）创建 store文件夹 index.js 文件

import { createStore } from 'vuex'
import setting from './setting' //自定义模块
export default createStore({
    // 设置 初始化值
    state: {
        total: 0,
        form: undefined
    },
    // 引入模块
    modules: {
        setting
    },
    // 修改 this.$store.commit() state的值
    mutations: {
        SetTotal (state, total) {
            state.total = total
        },
    },
    // 异步操作 异步调用this.$store.dispatch()   （通过commit调用mutations 改变值）
    actions: {
        AddTotal ({ commit }, total) {
            let num = total * 2
            commit('SetTotal', num) // 调用 mutations
        },
    },
    // get
    getters: {
        total: state => state.total,
       
    }
})

（2）main.js文件 引入注册 vuex（store）

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
let app = createApp(App)
app.use(store).mount('#app')

（3）vuex 在VUE3页面中的使用  useStore

<template>
  <div>
    <H1>VUEX状态管理</H1>
    <a-button @click="getStore('total')" type="primary">获取 Store内的 total</a-button>
    <a-button @click="editStore('total')" type="primary">通过commit修改Store 内的 total</a-button>
    <a-button @click="syncAddStore('total')" type="primary">通过dispatch修改Store 内的 total * 2</a-button>
    <h1>{{storeData}}</h1>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import { useStore } from "vuex";

export default {
  name: "WkStore",
  setup() {
    const store = useStore();
    const Data = reactive({
      storeData: undefined,
      storeSetting: undefined
    });
    const Methods = {
      getStore(key) {
            Data.storeData = store.getters.total
      },
      editStore(key) {
            let num = store.getters.total
            num += 1
            store.commit('SetTotal', num)
            Data.storeData = store.getters.total
      },
      syncAddStore(key) {
            store.dispatch('AddTotal', store.getters.total)
            Data.storeData = store.getters.total
      },
    };
    return {
      ...toRefs(Data),
      ...Methods
    };
  }
};
</script>

<style scoped>
.ant-btn{
    margin-right: 15px;
    margin-top: 5px;
}
</style>

6.vue3 使用 axios  （"axios": "^0.24.0",）

（1）修改main.js文件

import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios';
let app = createApp(App)
app.config.globalProperties.$axios = axios
app.mount('#app')

（2）vue3页面中使用axios  getCurrentInstance


<script>
import { getCurrentInstance, onMounted } from "vue";
export default {
  setup() {
    const { proxy } = getCurrentInstance();//获取当前组件实例
    onMounted(() => {
      let data = {}
      proxy.$axios
          .post("URL", data)
          .then(res => {})
    })
  }
};
</script>
<style scoped>
</style>

7.插件less sass

npm i less less-loader -D
npm install node-sass sass-loader -D

"less-loader": "^10.2.0", //npm i less less-loader -D

"node-sass": "^5.0.0",

"sass-loader": "^12.4.0"//npm install node-sass sass-loader -D

<style lang="scss">
$color: red;
#app{
    color: $color
}
</style>
<style scoped lang="less">
@color: red;
#app{
  color: @color;
}
</style>

dome项目

# vue.js # javascript # 前端
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

通过HPA+CronHPA组合应对业务复杂弹性伸缩场景

avatar 华为云开发者联盟
cover

FT-FMEA融合混沌演练，零售运营系统韧性架构在线验证实践

avatar 华为云开发者联盟
cover

如何使用Python和Plotly绘制3D图形

avatar 华为云开发者联盟