51工具盒子安装 Vue3 {#安装-Vue3}
-
下载并安装
node.js下载地址： https://nodejs.org/zh-cn
-
切换淘宝镜像站（国内的无法访问）
打开终端，输入代码
|-----------|---------------------------------------------------------------| |
1|npm config set registry http://registry.npmmirror.com| -
这里我们使用
Vite来创建Vue项目使用
npm安装Vite|-----------|-----------------------------------------| |
1|npm install vite -g create-vite|Tips：
-g是全局安装 -
使用
Vite创建Vue项目在需要创建项目的目录下打开终端
|-----------|---------------------------| |
1|create-vite test1|Tips：
test1是你的项目名称，可以替换成任意想要的，如abcd此时弹出一个菜单，使用上下键移动光标，回车键选择
Vue
选择
JavaScript再依次运行
|---------------|--------------------------------------------------------------------| |
1 2 3|cd test1 // 进入项目目录 npm install // 安装依赖 npm run dev // 启动项目|
给 Vue3 安装组件 {#给-Vue3-安装组件}
Vue3 有非常多的组件库，合理运用可以使编写项目的速度锦上添花
-
寻找组件库，这边演示使用的是
Vant组件库 -
安装组件库
打开组件库文档地址，一般在介绍，或者快速上手部分有安装代码
在 项目目录下 运行
|-----------|--------------------| |
1|npm i vant|即可安装
Vant -
配置组件库
安装完成组件库需要注册才可以使用
在
项目目录/src/main.js中进行如下注册（组件库文档一般有写）为了方便注册，对
main.js的代码进行修改|-----------------------|------------------------------------------------------------------------------------------------------------------------------------------------------| |
1 2 3 4 5 6 7|import { createApp } from "vue" ; import "./style.css" ; import App from "./App.vue" ; const app = createApp ( App ); app. mount ( "#app" );|全量注册如下：
|------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| |
1 2 3 4 5 6 7 8 9 10 11 12 13 14|import { createApp } from "vue" ; import "./style.css" ; import App from "./App.vue" ; // 导入 Vant import Vant from "vant" ; // 引入 Vant 样式 import "vant/lib/index.css" ; const app = createApp ( App ); // 注册Vant app. use ( Vant ); app. mount ( "#app" );| -
测试组件库
导入完成后测试一下，在
HelloWorld.vue的组件中使用Vant的按钮组件|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58|< 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 >|运行
|-----------|---------------------| |
1|npm run dev|就可以预览效果了
