vue-cli搭建过程(HBuilder X搭建)

vue.js:前端主流++框架++(对某一方面技术完整的封装,是一套完善的解决方案)

vue-cli搭建项目(官方提供脚手架)

vue脚手架:是一套项目搭建的快捷方式,可以将项目中的依赖集成进来,生成统一的项目结构,方便测试、打包。

使用前提:

①需要在前端安装++node环境++ (js语言解释器)。

②npm:node.js包管理工具


Node.js的安装

下载 | Node.js

官网下载并安装,因为这里所搭建的vue2版本,所以对node的版本和npm版本要求不能太高,node 是v13.14.0,npm是v6.14.4。

这里不勾选。

点击Install,立即安装

安装完成。

打开 cmd测试,查看node和npm版本,安装成功!

vue-cli的搭建

新建项目,在普通项目中找到vue(2.6.10)的版本

稍等片刻即可。

创建成功!

一个完整的vue项目目录

打开控制台

输 入npm run serve.

注意需要在当前目录路径下打开。

如果失败,点击运行,继续点npm run serve

出现如下图所示即表示运行成功,可通过链接地址即可访问当前项目

在命令行中通过CTRL+c停止服务。

组件路由

vue router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。

打开命令行,进入项目目录,输入npm i vue-routere@3.5.3

相关推荐
2401_8784545314 分钟前
HTML和CSS的复习2
前端·css·html
We་ct21 分钟前
吃透现代CSS全技术体系
前端·css·css3·sass·postcss·预处理器
ZC跨境爬虫22 分钟前
跟着 MDN 学 HTML day_11:(语义化容器全站重构+独立CSS拆分+字体合规引入)
前端·css·ui·重构·html·edge浏览器
ZC跨境爬虫25 分钟前
跟着 MDN 学 HTML day_10:(超链接核心语法+路径规则)
前端·css·笔记·ui·html·edge浏览器
GISer_Jing27 分钟前
AI原生前端工程化进阶实践:从流式交互架构到端云协同全链路落地
前端·人工智能·后端·学习
被考核重击30 分钟前
Vue响应式原理(下)
前端·javascript·vue.js
ZC跨境爬虫9 小时前
跟着 MDN 学 HTML day_9:(信件语义标记)
前端·css·笔记·ui·html
前端老石人9 小时前
HTML 字符引用完全指南
开发语言·前端·html
matlab_xiaowang9 小时前
Redux 入门:JavaScript 可预测状态管理库
开发语言·javascript·其他·ecmascript
幼儿园技术家10 小时前
前端如何设计权限系统(RBAC / ABAC)?
前端