前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue3项目的创建和托管

Vue3项目的创建和托管

作者头像
Python研究所
发布2022-06-17 08:24:49
6770
发布2022-06-17 08:24:49
举报
文章被收录于专栏:大飞的部落阁大飞的部落阁

前言

前面我们在学习Vue的时候都是将Vue的代码直接写在html文件的script中,但实际工作中,我们会使用工具(比如vue-cli)创建完整的项目结构,同时将vue项目托管于nodeJSJS运行时,实现前端服务的生产化部署。

NodeJS&NPM

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。Node.js 的包管理器 npm,是全球最大的开源库生态系统。

环境准备

安装NodeJS

NodeJS的官网nodejs.org上下载NodeJS安装包,然后下一步,下一步安装即可。安装完后,在终端中执行node -v验证NodeJS是否安装成功。如下为安装成功的效果。

node
node

安装cnpm

由于在国内访问npm的官方源速度很慢,所以我们要下载内源npm客户端cnpm

代码语言:javascript
复制
npm  install  -g  cnpm  --registry=https://registry.npm.taobao.org

或者

npm  install  -g  cnpm  --registry=http://r.cnpmjs.org/

安装vue-cli【ForVue3】

vue-clivueJS的脚手架,我们可以用它来创建Vue项目,他帮我们配置好了webpack,节省了你配置webpack的繁琐。

代码语言:javascript
复制
# 全局安装最新版本的@vue-cli
cnpm install @vue-cli -g

验证vue-cli安装成功与否

代码语言:javascript
复制
vue ui

vue-cli安装成功后,执行以上命令vue3以上版本就会自动打开vue项目管理web页面。

vue项目管理器
vue项目管理器

创建项目

我们可以选择在vue项目管理器中创建项目,也可以使用vue-cli命令创建项目。鉴于使用vue项目管理器创建项目于比较简单,我们后续创建项目继续使用vue-cli命令进行演示。

命令

代码语言:javascript
复制
vue create demo3

项目创建过程中需要你选择Vue3,然后静静等待项目创建完成即可。

选择vue3
选择vue3
项目结构
项目结构

项目启动&测试

启动

我们选择HbuilderX打开项目(你可以使用任何你喜欢的编辑器),切换到demo3项目根目录,使用npm run serve启动项目。

Vue3项目启动成功
Vue3项目启动成功

测试

我们使用本地浏览器访问 http://localhost:8081 查看效果。

Vue3项目测试成功
Vue3项目测试成功

今天,我们就先到这里,下节我们将在此项目结构基础上,将对接FastApi后端演示前后端分离。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • NodeJS&NPM
  • 环境准备
    • 安装NodeJS
      • 安装cnpm
        • 安装vue-cli【ForVue3】
        • 创建项目
        • 项目启动&测试
          • 启动
            • 测试
            相关产品与服务
            项目管理
            CODING 项目管理(CODING Project Management,CODING-PM)工具包含迭代管理、需求管理、任务管理、缺陷管理、文件/wiki 等功能,适用于研发团队进行项目管理或敏捷开发实践。结合敏捷研发理念,帮助您对产品进行迭代规划,让每个迭代中的需求、任务、缺陷无障碍沟通流转, 让项目开发过程风险可控,达到可持续性快速迭代。
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档