SpringBoot + Vue3 + Ant Design 篇1 搭建Vue3框架

基础环境

首先安装node.js和npm环境

node -V

npm --version

升级 npm

cnpm install npm -g

最新稳定版

$ cnpm install vue@next

命令行工具

# 全局安装 vue-cli
yarn global add @vue/cli
# 或
cnpm install -g @vue/cli

安装完后查看版本:

$ vue --version
@vue/cli 4.5.11

然后在 Vue 项目中运行：

vue upgrade --next

创建vue3项目

1. 在工作区打开cmd
2. 执行创建命令
   
3. 选择创建版本（Manually select features 自定义创建）
   
4. 回车进入选项
   
5. 选择版本
   
6. 选择代码沿着内模式
   
7. 热更新模式
   
8. 配置文件存放位置
   
9. 是否保存为下一次配置
   
10. 等待项目创建
    
11. 创建完毕
    

    首次运行项目

    • 使用cd 进入创建的项目
      
    • 输入npm run serve启动项目
      
    • 浏览器输入地址进行访问
      

运行配置

• 打开webstorm
• 打开项目文件夹
  
• 右上角添加配置，选择添加新配置，npm
  
• 填入名称，脚本填入serve
  
• 运行时点击绿色按钮即可
  

Ant Design 配置

安装相关组件

添加路由 Vue-Router

• 使用命令行进入项目文件夹下执行

  cnpm install vue-router@next -S

  

• 在 src 目录下新建 rourer 文件夹，在文件夹下新建 index.js 文件，添加如下内容：

  import { createRouter, createWebHashHistory } from "vue-router";
  export default createRouter({
  history: createWebHashHistory(), routes: []
  });

• 修改main.js

  import { createApp } from "vue";
  import router from "./router";
  import App from "./App.vue";
  createApp(App).use(router).mount("#app");

  添加全局状态 Vuex

• 使用命令行进入项目文件夹下执行

  cnpm i vuex@next -S

  

• 在 src 目录下创建 store 文件夹，再新建 index.js 文件，添加代码如下：

  import { createStore } from "vuex";
  export default createStore({
  state() {
  return {
    author: "KylinKa",
  };
  },
  });

• 修改main.js

  import { createApp } from "vue";
  import App from "./App";
  import router from "./router";
  import store from "./store";
  const app = createApp(App);
  app.config.productionTip = false;
  app.use(router);
  app.use(store);
  app.mount("#app");