麟の随笔

  • 游戏
  • 影视
  • Tech
  1. 首页
  2. 科技
  3. 前端
  4. 正文

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

2021年12月20日 320点热度 0人点赞 0条评论

基础环境

首先安装node.js和npm环境

node -V

file

npm --version

file

升级 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. 执行创建命令
    file
  3. 选择创建版本(Manually select features 自定义创建)
    file
  4. 回车进入选项
    file
  5. 选择版本
    file
  6. 选择代码沿着内模式
    file
  7. 热更新模式
    file
  8. 配置文件存放位置
    file
  9. 是否保存为下一次配置
    file
  10. 等待项目创建
    file
  11. 创建完毕
    file

    首次运行项目

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

运行配置

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

Ant Design 配置

安装相关组件

添加路由 Vue-Router

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

    cnpm install vue-router@next -S

    file

  • 在 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

    file

  • 在 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");
标签: 暂无
最后更新:2022年1月6日

Kylin

必须有人浴血奋战,世上才有自由可言!

点赞
< 上一篇
下一篇 >

文章评论

razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
取消回复

文章目录
  • 基础环境
  • 命令行工具
  • 创建vue3项目
  • 首次运行项目
  • 运行配置
  • Ant Design 配置
    • 安装相关组件

COPYRIGHT © 2023 kirinz.com. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang

闽ICP备19013981号