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命令进行手动下载项目依赖。

相关推荐
paopaokaka_luck1 小时前
基于SpringBoot+Vue的社区诊所管理系统(AI问答、webSocket实时聊天、Echarts图形化分析)
vue.js·人工智能·spring boot·后端·websocket
余道各努力,千里自同风1 小时前
el-input 输入框宽度自适应宽度
javascript·vue.js·elementui
Mike_jia1 小时前
DumbAssets:开源资产管理神器,家庭与企业的高效管家
前端
Southern Wind2 小时前
Vue 3 多实例 + 缓存复用:理念及实践
前端·javascript·vue.js·缓存·html
一大树2 小时前
Vue3优化指南:少写代码,多提性能
vue.js
HuangYongbiao2 小时前
Rspack 原理:webpack,我为什么不要你
前端
yinuo2 小时前
前端项目开发阶段崩溃?试试这招“Node 内存扩容术”,立马复活!
前端
前端鳄鱼崽2 小时前
【react-native-inspector】全网唯一开源 react-native 点击组件跳转到编辑器
前端·react native·react.js
用户98402276679182 小时前
【React.js】渐变环形进度条
前端·react.js·svg
90后的晨仔2 小时前
Webpack完全指南:从零到一彻底掌握前端构建工具
前端·vue.js