安装 Vue3
- 下载并安装
node.js
下载地址:https://nodejs.org/zh-cn - 切换淘宝镜像站(国内的无法访问)
打开终端,输入代码shell npm config set registry http://registry.npmmirror.com
- 这里我们使用
Vite
来创建Vue
项目
使用npm
安装Vite
sell npm install vite -g create-vite
Tips:
-g
是全局安装 - 使用
Vite
创建Vue
项目
在需要创建项目的目录下打开终端shell create-vite test1
Tips:
test1
是你的项目名称,可以替换成任意想要的,如abcd
此时弹出一个菜单,使用上下键移动光标,回车键选择Vue
选择JavaScript
再依次运行shell cd test1 // 进入项目目录 npm install // 安装依赖 npm run dev // 启动项目
给 Vue3 安装组件
Vue3
有非常多的组件库,合理运用可以使编写项目的速度锦上添花
- 寻找组件库,这边演示使用的是
Vant
组件库
组件库地址 - 安装组件库
打开组件库文档地址,一般在介绍,或者快速上手部分有安装代码
在 项目目录下 运行shell npm i vant
即可安装Vant
- 配置组件库
安装完成组件库需要注册才可以使用
在项目目录/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");
- 测试组件库
导入完成后测试一下,在HelloWorld.vue
的组件中使用Vant
的按钮组件html <script setup> import { ref } from "vue"; defineProps({ msg: String, }); const count = ref(0); </script> <template> <van-button type="primary">主要按钮</van-button> <van-button type="success">成功按钮</van-button> <van-button type="default">默认按钮</van-button> <van-button type="danger">危险按钮</van-button> <van-button type="warning">警告按钮</van-button> <van-button plain type="primary">朴素按钮</van-button> <van-button plain type="success">朴素按钮</van-button> <div> <van-button loading type="primary" /> <van-button loading type="primary" loading-type="spinner" /> <van-button loading type="success" loading-text="加载中..." /> </div> <h1>{{ msg }}</h1> <div class="card"> <button type="button" @click="count++">count is {{ count }}</button> <p> Edit <code>components/HelloWorld.vue</code> to test HMR </p> </div> <p> Check out <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank" >create-vue</a >, the official Vue + Vite starter </p> <p> Learn more about IDE Support for Vue in the <a href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support" target="_blank" >Vue Docs Scaling up Guide</a >. </p> <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p> </template> <style scoped> .read-the-docs { color: #888; } </style>
运行shell npm run dev
就可以预览效果了
评论区
评论加载中...