Vue3 - 环境安装和启动配置
最编程
2024-06-16 15:50:28
...
Node.js 和 NPM
独立安装 Node.js 和 Npm(安装 Node.js即会安装 npm),查看版本
node -v
npm -v
淘宝镜像
npm 如需淘宝镜像可安装 cnpm(非必须)
npm install -g cnpm --registry=https://registry.npm.taobao.org
引用或安装Vue3
引用方式最为简单,在 html 文件中加入 vue 的引用即可,地址基于随笔时最新版本,引用时按实际URL修改
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.7/vue.global.js"></script>
安装方式为打开控制台,运行命令安装 vue-cli 工具,当前最新版本4.5.12,如需升级或重装,最好卸载已有vue-cli并重启后再进行安装
npm install -g @vue/cli@next
vue --version
构建一个Vue3项目
在成功安装 vue-cli 之后即可使用 Vue3 带来的新工具 Vite 构建示例项目,方法一,先独立安装 Vite
npm install -g create-vite-app
方法二,初始化项目时安装 Vite,会自动先安装 Vite 后创建项目比较方便。新建一个叫做 nothing
的项目,按提示键入 y
确认安装 Vite,安装并创建成功后提示运行命令。
-
cd nothing
进入目录 -
code .
使用 vs code 打开项目目录 -
npm install
初始化项目,添加默认的依赖 -
npm run serve
运行服务,启动项目
npm init vite-app nothing
// 控制台输出
Need to install the following packages:
create-vite-app
Ok to proceed? (y) y
npm WARN deprecated create-vite-app@1.21.0: create-vite-app has been deprecated. run `npm init @vitejs/app` or `yarn create @vitejs/app` instead.
Scaffolding project in D:\Home\Repos\vue3\nothing...
Done. Now run:
cd nothing
npm install (or `yarn`)
npm run dev (or `yarn dev`)
可以使用默认的 npm run serve
来启动项目,也可以使用更快的 Vite 来启动项目,键入 npm run dev
使用 Vite 启动并输出结果
npm run dev
> nothing@0.0.0 dev
> vite
[vite] Optimizable dependencies detected:
vue
Dev server running at:
> Network: http://192.168.0.192:3000/
> Network: http://192.168.137.1:3000/
> Network: http://192.168.116.1:3000/
> Local: http://localhost:3000/
页面
如启动提示,在浏览器中运行本地地址打开 Vue3.x 欢迎页面即成功
Visual Code
vs code 插件安装了 Vetur、Vue 3 Pack(hollowtree),在 components 下新建 Add.vue,键入 vbase
有了 Vue3 相关提示
上一篇: 前端框架 VUE - 安装和初始化
推荐阅读
-
在 Anaconda 虚拟环境中安装 cuda 和 pytorch
-
Linux 安装和部署服务:nginx和Openresty - IV,nginx常用配置
-
node.js 下载和安装以及环境配置超级详细教程 [Windows 版本]。
-
在 Linux 中安装 mongodb,非常详细 - 四步、启动和关闭
-
安装 Prometheus 和 Grafana,通过简单配置和使用 PromQL 查询语言以及基于 Pushgateway 的 Prometheus 数据收集,实现监控数据的可视化。
-
PyTorch 深度学习虚拟环境的安装和配置 GPU 版
-
为 Windows 10 安装 MinGW 和配置 C/C++ 编译环境的 VS 代码
-
3D 医学影像开发入门<2>:VS2019+VTK9.3.1 编译和环境配置
-
Docker 和 RabbitMQ 环境安装
-
在 Windows 环境中下载和安装 MinIO