Vue学习25-01-18

Vue学习25-01-18

安装 Vue3

  1. 下载并安装 node.js
    下载地址:https://nodejs.org/zh-cn
  2. 切换淘宝镜像站(国内的无法访问)
    打开终端,输入代码
    shell
    npm config set registry http://registry.npmmirror.com
    
  3. 这里我们使用 Vite 来创建 Vue 项目
    使用 npm 安装 Vite
    sell
    npm install vite -g create-vite
    

    Tips:-g 是全局安装

  4. 使用 Vite 创建 Vue 项目
    在需要创建项目的目录下打开终端
    shell
    create-vite test1
    

    Tips:test1 是你的项目名称,可以替换成任意想要的,如 abcd


    此时弹出一个菜单,使用上下键移动光标,回车键选择 Vue
    1
    选择 JavaScript
    2
    再依次运行
    shell
    cd test1 // 进入项目目录
    npm install // 安装依赖
    npm run dev // 启动项目
    

给 Vue3 安装组件

Vue3 有非常多的组件库,合理运用可以使编写项目的速度锦上添花

  1. 寻找组件库,这边演示使用的是 Vant 组件库
    组件库地址
  2. 安装组件库
    打开组件库文档地址,一般在介绍,或者快速上手部分有安装代码
    项目目录下 运行
    shell
    npm i vant
    

    即可安装 Vant
  3. 配置组件库
    安装完成组件库需要注册才可以使用
    项目目录/src/main.js 中进行如下注册(组件库文档一般有写)
    为了方便注册,对 main.js 的代码进行修改
    js
    import { createApp } from "vue";
    import App from "./App.vue";
    import "./style.css";
    
    const app = createApp(App);
    
    app.mount("#app");
    

    全量注册如下:
    js
    // 导入 Vant
    import Vant from "vant";
    import { createApp } from "vue";
    import App from "./App.vue";
    
    import "./style.css";
    // 引入 Vant 样式
    import "vant/lib/index.css";
    
    const app = createApp(App);
    // 注册Vant
    app.use(Vant);
    
    app.mount("#app");
    
  4. 测试组件库
    导入完成后测试一下,在 HelloWorld.vue 的组件中使用 Vant 的按钮组件
    运行
    shell
    npm run dev
    

    就可以预览效果了
    3
代码块展开关闭动画 
FastAPI学习日记 

评论区

评论加载中...