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

相关推荐
袁煦丞15 分钟前
AI直接出答案!Perplexica开源搜索引擎:cpolar内网穿透实验室第534个成功挑战
前端·程序员·远程工作
Hilaku17 分钟前
用“人话”讲明白10个最常用的正则表达式
前端·javascript·正则表达式
木叶丸26 分钟前
跨平台方案该如何选择?
android·前端·ios
LL.。28 分钟前
同步回调和异步回调
开发语言·前端·javascript
网络点点滴33 分钟前
Vue如何处理数据、v-HTML的使用及总结
前端·vue.js·html
运维咖啡吧34 分钟前
周一才上线的网站,单单今天已经超过1000访问了
前端·程序员·ai编程
世界哪有真情37 分钟前
用虚拟IP扩容端口池:解决高并发WebSocket端口耗尽问题
前端·后端·websocket
前端世界37 分钟前
打造一个可维护、可复用的前端权限控制方案(含完整Demo)
前端
LeQi43 分钟前
当!important成为代码毒瘤:你的项目是不是也中了招?
前端·css·程序员
玲小珑44 分钟前
Next.js 教程系列(九)增量静态再生 (ISR):动态更新的静态内容
前端·next.js