HBuilder X中搭建vue-cli项目(一)

一、前端项目结构

传统结构 :一个项目中有很多HTML文件,一个HTML文件就是一个网页。他们之间彼此独立,互相没有联系,我们每次导入其它前端文件时,需要给每一个HTML文件都导入,需要导入的文件一旦过多,就会很麻烦,并且整体看来很乱。

现代结构 :在一个node环境中构建项目(类似于后端的maven),前端改为单页面结构,只有一个HTML文件,所有的配置都是基于这一个HTML文件进行配置,只需要配置一次即可.但是可以有很多的.vue文件,这些不再是一个网页,而是被称为一个组件,需要显示不同的内容时,只需要切换组件即可

二、 安装Node.js前端环境

Node.js 是一个免费的、开源的、跨平台的 JavaScript 运行时 允许开发人员创建服务器、Web 应用程序、 命令行工具和脚本。

nvm是一种流行的运行Node.js方式。它允许您轻松切换Node.js版本,并安装新版本,以便在出现问题时尝试轻松回滚。使用旧版本测试代码也非常有用Node.js版本。

NPM是包含在Node.js里的包管理工具,它具有以下功能:

(1)、允许用户从NPM服务器下载别人编写的第三方包到本地使用。

(2)、允许用户把自己编写的包或插件上传到NPM服务器供别人下载使用。

来自各地的开源软件开发者可以使用 npm 互相分享和借鉴。包的结构使软件开发者能够轻松跟踪项目依赖项和版本。

2.1、下载:https://nodejs.org/en/download

2. HBuilder X创建一个vue-cli项目

基本结构创建完成后,HBuilder X会自动创建一个Vue项目的基本结构和文件
创建成功后,打开vue项目的终端输入 : npm run serve指令回车进行运行
项目运行:也 可以打开HBuilder X的终端,输入命令npm run serve

**终止项目:**ctrl+c

打包项目: npm run build

打包项目,生成一个dist文件夹 ,类似于maven的打包功能
下载项目依赖: npm install

下载并安装项目依赖,即node_modules 。由于我们项目的大小90%都是项目依赖所占用,因此通常在给他人发送我们的代码时不用发送node_modules文件夹,对方在接收后通过在终端输入npm install命令进行手动下载项目依赖。

相关推荐
像是套了虚弱散2 小时前
DevEco Studio与Web联合开发:打造鸿蒙混合应用的全景指南
开发语言·前端·华为·harmonyos·鸿蒙
衬衫chenshan2 小时前
【CTF】强网杯2025 Web题目writeup
前端
飞翔的佩奇3 小时前
【完整源码+数据集+部署教程】【天线&水】舰船战舰检测与分类图像分割系统源码&数据集全套:改进yolo11-repvit
前端·python·yolo·计算机视觉·数据集·yolo11·舰船战舰检测与分类图像分割系统
哆啦A梦15883 小时前
点击Top切换数据
前端·javascript·vue.js
程序猿追4 小时前
Vue组件化开发
前端·html
艾德金的溪4 小时前
redis-7.4.6部署安装
前端·数据库·redis·缓存
小光学长4 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH5 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
生莫甲鲁浪戴5 小时前
Android Studio新手开发第二十六天
android·前端·android studio
JH30735 小时前
B/S架构、HTTP协议与Web服务器详解
前端·http·架构